السلام عليكم
أنا عملت صفحة html و معها ملف التنسيق css
الصفحة كانت تظهر على ما يرام لكن يظهر خلل كما في الصورة التالية
يعني دائما قائمة sidebar اللي على اليمين ستمتد تحت ال class بتاع content اللي على يسار القائمة
مما دفعني إلى إنشاء وسم ID لجمعها معا وعمل خلفية لهذا الوسم تمتد كلما امتد sidbar أو post
بعد إضافة ID = spacerbg الدي يجمع القائمة والمحتوى
تغير شكل الواجهة وتشوه كما في الصورة أسفله
هذا هو ملف html كاملا
<head> <title>try it again</title><link rel="stylesheet" media="screen" type="text/css" title="style" href="style.css"></head>
<body>
<div id = "header">
<div class= "bhead"><div class = "b1"></div>
<div class = "b2"><img src='images/b2.gif' /></div>
<div class = "b3"></div>
<div class = "b4"><img src='images/b4.gif' /></div>
<div class = "b5"></div>
<div class = "b6"><img src='images/b6.gif' /></div>
<div class = "b7"></div>
<div class = "b8"><img src='images/b8.png' /></div>
<div class = "b9"></div>
<div class = "b10"></div>
<div class = "b11"><img src='images/b11.gif' /></div>
<div class = "b12"></div></div></div>
<div id="b13"></div>
<div id="spacerbg">
<div class="content">
<div class = "title"></div><div class ="post"><div class = "sd1">post1 post2 post3</div></div>
</div>
<div class="sidebar">
<div class="sidebar1"></div>
<div class ="sidebarlink"><ul><li>islame</li><li>islame</li><li>islame</li><li>islame</li><li>islame</li><li>islame</li><li>islame</li><li>islame</li><li>islame</li><li>islame</li><li>islame</li></ul></div>
<div class ="sidebottom"></div>
<div class="sidebar2"></div>
<div class ="sidebarlink"><ul><li>islame</li><li>islame</li><li>islame</li><li>islame</li><li>islame</li><li>islame</li><li>islame</li></ul></div>
<div class ="sidebottom"></div>
</div></div>
</body></html>
<html>
وهذا هو ملف css كاملا
body {
width : 1000 px;
margin : 0;
padding : 0;
background-color : gggggg;
height : 1000px;
}
#header {
margin : 0px 85px 0px 85px;
width : 830px;
height : 240px;
background-image : url('images/header.jpg');
color : bbbbbb;
}
.bhead {
float : left;
width : 830px;
margin-top : 240px;
height : 33px;
}
.b1 {
float : left;
width : 62px;
height : 33px;
background-image : url('images/b1.gif') ;
background-repeat : no-repeat;
}
.b2 {
float : left;
height : 33px;
background-repeat : no-repeat;
}
.b3 {
float : left;
height : 33px;
width : 44px;
background-image : url('images/b3.gif') ;
background-repeat : no-repeat;
}
.b4 {
float : left;
background-repeat : no-repeat;
}
.b5 {
float : left;
height : 33px;
width : 44px;
background-image : url('images/b5.gif') ;
background-repeat : no-repeat;
}
.b6 {
float : left;
background-repeat : no-repeat;
}
.b7 {
float : left;
height : 33px;
width : 41px;
background-image : url('images/b5.gif') ;
background-repeat : no-repeat;
}
.b8 {
float : left;
background-repeat : no-repeat;
}
.b9 {
float : left;
height : 33px;
width : 39px;
background-image : url('images/b9.gif') ;
background-repeat : no-repeat;
}
.b10 {
float : left;
height : 33px;
width : 38px;
background-image : url('images/b10.gif') ;
background-repeat : no-repeat;
}
.b11 {
float : left;
background-repeat : no-repeat;
}
.b12 {
float : left;
height : 33px;
width : 38px;
background-image : url('images/b12.gif') ;
background-repeat : no-repeat;
}
/* le contenu kaybda man hna */
#b13{
margin : 0px 85px 0px 85px;
float:left;
height : 34px;
width : 830px;
background-image : url('images/b13.gif') ;
background-repeat : no-repeat;
}
/* post title : le titre de l'article*/
#spacerbg {
float : left;
width : 830px;
margin : 0;
background : url('images/spacerbg.gif');
background-repeat : repeat-y;
}
#spacerbg .content{
float : left;
margin-left : 85px;
margin-top : 0px;
width : 638px;
height: 500px;
background-color : bbbbbb;
}
#spacerbg .content .title{
float : left;
height : 47px;
width : 638px;
background-image : url('images/ptitle.gif') ;
background-repeat : no-repeat;
}
#spacerbg .content .post{
float : left;
width : 638px;
height : 631px;
background-image : url('images/postbg.gif') ;
background-repeat : repeat-y;
color : eeeeee;
background-repeat : repeat-y;
}
/* le menu sidebar */
#spacerbg .sidebar{
padding : 0;
float : left;
margin-right : 92px;
float:right;
width : 192px ;
height : 550px ;
}
#spacerbg .sidebar .sidebar1{
float : left;
width : 192px;
height : 47px;
background-image : url('images/sidebar1.gif') ;
}
#spacerbg .sidebar .sidebar2{
float : left;
width : 192px;
height : 47px;
background-image : url('images/sidebar2.gif') ;
}
#spacerbg .sidebar .sidebarlink{
margin : 0;
float : left;
width : 192px;
background : url("images/sidebarlink.gif") ;
background-repeat : repeat-y;
}
#spacerbg .sidebar .sidebottom{
float : left;
width : 192px;
height : 80px;
background : url("images/sidebottom.gif") ;
background-repeat : repeat-y;
}