hey
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?
06-22-2007, 01:30 AM
Linear Mode
