Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jan 2011
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Div Positioning trouble

    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?

    Code:
    <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:

    Code:
    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!!

  • #2
    Registered User
    Join Date
    Feb 2011
    Posts
    82
    Thanks
    15
    Thanked 3 Times in 3 Posts
    not a lot of information.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •