مشکل با قالب سه ستونه با css در asp ??

[Fartaj]

سلام خدمت دوستان

من تو یک پروژه asp سعی کردم برای قالب جدول رو حذف کنم و از div استفاده کنم برای این کار اومدم یک div اصلی تعریف کردم :

.main
{
margin-top:20px;
margin-left:auto;
margin-right:auto;
width:910px;
height:100%;
direction:rtl;
background:#083643;
border-top-left-radius:2em;
border-top-right-radius:2em;
}

و برای سه ستون وسط این div اصلی :

.right
{
margin-top:10px;
margin-right:5px;
float:right;
clear: right;
width:180px;
text-align:right;
height:100%;
}
.left
{
margin-top:10px;
margin-left:5px;
float:left;
width:180px;
clear: left;
text-align:right;
height:100%;
}
.center
{
margin-top:10px;
margin-right:5px;
margin-left:5px;
width:530px;
height:auto;
float:left;
}

سه ستون درست کنار هم قرار می گیرن
حالا مشکلی که دارم اینه که تو Chorome و Firefox ارتفاع اون div اصلی (main) تا نصفه بیشتر نمیاد و زیر ستون ها خالی می مونه در صورتی که تو explorer مشکلی نداره ؟؟

[hamid_kha]

علیکم السلام...
خصوصیت height:100% کلاس .main رو باem یا px مقداردهی کن همچنین height:auto; مربوط به کلاس
.center رو مقدار برحسب درصد بده ببین درست میشه؟!
با افزونه firebug فایرفاکس تستش کن با اون راحت تر میتونی مشکلت رو حل کنی:لبخندساده:

[Fartaj]

تا height رو با px و یا en می دم درست می شه اما خوب با این کار دیگه ارتفاع متغیر نیست دیگه ؟

[cyrusthegreat]

دوست عزیز

شما کلا مقدار height:100%; رو بردارید و نتیجه رو بگید. من احتمال میدم مشکل این بوده باشه.

[nariman_t]

نه مشکل شما خیلی ساده هستش در داخل main یک دایو دیگه تعریف کنید که این دایو زیر سه ستون مورد نظر باشه و مقدار این دایو رو به این شکل بدید

#foter{
width:910px;
hieght:1px
clear:both
}

[Saber Mogaddas]

سلام
من کدهای css شما رو به صورت زیر تغییر دادم و مقدارهای پیش فرض دادم و تو ie 7 به بالا ، Firefox ، chrome، safari تست کردم و به درستی جواب داد ، مشکل شما در height دیو اصلی بود که در پایین می تونید تغییرات لازم رو ببینید البته مقداری از کد ها هم اضافه بود پاک شد ..

.main
{
margin-top:20px;
margin-left:auto;
margin-right:auto;
width:910px;
min-height:10px;
overflow:hidden;
direction:rtl;
background:#083643;
border-top-left-radius:2em;
border-top-right-radius:2em;
}

.right
{
margin-top:10px;
margin-right:5px;
float:right;
width:180px;
text-align:right;
min-height:70px;
background:#474747;
}
.left
{
margin-top:10px;
margin-left:5px;
float:left;
width:180px;
text-align:right;
min-height:40px;
background:#474747;
}
.center
{
margin-top:10px;
margin-right:5px;
margin-left:5px;
width:530px;
min-height:60px;
background:#474747;
float:left;
}

موفق باشید..

نه مشکل شما خیلی ساده هستش در داخل main یک دایو دیگه تعریف کنید که این دایو زیر سه ستون مورد نظر باشه و مقدار این دایو رو به این شکل بدید

#foter{
width:910px;
hieght:1px
clear:both
}



--دوست عزیز nariman-t برای متغیر کردن ارتفاع یک دیو از استایل هایی که در بالا ذکر شد استفاده میشه و نیاز به ایجاد تگ اضافه بر فرض مثال شما foter# نیست ..گفته ی شما زمانی لازم میشه که بخواهیم یک تگ دیو رو بعد از دیو main قرار بدیم بله برای اینکه تگ دیو بعد از main به کف بچسبه با کد شما float های بالای دیو foter رو خنثی میکنیم تا تگ بعد از تگ main به کف مرورگر بچسبه..

پاورقی--لازم به ذکر هست که تلفظ تگ دیو به دایو اشتباه هست ، من این مسله رو تو بسیاری از تاپیک ها برای دوستان میگم و به نظرم لزوما یک طراح وب باید با نحوه صحیح تلفظ و بیان کد های که باهاشون سر کار داره اشنایی داشته باشه..درسته؟

موفق باشید..

[Fartaj]

دوستان ممنون از لطفتون من این سوال رو تو asp هم پرسیدم اونجا یکی از دوستان گفتن از کلاس cleare :


.clear
{
clear:both;
}


بعد از سه ستون استفاده کن من هم این کار رو کردم و درست شد

بازم ممنون از پی گیریتون

[nariman_t]

من هم منظورم همون Clear بود اون چیزی که من نوشتم فقط یک مثال بود شما برای هر کاری به جز فوتر میتونید استفاده کنید از کدی که نشتم

[Saber Mogaddas]

سلام
بله تو بعضی جاها لازم هست از clear استفاده کرد ولی تو جایی که میتونیم از min-height استفاده کنیم نیاز به اضافه کردن یک تگ اضافی نیست..هر چی بهینه باشه کدها به هم آنقدر کار ما راحت خواهد شد..لازم به ذکر هسا که دستور clear مختص به footer نیست..
موفق باشید..