标头/内容对齐/位置

Question

I am trying to create a website with a header that is fixed at top but always centered (unless the screen is too small I want it to sit on the left side and crop at the right), and then I want my content to scroll up underneath the header so that the header stays as is, but you can scroll through the bottom of the page. 我正在尝试创建一个标题固定在顶部但始终居中的网站（除非屏幕太小，我希望它坐在左侧并在右侧裁剪），然后我希望内容向上滚动在标题下方，以便标题保持原样，但是您可以滚动浏览页面底部。 Here is the code I have now: 这是我现在拥有的代码：

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

and the css: 和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;
 }

Right now, I have the content scrolling underneath the header, but the header is fixed to the left! 现在，内容在标题下方滚动，但是标题固定在左侧！

Answer 1

Honestly your code is a bit of a mess. 老实说，您的代码有些混乱。 Your problem is arising because your div is inside a container with no width set. 因为您的div位于未设置宽度的容器内，所以出现了您的问题。 Setting a width and margin on the body or putting your code inside a container with a width and margin will fix your issue. 在主体上设置宽度和边距或将代码放入具有宽度和边距的容器中将解决您的问题。

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

Now the other issues. 现在其他问题。

I have no idea why you have top set to a negative value on the first div but it's knocking your content off the top of the page. 我不知道为什么您在第一个div上将top设置为负值，但是却使您的内容不在页面顶部。
Your top setting on the second div is 200 which won't work it has to have the px so 200px. 您在第二个div上的最高设置是200，这将不起作用，它的px必须为200px。
Box shadows only have 4 settings you have 5. 盒子阴影只有4种设置，而您只有5种。
You're using tables where you shouldn't be using tables. 您使用的表格不应该使用表格。

See this fiddle: http://jsfiddle.net/calder12/r43me/2/ 看到这个小提琴： 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