页面布局问题/设计问题

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>