頁面佈局問題/設計問題

Question

我有一個網頁我想

• 在屏幕的上邊框菜單欄，整個寬度顯示：
• 圖像對準的中間頁面並沿着屏幕左邊框，
• 屏幕右側邊框中的一個div框（中間對齊文本）和另一個圖像（與第一個尺寸相同） - 這稱爲mainBlock
• 沿着屏幕底部邊緣的中心標誌的白色條紋。

如何設置的div和位置，使這個工程？如果我使用絕對定位，那麼頁面調整大小時就會搞砸了。我現在所擁有的代碼是

<div style="position:absolute;top:0px;left:0px;width:100%;height:45px;background-color:black;color:white;text-align:center;vertical-align:middle;display:block;line-height:45px;"> 
    <font size="+2">About | Sign Up | Sign In</font> 
</div> 

<div style="position:absolute;top:80px;left:10px;width:4em;opacity:0.8;filter:alpha(opacity=80);background-color:white"> 
    <img src="img/bk.png" id="bkArrow"> 
</div> 

<div id="mainBlock" style="position:absolute;top:80px;left:35px;opacity:0.8;filter:alpha(opacity=80);background-color:white;border-style:solid;border-width:2px;border-radius:4px;vertical-align:middle;border-color:green;"> 
    Main area for my content 
</div> 

<div style="position:absolute;top:80px;right:10px;width:4em;opacity:0.8;filter:alpha(opacity=80);background-color:white" > 
    <img src="img/fw.png" id="fwArrow"> 
</div> 

<div style="position:absolute;left:0px;bottom:0px;background-color:white;width:100%;" align=center> 
    <img src="img/logo.png"> 
</div> 

Answer 1

ofcourse你的問題不是很清楚，但是從我的結論，你必須使用一個包裝綁定的所有這些DIV，您可以嘗試以下（調整窗口大小，以及）：

<div id="wrapper" style="width:100%; height:100%;" > 
<div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 15%; 
background-color: black; color: white; text-align: center; vertical-align: middle; display: block; line-height: 45px;"> 
<font size="+2">About | Sign Up | Sign In</font> 
</div> 

<div style="position: absolute; top: 15%; left: 0px; width: 10%; opacity: 0.8; filter: alpha(opacity=80); background-color: #FFFFFF; height: 75%;"> 
<img src="img/bk.png" id="bkArrow"> 
</div> 

<div id="mainBlock" style="position:absolute;top:15%;left:10%; height:75%; width:80%;opacity:0.8;filter:alpha(opacity=80);background-color:white;border-style:inset;border-width:2px;border-radius:4px;vertical-align:middle;border-color:green;"> 
Main area for my content</div> 
<div style="position: absolute; top: 15%; right: 0px; width: 10%; opacity: 0.8; filter: alpha(opacity=80); background-color: #FFFFFF; height: 75%;" > 
<img src="img/fw.png" id="fwArrow"></div> 

<div id="footer" style="position: absolute; left: 0px; bottom: 0px; background-color: white; width: 100%; height: 10%;" align=center> 
<img src="img/logo.png"></div> 
</div>