1
我不明白,但是我之前做过,现在它不工作。我创建了一个基本的HTML和CSS文件,当客户决定在内容区域插入更多内容时,我需要增加一个内容区域,但它不起作用。内容区域与下面的其他元素重叠。有人可以帮忙,并解释为什么?在内容区域增长的同时向下推动其他元素
HTML:
<html>
<head>
<title>Welcome to Boulineau's Website</title>
<link href="style/style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="container">
<div id="sidebar">
<div id="sidelinks">
<a href="#"><img src="images/sidenav_03.png" alt="IGA" width="180" height="165" border="0" title="IGA Grocery Store" /></a>
<a href="#"><img src="images/sidelinks_05.png" alt="Ace" width="180" height="115" border="0" title="Ace Hardware" /></a>
<a href="#"><img src="images/sidelinks_06.png" alt="Eugene" width="180" height="100" border="0" title="Eugene Platt's Seafood" /></a>
<a href="#"><img src="images/sidelinks_07.png" alt="Barnacle" width="180" height="90" border="0" title="Barnacle Beach Shoppe" /></a>
<a href="#"><img src="images/sidelinks_08.png" alt="Hut" width="180" height="100" border="0" title="The Dairy Hut" /></a>
<a href="#"><img src="images/sidelinks_09.png" alt="Ocean" width="180" height="90" border="0" title="Ocean Treasures Resort Wear" /></a>
<a href="#"><img src="images/sidelinks_10.png" alt="Shell" width="180" height="85" border="0" title="Shell & Car Wash" /></a>
<a href="#"><img src="images/sidelinks_11.png" alt="Laundromat" width="180" height="85" border="0" title="Laundromat" /></a>
</div><!-- end of sidelinks -->
</div><!-- end of sidebar -->
<div id="weeklyspecials">
<a href="#"><img src="images/weeklyspecials_03.png" alt="Weekly Specials" width="269" height="58" border="0" title="Click for Weekly Specials" /></a>
</div><!-- end of weeklyspecials -->
<div id="mainimage">
<img src="images/mainimage_03.png" alt="Main Image" width="648" height="319" border="0" />
</div><!-- end of mainimage -->
<div id="navigationbar">
<a href="#"><img src="images/home.png" alt="Home Page" width="45" height="14" border="0" title="Home Page" /></a>
<a href="#"><img src="images/aboutus.png" alt="About Us" width="65" height="14" border="0" title="About Us" /></a>
<a href="#"><img src="images/cherrygrovebeach.png" alt="Cherry Grove Beach" width="120" height="14" border="0" title="Cherry Grove Beach" /></a>
<a href="#"><img src="images/specialevents.png" alt="Special Events" width="92" height="14" border="0" title="Special Events" /></a>
<a href="#"><img src="images/tidecharts.png" alt="Tide Charts" width="77" height="14" border="0" title="Tide Charts" /></a>
<a href="#"><img src="images/employment.png" alt="Employment" width="82" height="14" border="0" title="Employment" /></a>
<a href="#"><img src="images/printablecoupon.png" alt="Printable Coupons" width="98" height="14" border="0" title="Printable Coupons" /></a>
</div><!-- end of navigation -->
<div id="content">
<P>
<img src="images/lobster.png" alt="" width="329" height="229" border="0" title="" />
Content Area needs to grow...anything below gets push down.
</P>
</div><!-- end of content -->
// These div down delow must be push down by the content area when it grows.
<div id="video">
<img src="images/video_03.png" alt="Video" border="0" width="263" height="193" title="Video" />
<div><!-- end of video -->
<div id="weeklyadbox">
<img src="images/weeklyad.jpg" alt="Weekly Ad" border="0" width="178" height="147" title="Weekly Ad" />
</div><!-- end of weeklyadbox -->
</div><!-- end of container -->
</body>
</html>
CSS:
* {
padding: 0;
margin: 0;
}
body {
text-align: center;
background-image: url("../images/waterbg.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
position: center, top;
}
div#container {
background-image: url("../images/contentbg_02.jpg");
width: 900px;
background-repeat: no-repeat;
margin: 0 auto;
background-color: white;
margin: 0 auto;
border: 1px solid black;
position: relative;
z-index: 0;
height: auto;
}
div#sidebar {
float: left;
position: relative;
left: -40px;
top: 14px;
background-image: url("../images/sidebar_03.png");
background-repeat: no-repeat;
width: 314px;
border: 1px solid black;
height: 1161px;
z-index: 5;
}
div#sidelinks {
position: absolute;
left: 72px;
top: 275px;
cursor: pointer;
}
div#weeklyspecials {
float: right;
margin-top: 47px;
margin-right: 17px;
border: 1px solid black;
}
div#mainimage {
float: right;
position: absolute;
top: 90;
right: 13px;
z-index: 0;
background-attachment: fixed;
}
div#navigationbar {
background-image: url("../images/nav_03.png");
width: 620px;
height: 44px;
background-repeat: no-repeat;
float: right;
position: relative;
margin-top: -780px;
margin-right: 25px;
}
div#navigationbar img {
margin-top: 15px;
}
div#content {
background-image: url("../images/welcome2.png");
background-repeat: no-repeat;
width: 657px;
/*height: 368px;*/
z-index: 100;
float: right;
margin-top: -732px;
background-color: white;
border: 1px solid black;
}
div#content p {
float: left;
margin-top: 140px;
margin-left: 10px;
text-align: left;
line-height: 30px;
font-size: 12px;
font-family: georgia;
border: 1px black solid;
}
div#content p img {
float: right;
}
div#video {
margin-top: -258px;
margin-left: -90px;
padding-top: 10px;
top: 900px;
}
div#weeklyadbox {
float: right;
margin-top: -198px;
margin-right: 80px;
background-image: url("../images/weeklyadbox_04_03.jpg");
background-repeat: no-repeat;
width: 243px;
height: 284px;
padding-top: 120px;
position: relative;
}
如果你想知道,我用边框很多关于引用。无论如何,我尝试在id="content"
关闭div标签后创建一个名为spacer的空div,并使用clear: both
,但它不起作用。
我刚刚在[jsfiddle](http://jsfiddle.net/hUGBz/1/)中尝试了'clear:both'并将内容div下面的所有内容都删除了。另外,'video'的结尾格没有正确关闭。你错过了'/'。 – john 2012-01-01 05:05:46