The placement of the banner is exactly where I want it to be, however, the boxes using jQuery masonry are overlapping it. I'm not sure what I did wrong here. Any suggestions or insights on how to fix this issue?
Example HTML Code:
<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>
Corresponding 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;
}
I'm open to suggestions as I'm able to move the banner to the bottom by changing the code, but my preference is to keep it at the top. Any insights on what might be causing this issue?