سوال: بهم ریختگی در طراحی وب!؟ [بایگانی]

esmaeilbf

چهارشنبه 11 بهمن 1391, 00:41 صبح

سلام
توی html وقتی کد سایدبار رو کپی میکنم و میخوام تو تا منو زیر هم ایجاد کنم صفحه ی سمت چپشون بهم میریزه اما وقتی یک سایدبار دارم سرجاش درسته
از float و clear هم استفاده کردم مشکلل چیه1؟!!
این کد html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>title</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="header">

<div id="contact-topheader"></div>
<div class="contact-topheader-txt"><a href="#">تلفن:<br>
فکس:</a></div>
</div>

<div id="content">


<div class="sidebar">
<div id="sidebar-top1"></div>
<div class="text-sidebar">

</div>
</div>

<div class="sidebar">
<div id="sidebar-top2"></div>
<div class="text-sidebar">

</div>
</div>

<div id="content-bdy"></div>
</div>
</body>
</html>

و اینم کد css:

/**********************sidebar***************/
.sidebar{
width:270px;
height:300px;
background:#e3e8e8;
float:right;
clear:both;
margin:20px 30px 0 0;
display:block;

}
#sidebar-top1{
width:127px;
height:40px;

}
#sidebar-top2{
width:127px;
height:40px;

}

.text-sidebar ul{
margin:20px 40px 30px 40px;
padding:3px 0 0 0 ;
}
.text-sidebar li{
margin:20px;
list-style:url(img/tick.png);

}
.text-sidebar a{
color:#000;
font-size:12px;
font-weight:bold;
text-decoration:none;
padding-top:10px;

}

.text-sidebar a:hover{
color:#0099FF;

}
/***********************end sidebar************/

#content-bdy{
width:860px;
height:500px;
margin-left:50px;
background:#e3e8e8;
float:left;
clear:both;

}

همه ی کد رو اینجا نذاشتم فقط میخوام اون مشکل دو منوی کناری و محتوای وسط صفحه مرتب کنار هم قرار بگیرن

kianajoo

چهارشنبه 11 بهمن 1391, 01:42 صبح

درود...
شما برای این کار بهتره دو تا دیو داشته باشی...مثلا دیو سمت راست و دیو سمت چپ...به این دو تا دیو float بده و بقیه دیواتو توی این دو تا دیو بریز...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>title</title>
<style type="text/css">
.sidebar{
width:270px;
height:300px;
background:#e3e8e8;
float:right;
clear:both;
margin:20px 30px 0 0;
display:block;

}
#sidebar-top1{
width:127px;
height:40px;

}
#sidebar-top2{
width:127px;
height:40px;

}

.text-sidebar ul{
margin:20px 40px 30px 40px;
padding:3px 0 0 0 ;
}
.text-sidebar li{
margin:20px;
list-style:url(img/tick.png);

}
.text-sidebar a{
color:#000;
font-size:12px;
font-weight:bold;
text-decoration:none;
padding-top:10px;

}

.text-sidebar a:hover{
color:#0099FF;

}
/***********************end sidebar************/

#content-bdy{
width:860px;
height:500px;
margin-left:50px;
background:#e3e8e8;

}
#right{
float:right;
}
#left{
float:left;
}
</style>
</head>

<body>
<div id="header">

<div id="contact-topheader"></div>
<div class="contact-topheader-txt"><a href="#">تلفن:
فکس:</a></div>
</div>

<div id="content">
<div id="right">

<div class="sidebar">
<div id="sidebar-top1"></div>
<div class="text-sidebar">

</div>
</div>

<div class="sidebar">
<div id="sidebar-top2"></div>
<div class="text-sidebar">

</div>
</div>
</div>

<div id="left">
<div id="content-bdy"></div>
</div>
</div>
</body>
</html>