...

View Full Version : Div Positioning trouble



MadMad
04-28-2011, 09:24 PM
Hi guys, I'm stuck on correctly positioning my divs so that they layer. Basically, the the background image is a gradient, and the "bokeh" needs to lay right on top of it. It works fine until I have the logo and the nav where it needs to be, then everything including the "bokeh" gets pushed down a bit. Any suggestions?



<div id="bokeh"> </div>
<div id="navbar"> </div>

<div class="container_12">

<div id="logotop"> <a href="index.html"> <img src="images/logotag.png" alt="Individually Wrapped Gourmet"/> </a> </div>

<div id="topnav">
<ul>
<li> <a href="services.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('services','','images/servicesrollover.png',1)"><img src="images/services.png" alt="See What We Do" name="services" width="143" height="80" border="0" id="services" /></a> </li>
<li> <a href="gallery.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('gallery','','images/galleryrollover.png',1)"><img src="images/gallery.png" alt="See Our Events" name="gallery" width="143" height="80" border="0" id="gallery" /></a> </li>
<li> <a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/contactrollover.png',1)"><img src="images/contact.png" alt="Get In Touch" name="contact" width="143" height="80" border="0" id="contact" /></a> </li>
</ul>
</div>

</div>

<div class="container_12">

<div id="slider">
<a href="index.html"><img src="pics/sliderpic3.jpg" width="940" height="360" alt="Individually Wrapped Gourmet"/></a>
<a href="index.html"><img src="pics/sliderpic2.jpg" width="940" height="360" alt="Individually Wrapped Gourmet"/></a>
</div>

<div id="slidershadow">
</div>

</div>


<div id="whitebg">
<div class="container_12">

<div class="grid_4">
<img src="images/themedevents.png" alt="Themed Events"/>
<h2>Our themed events are one of a kind. We scope out locations, and help <br /> bring your visions to creation.</h2>
</div>

<div class="grid_4">
<img src="images/catering.png" alt="Catering"/>
<h2>Menu planning can be a daunting<br />task. Our experience in catering coordination will put you at ease.</h2>
</div>

<div class="grid_4">
<img src="images/entertainment.png" alt="Entertainment"/>
<h2>We work with a network of industry professionals. Our contacts are now your contacts.</h2>
</div>

</div>
</div>


CSS part:



body {
background-image: url(..//images/mainbg.png);
background-position: top;
background-repeat: repeat-x;
background-color: #b20202;
font: 13px/1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
height: 3000px;
}

#bokeh {
background-image:url(../images/bokeh.png);
background-repeat:no-repeat;
background-position: top;
height:267px;
width:1132px;
margin:0 auto;
position: absolute;
z-index: 10;
}

#logotop {
background-image:none;
width:462px;
height:209px;
position: absolute;
z-index: 40;
}

#navbar {
background-color: #0d0000;
width:100%;
height: 80px;
position: absolute;
margin-top: 66px;
z-index: 20;
}

#topnav {
margin-left: 400px;
z-index: 30;
position: absolute;
margin-top: 66px;
}

#topnav li {
list-style-type:none;
display:inline;

}

#topnav li a {
text-decoration:none;
}

#whitebg {
width: 100%;
background-color: #FFF;
min-height: 500px;
margin: 0 auto;
}


Any help would be much appreciated!!

Aurora.Light
04-29-2011, 04:34 AM
not a lot of information.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum