2012-10-21 113 views
0

我试图创建一个头部固定在顶部但始终居中的网站(除非屏幕太小,我希望它坐在左边并裁剪在右边),然后我希望我的内容在标题下向上滚动,以便标题保持不变,但您可以滚动浏览页面底部。下面是代码我现在有:标题/内容对齐/定位

<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:[email protected]">[email protected]</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; 
} 

现在,我有内容滚动的标题下,但头部被固定在左边!

+2

如何创建的jsfiddle所以我们可以玩它? – manishie

回答

1

老实说你的代码有点乱。由于您的div位于未设置宽度的容器内,因此您的问题出现了。在主体上设置宽度和边距,或者将代码放入具有宽度和边距的容器中可以解决您的问题。

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

现在还有其他问题。

  1. 我不知道为什么你有顶部设置为第一个div的负值,但它是敲你的内容离开页面的顶部。
  2. 你在第二个div上的设置是200,这将无法正常工作,因此px必须为200px。
  3. 箱子阴影只有4个设置,你有5个。
  4. 你正在使用表,你不应该使用表。

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