z index problem

sybil6

10-25-2007, 01:31 AM

hi;
i am trying to have the div "header" on top of the div "main" and no way i cant make it work...:confused:
help!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: black;
}
#wrapper{
width:1000px;
margin: 0 auto;
}
#header {
margin-left:280px;

height:26px; /*complete height 38px*/
padding-top:12px;
width:389px; /*complete width 424px */
padding-left:35px;
font-family:Georgia,verdana;
font-size:12.5px;
font-weight:normal;
background-color:#7c907e;
z-index:1;
}
a {
text-decoration:none;
color: black;
}
a:hover{
color:#efeede;
}

</style>
</head>

<body>

<div id="wrapper">

<div id="header"><a href="index.htm"><span style="color:#efeede;">Consult</span></a>     <a href="services.htm">Ydelser</a>     <a href="bio.htm">Baggrund</a>     <a href="actualites.htm">Aktuelt</a>     <a href="contact.htm">Kontakt</a></div>

<div id="main"><img src="images/main.jpg"/></div>

</div> 

</body>
</html>

vtjustinb

10-25-2007, 02:49 AM

Z-index only applies to elements that are "positioned" (this includes relative, absolute, and fixed--all elements are implicitly 'static' positioned in normal flow).

The easy way to do what you want (have the header be on top of "main") would be to put the the header div inside of main, and then set the main.jpg to be the background of the main div:

<div id="main">
<div id="header">header stuff...</div>
main stuff...
</div>

CSS:

#main {
background: url(images/main.jpg) top left no-repeat;
}

sybil6

10-25-2007, 03:24 AM

thanks for your help but it does not work, now i get the header up there (where i wanted to) but the main is completely black, it's amazing at how difficult it is to do such a simple layout using css and html...:mad:

sybil6

10-25-2007, 12:15 PM

i finally got around the problem , this is what i added:

in the css header:

#header {
position:absolute;
z-index:1 ;

and i created a css main :

#main{
position:absolute;
}