HTML總體佈局問題

Question

旗幟就是在那裏我希望它是，雖然這是使用jQuery砌體的箱子是重疊的，有我錯在這裏做了什麼？......

HTML

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="masonry.js"></script> 
<script> 
$(function() { 
     $('#container').masonry({ 
      columnWidth: 1, 
      itemSelector: 'div' 
     }); 
}); 
</script> 

<div id="banner"> 
    <img src="images/banner.png"/> 
</div> 

<div id="logo"> 
</div> 

<div id="imagetrans"> 
<div id="container" class="clearfix masonry"> 

<div class="box1"> 
    <img class="bottom" src="images/eventbox2.png"/> 
    <img class="top" src="images/eventbox.png"/> 
</img></div> 

<div class="box2"> 
    <img class="bottom" src="images/forumbox2.png"/> 
    <img class="top" src="images/forumbox.png"/> 
</img></div>  

<div class="box1"> 
    <img class="bottom" src="images/eventbox2.png"/> 
    <img class="top" src="images/eventbox.png"/> 
</img></div> 

<div class="box1"> 
    <img class="bottom" src="images/eventbox2.png"/> 
    <img class="top" src="images/eventbox.png"/> 
</img></div> 

<div class="box3"> 
    <img class="bottom" src="images/top10box2.png"/> 
    <img class="top" src="images/top10box.png"/> 
</img></div> 

<div class="box1"> 
    <img class="bottom" src="images/eventbox2.png"/> 
    <img class="top" src="images/eventbox.png"/> 
</img></div> 
</div> 
</div> 
</div> 

和css

body { 
    width:900px; 
    height:100%; 
    margin:0 auto; 
    background-image: url(images/gridbg.png); 
} 

#banner { 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 0px; 
} 

#container > div { 
    margin: 5px; 
} 
.box1 { 
    width:350px; 
    height:250px; 
} 

.box2 { 
    width:150px; 
    height:150px; 
} 

.box3 { 
    width:150px; 
    height:350px; 
} 

#imagetrans { 
    position:relative; 
    margin:0 auto; 
} 

#imagetrans img.top:hover, 
#container > div img.top:hover { 
    opacity:0; 
} 

#imagetrans img, 
#container > div img { 
    position:absolute; 
    -webkit-transition: opacity 0.3s ease-in-out; 
    -moz-transition: opacity 0.3s ease-in-out; 
    -o-transition: opacity 0.3s ease-in-out; 
    transition: opacity 0.3s ease-in-out; 
} 

任何想法？因爲我可以很容易地通過改變編碼從底部到底部的橫幅，雖然我更喜歡它，如果我可以在屏幕的頂部，不太確定什麼是錯的...

Answer 1

嘗試改變：

#banner { 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 0px; 
} 

要：

#banner { 
    height: 100px; // whatever your banner height is. 
} 

或者：

#banner { 
    position: fixed; 
    left: 0; 
    right: 0; 
    top: 0px; 
} 

如果您執行位置固定的方法，則需要添加某種頂部邊距或間隔符，以便將頁面內容向下按您的標題的高度向下移動。