コンテナ/ラッパーの背景がすべてのコンテンツの背後に広がっていないのはなぜですか？

私のコンテナ/ラッパーのポートフォリオはuniのポートフォリオで作業しています。私は下のコードを投稿します、どんな助けも高く評価されます。コンテナ/ラッパーの背景がすべてのコンテンツの背後に広がっていないのはなぜですか？

HTML

<body> 

    <section id="wrapper"> 

     <header> 
      <hgroup class="title"> 
       <h1>Matt Murphy</h1> 
       <p>Personal Portfolio | University of Leeds | BA New Media</p> 
      </hgroup> 
     </header> 

      <nav> 
       <a href="home.html" class="parent">Home</a> 
       <a href="about.html" class="parent">About Matt</a>  
      </nav> 

      <section id="modules"> 
       <h2>Modules Studies To Date</h2> 
        <section id="year_1"> 
         <h3>Year 1</h3> 
         <p>History of Communications</p> 
         <p>Academic Skills and Contemporary Issues</p> 
         <p>Interface Design</p> 
         <p>Design For New Media</p> 
         <p>Basic Camera and Editing</p> 
         <p>Animation For New Media</p> 
        </section> 

        <section id="year_2"> 
        <h3>Year 2</h3> 
         <p>Dynamic Web Programming</p> 
         <p>Communications Research Methods</p> 
         <p>Working in New Media/p> 
         <p>Media Policy</p> 
         <p>New Media Narrative and Gaming</p> 
         <p>Visual Communications</p> 
        </section>  
      </section> 

    </section> 
</body>

CSS

body{ 
    color:#000; 
    background-image: url(images/canvas.png); 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
} 

a:link { 
    text-decoration:none; 
    color:#000; 
}  
a:visited { 
    text-decoration:none; 
    color:#000; 
} 
a:hover { 
    text-decoration:none; 
    color:#000; 
} 
a:active { 
    text-decoration:none; 
    color:#000; 
} 

#wrapper { 
    background-color:#FFF; 
    padding:3%; 
    -webkit-border-radius: 25px; 
    -moz-border-radius: 25px; 
    border-radius: 25px; 
    display:block; 
    margin:auto; 
    width:60%; 
    margin-top:2%; 
} 

header { 
    text-align:right; 
} 

#modules { 
    width:100%; 
    display:block; 
    margin:auto; 
} 

#year_1 { 
    float:left; 
} 

#year_2 { 
    float:left; 
}

出典

2012-04-27 Matt Murphy

はあなたの問題を解決するにはあなただけ#wrapperにoverflow: autoを追加する必要があります。

#wrapper { 
    background-color:#FFF; 
    padding:3%; 
    -webkit-border-radius: 25px; 
    -moz-border-radius: 25px; 
    border-radius: 25px; 
    display:block; 
    margin:auto; 
    width:60%; 
    margin-top:2%; 
    overflow: auto; /* add this line */ 
}

しかし、別の問題は、あなたがHTML5要素とHTML5のSHIVを使用しているが、あなたはHTML5のDOCTYPEを使用していないということです。

<!DOCTYPE html>

出典

2012-04-27 12:01:00 tw16

ソート済み！ありがとうございました –

私はあなたがIEで問題が発生していると仮定？ doctype宣言がありません。下のW3Schoolsの例にあるように、移行型のdoctypeを追加すると、それが機能するはずです。

HTML doctype declaration

出典

2012-04-27 11:52:23

私はDOCTYPE宣言を持っている、私はちょうどdidntのこのサイト上にあまりにも多くのコードをコピーしたいです。あなたがdoctypeの宣言が完了していない場合は、 –

<！DOCTYPE html PUBLIC " - // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" –

ええと、残念なことに、どちらでも動作するようです。 –

部＃で基本的にCSS-プロパティ「フロート」年はここの悪い男です。

私はのdivのを使用してセクションを交換し、それが動作レンダリングブロックをクリアするために、余分なdiv要素を追加した場合： http://jsfiddle.net/hoedinie/537sL/1/

出典

2012-04-27 12:04:21 amaters

コンテナ/ラッパーの背景がすべてのコンテンツの背後に広がっていないのはなぜですか？

答えて

関連する問題