سوال: راهنمایی در باره CSS [بایگانی]

maxpayn2

دوشنبه 10 اسفند 1388, 12:31 عصر

سلام

در صفحه 3 تا div دارم که کنار هم نمایش داده میشن ، div های راست و چپ عرض ثابت دارن ، میخوام div وسطی عرضش جوری تنظیم بشه که div های راست و چپ دقیقا به کنار صفحه بچسبن و div وسط فاصله بین این دو تا رو پر کنه و اگه یکی از این div ها مقدار نداشت و نشون داده نمیشد div وسط تا کنار صفحه ادامه پیدا کنه

alireza244

دوشنبه 10 اسفند 1388, 16:49 عصر

دیو های کناری را با خاصیت float به سمت چپ و راست بچسبون خاصیت absolute دیو وسطی را relative قرا بده و خاصیت right و left را برابر با اندازه دیوهای چپ و راست قرار بده

اگر هم عرض دیوهای کناری مشخص نیست از javascript برای تنظیم خاصیت left و right استفاده کن

<div style="background-color: #008000; float: left; width: 200px; height: 500px;">
</div>
<div style="position: absolute; width: auto; right: 300px; left: 200px; background-color: #FF00FF; height: 500px;">
</div>
<div style="float: right; width: 300px; background-color: #FF0000; height: 400px;">
</div>
<div style="clear: both; background-color: #FFFF00; height: 100px">
</div>

maxpayn2

سه شنبه 11 اسفند 1388, 08:54 صبح

ممنون از جوابتون ، کد صفحه من اینه :

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div class="Banner">
</div>

<div class="Menu">
</div>

<div class="Content">

<div class="Top">
بالا
</div>

<div class="Left">
چپ
</div>

<div class="Center">
وسط<br />
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>

<div class="Right">
راست
</div>

<br clear="all" />

<div class="Bottom">
پایین
</div>

</div>

<div class="Footer">
</div>

</form>
</body>
</html>

و CSS با اعمال تغییراتی که شما فرمودید :

body
{
text-align:center;
font-family:Verdana;
width:100%;
margin:0 auto;
}

.Banner
{
width:994px;
height:90px;
border-style:solid;
border-width:0px;
background-color:#0e2036;
text-align:center;
margin:0 auto;
}

.Menu
{
width:994px;
height:30px;
border-style:solid;
border-width:0px;
background-color:#0e2010;
text-align:center;
margin:0 auto;
}

.Content
{
width:994px;
border-style:solid;
border-width:0px;
text-align:center;
margin:0 auto;
background-color:#f0f0f0;
}

.Top
{
width:987px;
border-style:solid;
border-width:1px;
background-color:Transparent;
text-align:center;
margin:0 auto;
margin-top:3px;
margin-right:3px;
}

.Left
{
width:190px;
height:auto;
border-style:solid;
border-width:1px;
background-color:Transparent;
text-align:center;
margin:0 auto;
float:left;
margin-top:3px;
margin-left:2px;
margin-right:2px;
margin-bottom:3px;
}

.Center
{
position:absolute;
width:auto;
height:auto;
border-style:solid;
border-width:1px;
background-color:Transparent;
text-align:center;
margin:0 auto;
margin-top:3px;
margin-left:2px;
margin-right:2px;
margin-bottom:3px;
right: 191px;
left: 190px;
}

.Right
{
width:191px;
height:auto;
border-style:solid;
border-width:1px;
background-color:Transparent;
text-align:center;
margin:0 auto;
float:right;
margin-top:3px;
margin-left:2px;
margin-right:2px;
margin-bottom:3px;
}

.Bottom
{
width:987px;
border-style:solid;
border-width:1px;
background-color:Transparent;
text-align:center;
margin:0 auto;
margin-right:3px;
margin-bottom:5px;
}

.Footer
{
width:994px;
height:30px;
border-style:solid;
border-width:0px;
background-color:#0e2010;
text-align:center;
margin:0 auto;
}

ولی صفحه به هم میریزه ، div وسطی وارد محدوده 2 تا div کناری میشه

raravaice

شنبه 15 اسفند 1388, 13:44 عصر

خوب وقتی اندازه ها Fix هست ، همه رو Fix کنی مشکل حل میشه.

.Left
{
width:190px;
height:auto;
border-style:solid;
border-width:1px;
background-color:Transparent;
text-align:center;
margin:0 auto;
float:left;
margin-top:3px;
margin-left:2px;
margin-right:2px;
margin-bottom:3px;
}

.Center
{
/*position:relative;*/
width:596px;
height:auto;
border-style:solid;
border-width:1px;
background-color:Transparent;
text-align:center;
margin:0 auto;
margin-top:3px;
margin-left:2px;
margin-right:2px;
margin-bottom:3px;
float:left;
/*right: 190px;
left: 190px;*/
}

.Right
{
width:190px;
height:auto;
border-style:solid;
border-width:1px;
background-color:Transparent;
text-align:center;
margin:0 auto;
float:left;
margin-top:3px;
margin-left:2px;
margin-right:2px;
margin-bottom:3px;
}

maxpayn2

شنبه 15 اسفند 1388, 17:09 عصر

نمیخوام div وسطی اندازش فیکس باشه ، میخوام اگه یکی از دو تا div کناری یا هر دو تاشون نبودن div وسطی جاشون رو پر کنه

alireza244

شنبه 15 اسفند 1388, 19:13 عصر

فکر کنم این کدها با همه ورژن های ie و فایر فاکس بجز IE6 کار بکنه - من نتونستم کاری بکنم برای IE6

وای از این IE6:عصبانی++:

maxpayn2

یک شنبه 16 اسفند 1388, 09:10 صبح

من از IE 8 استفاده میکنم ولی بازم مشکل داره

dayaan_2010

چهارشنبه 19 اسفند 1388, 10:37 صبح

دیو های کناری را با خاصیت float به سمت چپ و راست بچسبون خاصیت absolute دیو وسطی را relative قرا بده و خاصیت right و left را برابر با اندازه دیوهای چپ و راست قرار بده

اگر هم عرض دیوهای کناری مشخص نیست از javascript برای تنظیم خاصیت left و right استفاده کن

<div style="background-color: #008000; float: left; width: 200px; height: 500px;">
</div>
<div style="position: absolute; width: auto; right: 300px; left: 200px; background-color: #FF00FF; height: 500px;">
</div>
<div style="float: right; width: 300px; background-color: #FF0000; height: 400px;">
</div>
<div style="clear: both; background-color: #FFFF00; height: 100px">
</div>

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