2012-10-21 41 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/