مشکل با دایوهای تو در تو

[lady64]

سلام. تو این کد میخوام دایو محتوای opinion رو زیر دایو محتوای product قرار بدم و همه ی اینها درون دایو text هستند . ولی این اتفاق نمیفته . مشکل کجاست ؟


<div id="text" ><p> text</p>
<div id="product" ><p>new product</p></div>
<div id="opinion" ><p>opinion</p></div>
</div>


کدهای css


#text{ width:980px;height:470px;float:right;margin:auto;m argin-top:10px;background-color:#339966}
#product{width:290px;height:200px;overflow:hidden; margin-left:10px;margin-top:10px;background-color:#00CCFF; float:left; position:relative}
#opinion{width:290px;height:200px;overflow:hidden; margin-left:10px;margin-top:10px;background-color:#FF6666; float:left; position:relative}


البته همه ی اینها درون یک div دیگه هستند که کاملش رو قرار ندادم.
ممنون میشم راهنمایی کنید.

[khanlo.javid]

دوست عزیز تنها کاری که شما باید بکنید اینه که تو استایل opinion و product خصوصیت float براشون تعریف نکنید. همین . چون وقتی خاصیت float تعریف کنید تا جایی که فضا اجازه بده دیو ها به هم میچسبن.




موفق باشید.

[lady64]

ممنون . جالب بود . این مورد حل شد. همه ی اینها رو درون یک div بنام page قرار دادم ولی الان بیرون از page قرار میگیره . تا قبل از اینکه از دایو های تو درتو استفاده کنم همه چیز درست بود . مشکل از کجاست ؟و footer هم پائین قرار نگرفته . در حقیقت footer در page قرار گرفته ولی بقیه خیر.


<div id="page">

<div id="text" class="blank-banner"><p> text</p>
<div id="product" class="blank-banner"><p>new product</p></div>
<div id="opinion" class="blank-banner"><p>opinion</p></div>
</div>

<div id="footer" class="blank-banner"><p>footer</p></div>
</div>

کدهای css


#page{background:#fff;text-align:center;margin:100px auto;padding:10px;width:980px; border:double; border-color:#006699; }
#text{ width:980px;height:470px;float:right;margin:auto;m argin-top:10px;background-color:#339966}
#product{width:290px;height:200px;overflow:hidden; margin-right:670px;margin-top:10px;background-color:#00CCFF; }
#opinion{width:290px;height:200px;overflow:hidden; margin-right:670px;margin-top:10px;background-color:#FF6666; }
#footer{padding:0; margin-bottom:0px; margin-top:15px; margin-left:auto; margin-right:auto ;position:relative;height:50px;background-color:#CCFFFF ; width:980px; }

[lady64]

حل شد . flot:right رو از دایو text باید حذف میکردم

[khanlo.javid]

ممنون . جالب بود . این مورد حل شد. همه ی اینها رو درون یک div بنام page قرار دادم ولی الان بیرون از page قرار میگیره . تا قبل از اینکه از دایو های تو درتو استفاده کنم همه چیز درست بود . مشکل از کجاست ؟و footer هم پائین قرار نگرفته . در حقیقت footer در page قرار گرفته ولی بقیه خیر.


<div id="page">

<div id="text" class="blank-banner"><p> text</p>
<div id="product" class="blank-banner"><p>new product</p></div>
<div id="opinion" class="blank-banner"><p>opinion</p></div>
</div>

<div id="footer" class="blank-banner"><p>footer</p></div>
</div>

کدهای css


#page{background:#fff;text-align:center;margin:100px auto;padding:10px;width:980px; border:double; border-color:#006699; }
#text{ width:980px;height:470px;float:right;margin:auto;m argin-top:10px;background-color:#339966}
#product{width:290px;height:200px;overflow:hidden; margin-right:670px;margin-top:10px;background-color:#00CCFF; }
#opinion{width:290px;height:200px;overflow:hidden; margin-right:670px;margin-top:10px;background-color:#FF6666; }
#footer{padding:0; margin-bottom:0px; margin-top:15px; margin-left:auto; margin-right:auto ;position:relative;height:50px;background-color:#CCFFFF ; width:980px; }


در صورت استفاده از float باید از خصوصیت زیر هم تو استایلتون استفاده کنید .

clear:both;



موفق باشید.

[Saber Mogaddas]

سلام
روش درست اینه که شما برای تگ page استایل زیر رو وارد کنید :

min-height: 1px; overflow: hidden;

و بعد هم به text و هم footer دستور float:right رو اضافه کنید.
خوب حالا مشکل شما حل شد و لی یه مشکل دیگه که پیشرو دارید دیو های product و opinion هست که دارای margin-right های کلانی هستند این دو دیو رو تو یه دیو اصلی قرا بدید :


<div id="Side-Wraper">
<div id="product" class="blank-banner"><p>new product</p></div>
<div id="opinion" class="blank-banner"><p>opinion</p></div>
</div>


#Side-Wraper
{
width:300px;
min-height:10px;
overflow:hidden;
float:left;
}

و در نهایت کد های شما به صورت زیر بهینه خواهد شد..

#page{background:#fff;text-align:center;margin:100px auto;padding:10px;width:980px; border:double; border-color:#006699;min-height:10px;overflow:hidden; }
#text{ width:980px;min-height: 10px;float:right;margin:auto;margin-top:10px;background-color:#339966}
#product{width:290px;height:200px;overflow:hidden; margin-left:5px;margin-top:10px;background-color:#00CCFF; }
#opinion{width:290px;height:200px;overflow:hidden; margin-left:5px;margin-top:10px;background-color:#FF6666; }
#footer{float:right;padding:0; margin-bottom:0px; margin-top:15px; margin-left:auto; margin-right:auto ;position:relative;height:50px;background-color:#CCFFFF ; width:980px; }
#Side-Wraper
{
width:300px;
min-height:10px;
overflow:hidden;
float:left;
}



<div id="page">
<div id="text" class="blank-banner"><p> text</p>
<div id="Side-Wraper">
<div id="product" class="blank-banner"><p>new product</p></div>
<div id="opinion" class="blank-banner"><p>opinion</p></div>
</div>
</div>

<div id="footer" class="blank-banner"><p>footer</p></div>
</div>

موفق باشید..

[lady64]

ممنون . خیلی توضیحات کامل بود . لطف کردین .
فقط یک مورد دیگه . در firefox جدول رو با اینکه center قرار میدم ، وسط قرار نمیگیره ، باید برای جدول هم یک دایو مثل wraper قرار بدم ؟ فرض کنیم در دایو text یک table داریم .

[Saber Mogaddas]

سلام
بله می تونید جدول رو داخل یک دیو کلی قرار بدید، ولی پیشنهاد می کنم تو طراحی صفحات از table استفاده نکنید تو 50 درصد تاپیک ها چرا استفاده نکنیم گفته شده ..به جای table جدول رو با div پیاده سازی کنید ..
موفق باشید..