با سلام. من مي خوام يه فايل CSS درست كنم كه بتونم اين شكل رو تويه صفحه ي نمايش نشون بده.سوالم اينه كه من كجا اشتباه كردم و چه چيزي رو بايد تغيير بدم؟ يا اينكه اگه كلاً اشتباه رفتم لطفاً راه درست رو به من بگيد.
اما من با اين چيزي كه خودم درست كردم يه خرده مشكل دارم و اونم اينه كه با تغيير طول متن هر كدوم از متن هايي كه از كلاس شامل Position=absolute; استفاده مي كنه.متن نوشته شده در جعبه ي پاييني مياد زير جعبه ي اون كلاسي كه اين خاصيت رو داره.
کدت رو بزار اینجا، با عکس که نمیشه گفت کجا رو اشتباه کردی.
ببخشید کد رو یادم رفته بود:
فکر کنم یه همچین چیزی نوشتم.چون کد رو همراه خودم نیاوردم.
rightbox
{
background: "#000000";
margin-left=: 65%;
position: absolute;
}
leftbox
{
background: "#000000";
margin-right: 35%;
}
box
{
background: "#000000";
margin-top: 5px;
}
شما کد کامل css و html اونو بزار تا دقیق بتونم جواب بدم.
اما یه مثال:
<style type="text/css">
.rightbox
{
position: absolute;
top: 10px;
right: 10px;
width: 300px;
border: 1px solid #000;
}
.lefttbox
{
position: absolute;
top: 10px;
left: 10px;
width: 300px;
border: 1px solid #000;
}
.bottombox
{
margin-top: 20px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="rightbox">roght box</div>
<div class="lefttbox">left box</div>
<div class="bottombox">bottom area</div>
</body>
اینم خود فایل به همراه CSS اش.
مشکل اصلی اینه که با کوچکتر شدن متنی که خاصیت absolute تویه div اش به کار رفته متن پایینی میاد زیر جعبه ی سمت راست
خوب طبیعی هست دیگه، وقتی یه چیزی رو absolute میکنی اون المان از جریان کلی صفحه خارج میشه و دیگه اندازش تاثیری روی موقعیت بقیه نمیزاره. شما اون div ئی رو که absolute هست با margin موقعیت دهی کن.
بله، مگه مشکلی داره؟با margin ؟!!!؟؟؟!!!
با top و left و یا right
شما خوب یه مثال بزن تا منم صحیحشو یاد بگیرم.نوشته شده توسط tarhebartar
دو تا div رو در کنار همدیگه قرار بده و یک div هم در پایین اون دو تا، طوری که با کم یا زیاد شدن ارتفاع div های بالایی، div پایینی هم تغییر موقعیت بده.
خوب راه کار شما چیه؟درسته . چند راه وجود داره ولی توی شرایطی که این دوستمون سوال پرسیده بودن اصلا با margin صحیح نبود.
وقتی که قرار عنصر ما خاصیت absolute اگر اشتباه ننوشته باشم رو قبول کنه
عاملی که باعث مشکل میشه همین absolute هست، پس ناچارا باید از حذفش کنیم و از روش دیگه ای استفاده بشه دیگه.
ممنون از دوستان بابت راهنمایی هاشون.من قبلا هم با margin این کارو کردم ولی درست جواب نداد.ببینید همون طور که یکی از دوستان اشاره کرد من می خوام که دو جعبه ی بالایی من پویا باشه.چون متنی که قراره تو اون دو تا جعبه ی بالایی قرار بگیره از پایگاه داده دریافت می شه و با این وجود ممکنه کاملا اندازه ها متفاوت باشه.بنابراین من ساختاری رو می خوام که بتونه جعبه ی سوم رو زیر جعبه ای قرار بده که بیشترین طول متن یا همون ارتفاع تو صفحه رو داشته باشه؟
برای این پویایی چه کاری باید انجام بدم؟
دوست من،من اگر جای شما بودم از scroll استفاده میکردم.چون جدول هم دردسر های مخصوص خودش را داره و در نمایش کل صفحه ات شما را دچار مشکل میکند:
<html>
<head>
<title>barname nevise.org</title>
<style type="text/css">
.left
{
background-color:blue;
width:45%;
height:4em;
overflow: scroll;
float:left;
}
.bottom
{
background-color:orange;
width:100%;
height:4em;
overflow: scroll;
float:right;
}
.right
{
background-color:red;
width:50%;
height:4em;
overflow: scroll;
float:right;
}
</style>
</head>
<body>
<p>The overflow property decides what to do if the content inside an element exceeds the given width and height properties.</p>
<div class="left">
You can use the overflow property when you want to have better control of the layout. Try to change the overflow property to: visible, hidden, auto, or inherit and see what happens. The default value is visible.
You can use the overflow property when you want to have better control of the layout. Try to change the overflow property to: visible, hidden, auto, or inherit and see what happens. The default value is visible.
</div>
<div class="right">
You can use the overflow property when you want to have better control of the layout. Try to change the overflow property to: visible, hidden, auto, or inherit and see what happens. The default value is visible.
You can use the overflow property when you want to have better control of the layout. Try to change the overflow property to: visible, hidden, auto, or inherit and see what happens. The default value is visible.
</div>
<div class="bottom">
You can use the overflow property when you want to have better control of the layout. Try to change the overflow property to: visible, hidden, auto, or inherit and see what happens. The default value is visible.
You can use the overflow property when you want to have better control of the layout. Try to change the overflow property to: visible, hidden, auto, or inherit and see what happens. The default value is visible.
</div>
</body>
</html>
قسمتی از این کد از w3school اقتباس شده است
توی ff3 و IE8 beta آزمایش شد مشکلی نداشت.
آقا عماد این کار مشکلی ندارد؟
آخرین ویرایش به وسیله aminsharifi67 : شنبه 28 دی 1387 در 18:15 عصر
البته این مورد سلیقه ای هست، ولی خوب کمتر پیش میاد که یکی از scroll برای همچین شرایطی استفاده کنه. راهی که به ذهن من میرسه همون margin هست.آقا عماد این کار مشکلی ندارد؟
آخه من هم از راه شما رفتم ولی وقتی داده ها زیاد میشوند div ما بهم میخورد،اگر فکر میکنید این راه بهتر است امکان دارد یک فایل کاملش را بگذارید؟
ببخشید، بنده اشتباه کردم در این مورد یعنی اضافه شدن مطالب به div رو چک کردم که باعث به هم ریختگی میشه( بی تجربگیه و هزار درد) دیگه نمیدونم چه کاری میشه کرد.آخه من هم از راه شما رفتم ولی وقتی داده ها زیاد میشوند div ما بهم میخورد،اگر فکر میکنید این راه بهتر است امکان دارد یک فایل کاملش را بگذارید؟
شما استاد هستید.منم خیلی از راه ها رو امتحان کردم.
فکر کنم تنها راهش استفاده از scroll است.
پیروز باشید.
سلام دوستان خسته نباشيد.
يه سؤال ديگه داشتم و اونم اينه كه فرض كنيد ما يه جدول داريم با مثلاً 5 تا ستون (مثال زير)، حالا به صورت دايناميك به اين جدول يه سري سطر اظافه مي شه، تمام سلول هاي اين سطرها textbox داخلشون وجود داره من مي خوام اندازه ي اين textbox ها به اندازه ي title اي كه هر كدوم از ستون ها دارن باشه براي اين كار بايد تويه css ام چه كلاسي و با چه مشخصاتي اظافه كنم؟ من يه كلاس ساده نوشتم ولي خب چون چيز زيادي از طرز كار constant هاي مربوط به css ها نمي دونم درست كار نكرد.
HTML CODE FOR WRAPING TABLE
<table>
<tr align="center"><td class ="titletd">firstcolumn</td><td class ="titletd">second column</td><td class="titletd">3rd column</td><td class="titletd">fourth column</td><td class="titletd">5th column</td></tr>
</table>
JAVASCRIPT FOR CREATING DYNAMIC ROW
function addItem()
{
.
.
.
var thirdc=document.createElement("input");
thirdc.setAttribute("type","textbox");
thirdc.setAttribute("name","thirdc"+nextVal);
thirdc.setAttribute("disabled","disabled");
thirdc.setAttribute("class","celltxt");
thirdc.setAttribute("value",document.getElementsBy Name("data")[0].value);
//some more textbox that must create dynamically
var row=tbl.insertRow(tbl.rows.length);
row.insertCell(0).appendChild(firstc);
row.insertCell(1).appendChild(secondc);
.
.
.
.
for(var i=0;i<row.cells.length;i++)
{
row.cells[i].setAttribute("class","celltd");
}
row.setAttribute("align","center");
}
CSS CODE FOR CELLTXT CLASS
.celltxt
{
width : auto;
}
سلام.
خودت مطابق با برنامه ات،کد زیر را تغییر بده:
<html>
<head>
<script language="javascript" type="text/javascript">
function pers(){
document.getElementById("Hidden1Size").value =document.getElementById("Text1").size;
var size= document.getElementById("Hidden1Size").value;
var thirdc=document.createElement("input");
thirdc.setAttribute("type","textbox");
thirdc.setAttribute("id","persepolis");
thirdc.setAttribute("disabled","disabled");
thirdc.setAttribute("size",size);
thirdc.setAttribute("value","hello persia");
document.getElementById("frm").appendChild(thirdc) ;
}
</script>
<title></title>
</head>
<body >
<form id="frm">
<input id="Text1" Name="Text1" size="4" value="hello persia" type="text" />
<input name="Submit1" type="button" onclick="pers();" value="submit" />
<input id="Hidden1Size" type="hidden" />
</form>
</body>
</html>
ممنون از راهنماييتون ولي سؤال من اين بود كه چه طور مي تونم اندازه ي title هر ستون جدولمو در بيارم. نه اينكه با الگو گرفتن از يه textbox اندازه ي بقيه ي textbox هام رو معين كنم.
دوباره مي گم من مي خوام اندازه ي متن title هر ستون از جدولمو پيدا كنم. براي اين كار چي كار بايد بكنم؟
دوستان گمان كنم مشكلم حل شد. از وقتي كه گذاشتين ممنونم.
قوانین ایجاد تاپیک در تالار
پاسخ با نقل قول