0

私は 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;
}
4

3 に答える 3

1

問題を解決するには、 に追加するだけoverflow: autoです#wrapper。

#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-27T12:01:00.257 に答える
0

基本的にセクション #year の css-property 'float' が悪者です。

セクションを div に置き換え、余分な div を追加してブロック レンダリングをクリアすると、動作します: http://jsfiddle.net/hoedinie/537sL/1/

于 2012-04-27T12:04:21.517 に答える
0

IEで問題が発生していると思いますか？doctype 宣言がありません。以下の W3Schools の例に従って移行用の Doctype を追加すると、機能するはずです。

HTML doctype 宣言

于 2012-04-27T11:52:23.717 に答える