1

ヘッダーが固定されている基本的な HTML5 レスポンシブ Web デザインを作成しようとしています。HTML と CSS のコードをクリーンに保ち、ベスト プラクティスに従うようにしています。ヘッダーの最大幅は 980 ピクセルですが、青いヘッダーの背景が拡大されてウィンドウがいっぱいになります (図を参照)。

現在、CSS (おそらく HTML) にいくつかの問題があり、ヘッダーがヘッダーの下のコンテンツを覆い隠しています。ヘッダーの青い背景も、ウィンドウの左側を埋めるために拡大されていません。また、ロゴ画像をヘッダーの垂直方向の中央に配置することもできません。私は何が欠けていますか？私はこれを一晩中いじっていましたが、これらの問題を解決することができませんでした.

ここに画像の説明を入力

フィドル: http://jsfiddle.net/DU3D6/

CSS

    * { margin: 0; padding: 0; }

p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.2em;}

#wrapper {
    width: 100%;    
    max-width: 980px;
    margin: auto;
} 

header {
    background-color: blue;
    width: 100%;
    height: 100px;
    top: 0px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: fixed;
}

#logo {
    height: 70px;
    width: 160px;
    float: left;
    display: block;
    background: url(logo.png) 0 0 no-repeat;
    text-indent: -9999px;
}

HTML

<div id="wrapper">
<header>
<a href="#" id="logo">Logo</a>
</header>
<section id="main">
<h1>Main section</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</div>

タグを削除し、更新して再投稿しました。

4

1 に答える 1

2

ヘッダーからmargin-leftandを削除できます。margin-right次に、左ゼロを追加します。相対リンクであるため、JSFiddle は画像を表示しませんが、980 ピクセルの中央ブロック内で左揃えにしたい場合は、幅 980 で中央に配置された別の div をヘッダー内にネストします。

次に、最初にヘッダーがコンテンツを覆わないようにするには、110px のように、ヘッダーよりも大きな上余白を追加します。

http://jsfiddle.net/A4atq/

* { margin: 0; padding: 0; }

p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.2em;}

#wrapper {
    width: 100%;    
    max-width: 980px;
    margin: auto;
} 

header {
    background-color: blue;
    width: 100%;
    height: 100px;
    top: 0px;
    left: 0;
    display: block;
    position: fixed;
}

#logo {
    height: 70px;
    width: 160px;
    float: left;
    display: block;
    background: url(logo.png) 0 0 no-repeat;
    /* text-indent: -9999px */;
}

section#main {
    margin-top: 110px;
}
}
于 2013-09-13T03:20:54.357 に答える