نم

[dr_csharp]

این page رو در نظر بگیرین :


<divid="dailyStatement"runat="server">
salam this is statement
</div>
<divid="search">
search engine
</div>
<divid="aboutCity">
info about city come here
</div>
<divid="news">
last news
</div>
<divid="picGallary">
picture gallary
</div>


و این Css های صفحه ی فوق هست :


#dailyStatement
{
position: absolute;
top: 120px;
left: 440px;
width: 380px;
height: 50px;
}
#search
{
position: absolute;
top: 120px;
left: 50px;
width: 390px;
height: 50px;
}
#aboutCity
{
position: absolute;
top: 180px;
left: 440px;
width: 400px;
height: 340px;
}
#news
{
position: absolute;
top: 180px;
left: 50px;
width: 380px;
height: 200px;
}
#picGallary
{
position: absolute;
top: 390px;
left: 50px;
width: 380px;
height: 130px;
}


چرا مثلا وقتی درون قسمت dailyStatement مینویسم چینش صفحه بهم میخوره و این قسمت میره بالای صفحه قرار میگیره ؟
ضمنا با تغییر ابعاد page ( browser ) صفحه بهم میریزه

[dr_csharp]

چون بهش left و top میدی و تکون میخوره و نسبت به صفحه تغییر میکنه
اگه left و top ندیم پس چجوری بهش بگیم کجای صفحه قرار بگیر ؟؟

[emad_67]

اگه left و top ندیم پس چجوری بهش بگیم کجای صفحه قرار بگیر ؟؟
الان میخوای چه جوری قرار بگیره؟
شما تمام موقعیت ها رو absolute تعریف کردی. وقتی از absolute استفاده میکنی اون تگ از جزیان کلی صفحه خارج میشه. حالا با دادن left و right و top و bottom میتونی فاصله اونو از طرفین صفحه تنظیم کنی. الان هم دقیقا همین جوری شما عملا کردی و به هر کدوم از div ها یه موقیعیتی دادی.

ضمنا با تغییر ابعاد page ( browser ) صفحه بهم میریزه
این مورد رو من تست کردن به هم نخورد. بهم هم نباید بخوره چون به هر کدوم width دادی. در صورتی که پهنا رو مشخص نکنی با تغییر اندازه پنجره مرورگر تغییر ایجاد میشه. درست منظورتو نفهمیدم.

[dr_csharp]

دوست عزیز اصلا برای چینش div توی صفحه این کار رو نباید بکنید.
باید یک div کلی بدید و کل عناصر رو بزاری توش و بعد float بدید.
نه با top و left .اگر طرف رزولیشن رو عوض کنه صفحه می ترکه و نشون نمیده
میشه در رابطه با float بیشتر توضیح بدین ؟

[امید امرایی]

ابتداعا این نوع طراحی شما با Div های Absolute اصلا مناسب و صحیح نیست. شما بهتره اصلا position رو تعیین نکنید و یا static باشه.

اگه منظور اصلی شما از این کار قرار گرفتن چند div در یک خط و کنار همدیگست همونطور که tarhebartar (http://barnamenevis.org/forum/member.php?u=56432) عزیز فرمودن باید از float استفاده کنید.

این صفت به هر عنصری که از اون پشتیبانی می کنه این امکان رو می دی که چیدمانی شناور داشته باشه و مقادیر رو می تونید right, left, none و یا inherit قرار بدید.

none : عنصر خاصیت شناور نداره
left : عنصر به سمت چپ شناور می شه
right : عنصر به سمت راست شناور می شه
inherit : نوع شناور بودن از عنصر والد به ارث می رثه

مثال:


<div style="float: left;">Here is left</div>
<div style="float: left;">Here is left and inside other</div>
<div style="float: right;">Here is right</div>

[emad_67]

یه سوال هم من برام پیش اومد
توی صفحات معمولا در کنار صفحه ماژول هایی وجود دارند. حالا میخواستم ببینم تنظیم موقیعیت این ماژول ها با absolute بهتره یا با float؟ یعنی کدومشون استاندارده؟
اگر از absolute استفاده کنیم به راحتی میشه با موقعیت دهی اونو جابجا کرد. اگر از float استفاده کنیم باید در خیلی از جاها مقدار margin-top اونو منفی در نظر بگیریم تا در اون موقعیتی که می خوایم قرار بگیره. حالا کدوم بهتره؟

[emad_67]

یکی نبود جواب ما رو بده؟

[jaza_sa]

استفاده از هر دو روش (بطور مثال یعنی: position: absolute یا float: right) استاندارد هست و در استفاده هیج مشکلی ندارند
مهم اینه که با کدوم یکی از این روش ها میشه راحت تر صفحه رو چید
به نظر من استفاده از float مناسب تره
در اکثر صفحات وب هم از این خصوصیت برای چیدمان استفاده کرده اند

موفق باشید

[dr_csharp]

آیا برای اینکه یه Page داشته باشیم که وقتی resolution تغییر میکنه یا اندازه Page تغییر میکنه چیدمان بهم نریزه باید اینطور عمل کنیم :
1-یه div با position:absolute که width و height داره .
2-حال قسمت های مختلف رو در Div بالا بصورت Float:.. مشخص میکنیم .
درسته ؟
چون در حال حاضر یه صفحه که فقط درونش از DIV با Float استفاده شده طراحی کردم ولی با تغییر ابعاد Page نوشته هام بهم میریزه :ناراحت:

[emad_67]

میشه کدت رو بزاری تا ببینم؟
دقیق متوجه نشدم که چیکار کردی؟
البته محتوای اصلی صفحه و حتی div در برگیرنده همه محتویات رو اصلا لازم نیست absolute بزاری. اگر نیاز داری فاصله هاشو از لبه ها تنظیم کنی از margin و padding استفاده کن.
اون چیزی رو که ساختی اگه بزاری بهتر میشه توضیح داد.

[jaza_sa]

آیا برای اینکه یه Page داشته باشیم که وقتی resolution تغییر میکنه یا اندازه Page تغییر میکنه چیدمان بهم نریزه باید اینطور عمل کنیم :
1-یه div با position:absolute که width و height داره .
2-حال قسمت های مختلف رو در Div بالا بصورت Float:.. مشخص میکنیم .
درسته ؟
چون در حال حاضر یه صفحه که فقط درونش از DIV با Float استفاده شده طراحی کردم ولی با تغییر ابعاد Page نوشته هام بهم میریزه :ناراحت:
همونطور که گفتم ، از روش های زیادی میشه یک صفحه رو طراحی کرد
با تعیین width برای صفحت میتونی جلوی بهم ریختگی رو بگیری

[dr_csharp]

میشه کدت رو بزاری تا ببینم؟


<divid="page">
<divid="banner">
banner come here
</div>
<divid="rightcolumn">
column come here
</div>
<divid="main">
main part come here
</div>
<divid="footer">
here is footer
</div>
</div>

و اینهم فایل CSS مربوطه :



#page
{
margin-right: 50px;
margin-left: 50px;
}


#banner
{
background-image: url(../Images/banner.gif);
width: 900px;
height: 100px;
}
#rightcolumn
{
margin-top: 5px;
background-color: Blue;
float: right;
font-size: 8pt;
width: 100px;
height: 400px;
}
#main
{
margin-top: 5px;
margin-right: 5px;
background-color: Red;
float: left;
width: 795px;
height: 400px;
}
#footer
{
margin-top: 5px;
background-color: Black;
width: 900px;
}

[emad_67]

شما همیشه سعی کن محتوی اصلی صفحه رو ثابت نگه داری و بعد عناصری که قراره کناره صفحه قرار بگیرن رو float یا absolute کنی.
الان اینو من ادیت کردم و مشکل حل شد:


#page
{
margin-right: 50px;
margin-left: 50px;
border: 1px solid #000000;
}
#banner
{
background-image: url(../Images/banner.gif);
width: 900px;
height: 100px;
border: 1px solid #000000;
}
#rightcolumn
{
margin-top: -405px;
background-color: Blue;
float: right;
font-size: 8pt;
width: 100px;
height: 400px;
}
#main
{
margin: 5px 105px 5px 5px;
background-color: Red;
width: 795px;
height: 400px;
}
#footer
{
margin-top: 5px;
background-color: Black;
width: 900px;
}


<div id="page">
<div id="banner">
banner come here
</div>
<div id="main">
main part come here
</div>
<div id="rightcolumn">
column come here
</div>
<div id="footer">
here is footer
</div>
</div>
البته من اون ستون سمت راست رو مقدار margin-top رو براش منفی دادم تا بیاد بالا. نمیدونم درسته یا نه چون من خودم هم تازه کارم. عنضر وسط یعنی main رو از float در اوردم و با margin سر جای خودش تنظیم کردمش. همچنین یکی دو تا border هم اضافه کردم تا مکان ها بهتر مشخص بشه. بعدا حذفش کن.