HTML Forum

**c6z06** · 06-07-2009, 12:10 PM

Hi everyone, I'm working on a web site with layers. The background banner is a layer and the menu buttons are also layers. I would like to get the layers to stay "in sync" or a stationary on the banner when the browser window resizes so that people viewing it on different resolutions can see it fine. I DON'T want the "home" button to keep moving around all over the place. When you resize the browser window, you will see what I mean. I've been trying to get this to work for a few hours and I did a lot of research. I'd really appreciate the help.

The site is up on http://ennovationssolutions.com/indextry11.htm

**LadynRed** · 06-07-2009, 12:45 PM

Quote:

I'm working on a web site with layers.

There are no "layers"!!!! That is a hold-over from ancient Netscape days and I wish dreamweaver would STOP calling them that.

To do what you want, you MUST dump the absolute positioning, it's not necessary and it WILL cause you headaches. Another nasty DW habit, making EVERYTHING position:absolute. Learn to use the normal document flow and floats and you'll be much better off.

Let me make this suggestion - no absolute positioning needed; no javascript for a menu rollover, and no images for navigation. The css really should go into an external file though.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>

<meta http-equiv="Content-Language" content="en-us">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>LP Photography</title>
    
<style type="text/css">
body{
    background: #666;
    font: 100.01% Verdana, Helvetica, Arial, sans-serif;
}

#wrapper{
    width: 77.5%;
    position: relative;
    margin: 0 auto;
}

#header{
    background: url(indextry11_files/pageBanner3n.gif) no-repeat;
    height: 200px;
    margin-top: 34px;
    border: 1px solid blue;
    }

    
#nav{
    width: 65px;
    height: 29px;
    margin: 75px 0 0 20px;
    color: #c1c1c1;
}

ul#menu{
    margin: 0;
    padding: 0;
    height: 29px;
    
}

#menu li{
    list-style: none;    
}

#menu li a{
    color: #c1c1c1;
    text-decoration: none;
    font-weight: bold;
}

#menu li a:hover{
    color: #fff;
}


img{
    border: none;
}

</style>

</head>

<body>
<div id="wrapper">


<div id="header">
    <div id="nav">
        <ul id="menu">
        <li> <a href="indextry11.htm">home</a></li>
    
        </ul>
    </div><!-- end nav -->
</div> <!-- end header -->
    
    <div id="content">
    
    
    </div> <!-- end content section -->
    
</div> <!-- end wrapper -->
    
</body>

</html>

**c6z06** · 06-07-2009, 01:27 PM

Thank you for the reply.

The code you provided does keep the content aligned. How can I use the banner background in there though?

**LadynRed** · 06-08-2009, 02:03 PM

What banner background ? It's already in the code I gave you.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!