2012-09-12 25 views
3

我試圖讓我的主頁設計完成,但是我在獲取內容div的背景顏色時出現了一些問題,無法通過div。動態高度與絕對位置無關

<div id="container"> 
    <div id="content"> 
     <div id="headerInfo"> 
      <div class="leftLocation"> 
       <p>golden, co</p> 
      </div> 
      <div class="rightInfo"> 
       <span class="text"> 
        <a href="about.php">about us</a> 
        <a href="contact.php">contact</a> 
        <span class="phone">XXX-XXX-XXXX</span> 
       </span> 
      </div> 
      <div class="rightPic"> 
       <img src="images/facebook.png" alt="facebook" title="facebook" /> 
       <img src="images/yelp.png" alt="yelp" title="yelp" /> 
      </div> 
      <div class="clear"></div> 
     </div> 
     <div id="homeHead"> 
      <img class="logo" src="images/logo.png" alt="logo" /> 
      <img class="paintSplash" src="images/paintSplash.png" alt="paint" /> 
      <span id="nav"> 
       <a href="classes">classes</a> 
       <a href="classes">calendar</a> 
       <a href="classes">gallery</a> 
       <a href="classes">FAQ</a> 
       <a href="classes">private events</a> 
       <a href="classes">large-scale</a> 
      </span> 
      <span id="word"> 
       ...Paint 
      </span> 
       <img src="images/homeSlide1.png" class="pic1" alt="pic1"/> 
       <img src="images/homeSlide4.png" class="pic1" alt="pic2"/> 
       <img src="images/homeSlide7.png" class="pic1" alt="pic3"/> 

       <img src="images/homeSlide2.png" class="pic2" alt="pic4"/> 
       <img src="images/homeSlide5.png" class="pic2" alt="pic5"/> 
       <img src="images/homeSlide8.png" class="pic2" alt="pic6"/> 

       <img src="images/homeSlide3.png" class="pic3" alt="pic7"/> 
       <img src="images/homeSlide6.png" class="pic3" alt="pic8"/> 
       <img src="images/homeSlide9.png" class="pic3" alt="pic9"/> 
      <div id="step1"> 
       <span class="easy">Easy as</span> 
       <span class="part">Sign Up</span> 
       <span class="num">1.</span> 
       <p style="padding-bottom:5px;">Pick your favorite class and <a href="#">REGISTER ONLINE</a>.</p> 
       <p class="bottom"><a href="#">Classes</a> Starting at only $25!</p> 
      </div> 
      <div id="step2"> 
       <span class="part">Show Up</span> 
       <span class="num">2.</span> 
       <p style="padding-bottom:5px;">We supply everything! Check out the <a href="#">FAQ</a>.</p> 
       <p class="bottom">Limited Seating, <a href="#">Register Now!</a></p> 
      </div> 
      <div id="step3"> 
       <span class="part2">Enjoy!</span> 
       <span class="num2">3.</span> 
       <img class="wine" src="images/wine.png" alt="wine" /> 
       <p style="padding-bottom:10px;">Sip your drink, paint, play &amp; have fun.</p> 
       <p class="bottom">See our <a href="#">Gallery</a> for results!</p> 
      </div> 
     </div><!--End Header Info --> 
     <div id="bodyInfo"> 
      <div id="left"> 
       <p> 
        <span class="bloodHeader">Welcome</span> to Art on the Brix where anyone can unleash their inner artist amidst friends, family and co-workers. Quickly <a href="#">Sign-Up</a> for a class or take your time to enjoy our website! 
       </p> 
       <p id="midLeft"> 
        <span class="blueHeader">NO TALENT OR EXPERIENCE IS NECESSARY!</span>Colorful Variety of Themed Classes &#8226; Open Studio Times &#8226; Private Parties &#8226; Corporate Team-Builds &#8226; Charity Events 
       </p> 
       <p> 
        Our casual yet upscale studio is in the heaert of historic Golden, Colorado. Enjoy painting, crafts, wine or beer, music and fun surprises in our low-stress art classes. Our local artists guie all of the <a href="#">CLASSES</a> with easy-to-folow, step-by-step instruction on how to create the featured piece. The experience is playful and light-hearted encouraging you to just follow along or release inhibitions and go outside your lines. Create, taste and play! 
       </p> 
      </div> 
      <div id="right"> 
      </div> 
     </div><!-- End bodyInfo --> 
    </div> 
</div> 

CSS:

#container{ 
width:100%; 
height:100%; 
} 
#content{ 
width:900px; 
height:100%; 
margin:0px auto; 
background-color:#FFF; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; /* future proofing */ 
-khtml-border-radius: 10px; /* for old Konqueror browsers */ 
} 
/*Header Info*/ 
#headerInfo{ 
position: relative; 
} 
.leftLocation{ 
float:left; 
font-family: HelveticaNeueStd; 
font-size:14px; 
color:#4d2c0d; 
height:30px; 
margin-top:10px; 
} 
.leftLocation p{ 
padding-right:5px; 
} 
.rightInfo{ 
position: relative; 
float:right; 
width:360px; 
} 
.rightInfo a{ 
color:#3397bf; 
text-decoration: none; 
font-size:14px; 
font-family: HelveticaNeueStd; 
padding-right:10px; 
} 
.rightInfo a:hover{ 
color:#e11b6b; 
} 
span.text{ 
position:absolute; 
top:-7px; 
} 
span.phone{ 
font-family: Lavanderia; 
font-size:30px; 
color:#4d2c0d; 
} 
.rightPic{ 
position: absolute; 
right:0px; 
} 
/*Home Head*/ 
#homeHead{ 
background-image:url('../images/homeHead.png'); 
width:900px; 
height:573px; 
position:relative; 
clear: both; 
} 
.logo{ 
position: absolute; 
top:-30px; 
left:10px; 
} 
.paintSplash{ 
position: absolute; 
left:350px; 
top:-35px; 
height:105px; 
} 
#nav{ 
position: absolute; 
left:245px; 
top:70px; 
} 
#nav a{ 
color:#FFF; 
font-size: 16px; 
font-family: HelveticaNeueStd; 
padding-right:10px; 
text-decoration: none; 
} 
#nav a:hover{ 
color:#e11b6b; 
} 
#word{ 
position: absolute; 
top:90px; 
left:235px; 
padding:10px; 
color:#3397bf; 
font-family: Lavanderia; 
font-size:35px; 
} 
#pic1{ 

} 
.pic1{ 
position:absolute; 
top:249px; 
left:160px; 
width:140px; 
height:174px; 
} 
#pic2{ 
transform: rotate(7deg); 
-ms-transform: rotate(7deg); /* IE 9 */ 
-webkit-transform: rotate(7deg); /* Safari and Chrome */ 
-o-transform: rotate(7deg); /* Opera */ 
-moz-transform: rotate(7deg); /* Firefox */ 
} 
.pic2{ 
position:absolute; 
top:263px; 
left:424px; 
width:102px; 
height:150px; 
transform: rotate(7deg); 
-ms-transform: rotate(7deg); /* IE 9 */ 
-webkit-transform: rotate(7deg); /* Safari and Chrome */ 
-o-transform: rotate(7deg); /* Opera */ 
-moz-transform: rotate(7deg); /* Firefox */ 
} 
#pic3{ 
transform: rotate(-13deg); 
-ms-transform: rotate(-13deg); /* IE 9 */ 
-webkit-transform: rotate(-13deg); /* Safari and Chrome */ 
-o-transform: rotate(-13deg); /* Opera */ 
-moz-transform: rotate(-13deg); /* Firefox */ 
} 
.pic3{ 
position:absolute; 
top:252px; 
left:641px; 
width:121px; 
height:173px; 
transform: rotate(-13deg); 
-ms-transform: rotate(-13deg); /* IE 9 */ 
-webkit-transform: rotate(-13deg); /* Safari and Chrome */ 
-o-transform: rotate(-13deg); /* Opera */ 
-moz-transform: rotate(-13deg); /* Firefox */ 
} 
#step1{ 
position:absolute; 
font-family: Helvetica; 
top:500px; 
left:100px; 
width:200px; 
height:60px; 
padding:15px; 
text-align: center; 
background-color:#f0deba; 
-webkit-box-shadow: 0 8px 6px -6px black; 
    -moz-box-shadow: 0 8px 6px -6px black; 
     box-shadow: 0 8px 6px -6px black; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; /* future proofing */ 
-khtml-border-radius: 10px; /* for old Konqueror browsers */ 
} 
#step1 a{ 
color:#e11b6b; 
} 
.bottom{ 
font-family: HelveticaNeueStd-Italic; 
color:#3397bf; 
} 
.bottom a{ 
color:#e11b6b; 
} 
.easy{ 
font-family: Helvetica; 
font-size:14px; 
position: absolute; 
color:#FFF; 
top:-25px; 
left:-30px; 
} 
.num{ 
font-family: HelveticaNeueStd; 
font-size:45px; 
color:#FFF; 
position: absolute; 
top:-45px; 
left:20px; 
} 
.part{ 
font-family: Lavanderia; 
color:#FFF; 
font-size:40px; 
position: absolute; 
top:-45px; 
left:60px; 
} 
.num2{ 
font-family: HelveticaNeueStd; 
font-size:45px; 
color:#FFF; 
position: absolute; 
top:-45px; 
left:60px; 
} 
.part2{ 
font-family: Lavanderia; 
color:#FFF; 
font-size:40px; 
position: absolute; 
top:-45px; 
left:100px; 
} 
#step2{ 
position:absolute; 
font-family: Helvetica; 
top:500px; 
left:345px; 
width:200px; 
height:60px; 
padding:15px; 
text-align: center; 
background-color:#f0deba; 
-webkit-box-shadow: 0 8px 6px -6px black; 
    -moz-box-shadow: 0 8px 6px -6px black; 
     box-shadow: 0 8px 6px -6px black; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; /* future proofing */ 
-khtml-border-radius: 10px; /* for old Konqueror browsers */ 
} 
#step2 a{ 
color:#e11b6b; 
} 
#step3{ 
position:absolute; 
font-family: Helvetica; 
top:500px; 
left:590px; 
width:200px; 
height:60px; 
padding:10px; 
padding-bottom:20px; 
padding-left:50px; 
text-align: center; 
background-color:#f0deba; 
-webkit-box-shadow: 0 8px 6px -6px black; 
    -moz-box-shadow: 0 8px 6px -6px black; 
     box-shadow: 0 8px 6px -6px black; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; /* future proofing */ 
-khtml-border-radius: 10px; /* for old Konqueror browsers */ 
} 
#step3 a{ 
color:#e11b6b; 
} 
.wine{ 
position:absolute; 
top:-30px; 
left:5px; 
} 
/*bodyInfo*/ 
#holder{ 
width:900px; 
height:573px; 
} 
#bodyInfo{ 
width:100%; 
} 
#left{ 
width:450px; 
float:left; 
} 
#right{ 
width:450px; 
float:left; 
} 

一切都包裹在容器和內容DIV,所以我想我的homeHead後添加內容的白色背景只會向下展開像往常一樣......不是這樣的它只是呆在那裏。 (看截圖)如果有人有一個想法解決這個問題,我將不勝感激!

Problem

回答

3

問題可能是相關"left""right"的div浮動bodyInfo股利。您需要包含style="clear: both;"作爲bodyInfo div中最後一個塊元素的另一個div。

使用花車更多的佈局參見本:CSS Design Patterns - Float and Clear

Here's上的jsfiddle你的情況一般實體模型。如果您使用style="clear: both"刪除div,則圍繞bodyInfo div的邊框不再環繞兩個浮動div。

<div id="bodyInfo"> 
    <div id="left"> 
     <p> 
      <span class="bloodHeader">Welcome</span> to Art on the Brix where anyone can unleash their inner artist amidst friends, family and co-workers. Quickly <a href="#">Sign-Up</a> for a class or take your time to enjoy our website! 
     </p> 
     <p id="midLeft"> 
      <span class="blueHeader">NO TALENT OR EXPERIENCE IS NECESSARY!</span>Colorful Variety of Themed Classes &#8226; Open Studio Times &#8226; Private Parties &#8226; Corporate Team-Builds &#8226; Charity Events 
     </p> 
     <p> 
      Our casual yet upscale studio is in the heaert of historic Golden, Colorado. Enjoy painting, crafts, wine or beer, music and fun surprises in our low-stress art classes. Our local artists guie all of the <a href="#">CLASSES</a> with easy-to-folow, step-by-step instruction on how to create the featured piece. The experience is playful and light-hearted encouraging you to just follow along or release inhibitions and go outside your lines. Create, taste and play! 
     </p> 
    </div> 
    <div id="right"></div> 
    <div sytle="clear: both;"></div> 
</div><!-- End bodyInfo --> 
+0

...我以爲我昨天試過這個。但是,休息一天休息幫助清除我的大腦,哈哈。清除div不會繼續白色背景,但嘿,只需在bodyInfo div中添加白色背景即可。 –

0

Absolutely positioned elements do not expand their parents as they grow。內容容器的位置應該是靜態的或相對的。

Here's some info for you on document flow;這是理解的重要概念。

+0

很高興知道,謝謝!但是,如果您需要「a」與您的情況一起成長爲「b」,那麼它的解決方案是什麼? –

+0

b的'position'應該是'static'(默認)或'relative'。 – tuff

+0

儘管我不能幫助我......我必須遵循的設計要求將很多事情放在絕對位置上。 –