0

ヘッダーが上部に固定されているが常に中央に配置された Web サイトを作成しようとしています (画面が小さすぎない限り、左側に配置して右側をトリミングしたい場合を除きます)。次に、コンテンツを上にスクロールします。ヘッダーの下にあるので、ヘッダーはそのまま残りますが、ページの下部をスクロールできます。ここに私が今持っているコードがあります:

<body>
<div id="header_img">
<span class="class1">
<a href="index.html"><h2>HEATHER</h2></a></span>
<p class="style5">
419.953.5098<br>
<span class="class2">
<a href ="mailto:obringhm@mail.uc.edu">obringhm@mail.uc.edu</a></span></p>

<table>
<tr>
<td><a href="b5_photo_portrait.html">portraits</a></td>
<td><a href="b5_photo_object.html">objects</a></td>
<td>records
</td>
</tr>
</table>  
</div>

<div id="header_img2" style="scroll:auto">
<img class="project14"src="images/image17.jpg">
<img class="project15" src="images/image16.jpg">
<img class="project16" src="images/image20.jpg">
<h3>Portrait Series</h3>
<p>This project is an exploration of composition within a photograph and
the studying of correct value tones in a picture.
<br><br>
Completed: December 2011<br>
Tools: Film Photography
<br></p>
</div>
</body>

そしてCSS：

#header_img {
 height: 180px;
 background: #E2E2E2;
 width: 998px;
 position: fixed;
 top: -25px;
 margin: 0 auto;
 z-index: 11;
 box-shadow: 0 6px 10px -10px #888;
 } 
 #header_img2 {
 height: 800px;
 background: E2E2E2; 
 width: 998px;
 position: relative;
 top: 200;
 z-index: 10;
 }

現在、コンテンツはヘッダーの下にスクロールしていますが、ヘッダーは左に固定されています!

4

1 に答える 1

1

正直なところ、あなたのコードは少し混乱しています。div が幅が設定されていないコンテナ内にあるため、問題が発生しています。本文に幅とマージンを設定するか、幅とマージンのあるコンテナー内にコードを配置すると、問題が解決します。

body{width:960px; margin:0 auto;}

今他の問題。

  1. 最初の div で top を負の値に設定した理由はわかりませんが、コンテンツがページの上部から外れています。
  2. 2 番目の div の一番上の設定は 200 です。これは機能しません。px を 200px にする必要があります。
  3. ボックス シャドウには 4 つの設定しかありません。
  4. テーブルを使用してはならない場所でテーブルを使用しています。

このフィドルを参照してください: http://jsfiddle.net/calder12/r43me/2/

于 2012-10-21T05:43:27.027 に答える