标头/内容对齐/位置

Question

我正在尝试创建一个标题固定在顶部但始终居中的网站（除非屏幕太小，我希望它坐在左侧并在右侧裁剪），然后我希望内容向上滚动在标题下方，以便标题保持原样，但是您可以滚动浏览页面底部。 这是我现在拥有的代码：

<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;
 }

现在，内容在标题下方滚动，但是标题固定在左侧！

Answer 1

老实说，您的代码有些混乱。 因为您的div位于未设置宽度的容器内，所以出现了您的问题。 在主体上设置宽度和边距或将代码放入具有宽度和边距的容器中将解决您的问题。

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

现在其他问题。

我不知道为什么您在第一个div上将top设置为负值，但是却使您的内容不在页面顶部。
您在第二个div上的最高设置是200，这将不起作用，它的px必须为200px。
盒子阴影只有4种设置，而您只有5种。
您使用的表格不应该使用表格。

看到这个小提琴： http : //jsfiddle.net/calder12/r43me/2/

标头/内容对齐/位置

问题描述

1 个解决方案

解决方案1
1 2012-10-21 05:43:27

标头/内容对齐/位置

问题描述

1 个解决方案

解决方案1 1 2012-10-21 05:43:27

解决方案1
1 2012-10-21 05:43:27