1

ヘッダーをページ全体に表示しようとしています。ページの投稿にまたがる CSS Full Page Width Header と Header in CSS を読み、CSS の Header の一部を試しました... width: 1004px; を使用して。うまくいきませんでした。幅100％も試しました。私は午後ずっと読んでいて、何をすべきかわかりません。不要なコードを送信していないことを願っています。ありがとうございました

<html>
<head>    
    <title>some text</title>

    <link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="container">

        <div id="header">
            <img class="logo" src="file:///Users/janedoe/CGT136as/week07hw/website/images/lily-pads.jpg" alt="Admin Extraordinaire"  />           
        </div><!--/#header-->

    <div id="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Our Services</a></li>
            <li><a href="#">Read Our Blog</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div><!--/#nav--> 
   </div><!--/#container-->

</body>
</html>

/* 本体とコンテナ ----------------------------------*/

body { 
    font-size: 76%;
    background-repeat: repeat-x;
    padding: 0px;
    margin: 0px;
}

#container { 
    overflow: hidden;
    width: 900px;
    margin: 0 auto 0 auto;
}



 /* HEADER AREA
    ---------------------------------*/
    #header {
        float: left;
        width: 100%;
        height: 150px;
        padding: 0px;
        margin: 0px;
        background-color: #baaf07;
    }
4

4 に答える 4

1

あなたdiv#containerの幅は固定されています。次のように変更してみてください100%。

#container { 
    overflow: hidden;
    width: 100%;
    margin: 0 auto 0 auto;
}

http://jsfiddle.net/wmhAd/

于 2013-10-17T22:14:48.883 に答える
0

コンテナ内にヘッダーがあり、width: 900px;

#container { 
  overflow: hidden;
  width: 900px;
  margin: 0 auto 0 auto;
}

その div の外にヘッダーを配置する必要があり、100% になります。

とposition: absolute;で与えることもできます。left: 0;top: 0;

于 2013-10-17T22:14:49.100 に答える
0

フローティング コンテナーに 100% の幅を割り当てようとしています。それはうまくいきません。から削除float: leftし#headerます。

于 2013-10-17T22:15:12.440 に答える
0

コンテナーには (900px) の制限があります。ヘッダーはコンテナー内にあるため、それもそれに限定されます。ヘッダーに追加position: absoluteすることで、コンテナの制限を無視します。left: 0次に、ヘッダーがページの左側から始まるように追加する必要があります。

例

#header {
    position: absolute;
    left: 0;
    width: 100%;
    height: 150px;
    padding: 0px;
    margin: 0px;
    background-color: #baaf07;
}
于 2013-10-17T22:16:26.673 に答える