CSS Forum

**monkeymafia** · 06-21-2007, 06:34 PM

hi,

its me again, im getting there slowly.

I have a rounded box, which has been sliced into 3 separate images (top, middle, bottom). ive managed to code the box fine.

But im trying to place my header image at the top of this box using layers, but its not working, the image creates a gap inbetween the box. please see this link: http://www.kumar.adsl24.co.uk/mk.html

here is my css code:

Code:

/* CSS Document */

body { 

  margin:0px auto; 
  text-align: center; 
  color: white; 
  background: #aed0e4 url(images2/background.gif) repeat-x fixed top left;
  
  
}   

#container
{
  width: 767px;
  margin: 0px auto;
  text-align: left;
  padding: 50px 50px;

}

#header
{
position: relative;
z-index: 1;
background: url(images2/outerbox_top.gif) no-repeat;
height: 45px;
}

#middle{

z-index: 2;
background: url(images2/middle.gif);
height: 500px;
margin-left: 0.6%;
width: 744px;
}

#bottom {
background: url(images2/bottom.gif) no-repeat;
height: 60px;
margin-left: 0.6%;
width: 744px;

}

#logo{

z-index: 3;
background: url(images2/header.gif) no-repeat;
height: 80px;


}

html code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
  
  <title>Portfolio v1</title>
  <link href="layout.css" rel="stylesheet" type="text/css"/>
  </head>
 
  <body>
  
    <div id="container">
    
  <div id="header">
  </div>
  <div id="logo"></div>
  <div id="middle"></div>
  
  <div id="bottom"></div>
  
  
  
 </div>
  </body>
</html>

i appreciate any help and the time you spent looking at this. is there another way to approach this apart from layers?

**LadynRed** · 06-21-2007, 11:45 PM

Ok, z-index does not work unless the element is positioned either absolute or relative.

2nd, why do you find it necessary to position all 3 anyway ? Your layout certainly doesn't need it based on what I see. The normal document flow will work just fine. The only element you should set to position:relative is #container.

The margin: 0 auto; on the body is ineffective. Leave the text-align: center for IE's use, and use margin: 0 auto; on the box that you want to have centered. I would make #container the same width as the divs inside it - 744px, then get rid of the .6% left margin.

Quote:

#container
{
position: relative;
width: 744px;
margin: 0px auto;
text-align: left;
padding: 50px 50px;

}

#header
{

background: url(images2/outerbox_top.gif) no-repeat;
height: 45px;
}

#middle{

background: url(images2/middle.gif);
height: 500px;
width: 744px;
}

#bottom {
background: url(images2/bottom.gif) no-repeat;
height: 60px;
width: 744px;

}

#logo{

background: url(images2/header.gif) no-repeat;
height: 80px;

}

**monkeymafia** · 06-22-2007, 07:32 AM

thanks, that does make more sense and makes the code cleaner!
however the z-index still does not seem to work. it still has the same effect as before.

**LadynRed** · 03:15 PM

In case you didn't notice, you don't NEED the z-index and it will NOT work on an element that is not set to position:absolute of position:relative.

The only thing hinky with your layout now is that hole to the right of your logo, and that is because your logo is only 1/2 as wide as the container.