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 태그 뒤에 빈 div를 만들려고했는데 clear: both을 사용했지만 작동하지 않았습니다.
[jsfiddle] (http://jsfiddle.net/hUGBz/1/)에서'clear : both '를 시도해 보니 content div 아래 모든 내용이 삭제되었습니다. 또한 '동영상'의 닫는 div가 제대로 닫히지 않았습니다. '/'가 없습니다. – john