aligning images with layers

monkeymafia · #1 Jun 22nd, 2007, 15:39

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
the z-index does not appear to be working. appreciate any help at alll

here is my css code:

Code: Select all

/* CSS Document */

body { 

  /*this centers everything, use text-align as a ressurance */
  text-align: center; 
  color: white; /* font color */
  /* if we dont set the background to blue if the window is resized the viewer
  will see white space, we dont want this. so set background to light blue and for the
  top apply background image */
  background: #aed0e4 url(images2/background.gif) repeat-x fixed top left;
  
  
}   

#container
{

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

}

#header
{
z-index: 1;
background: url(images2/tophalf.gif) no-repeat;
height: 50px;
}

#middle{
z-index: 2;
background: url(images2/middle.gif) repeat-y;
height: 600px;


}

#bottom {
z-index:3;
background: url(images2/bottomhalf.gif) no-repeat;
height: 60px;

}

#logo{
z-index: 4;
background: url(images2/header.gif) no-repeat;
height: 85px;
}

html code:

Code: Select all

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

karinne · #2 Jun 22nd, 2007, 15:43

I don't see a rounded box in FF or IE6

monkeymafia · #3 Jun 22nd, 2007, 15:48

woops i forgot to upload the changed pics. should be okay now

karinne · #4 Jun 22nd, 2007, 15:57

What's with all the z-index?! You don't need any of that.

change #logo to add what's I put in red.

Code: Select all

#logo{
z-index: 4;
background: #252525 url(images2/header.gif) no-repeat;
height: 85px;
}

monkeymafia · #5 Jun 22nd, 2007, 16:08

well that does the trick lol.

the code you gave works fine, but i wish to position the logo image abit higher and abit to the right. i thought this could only be achieved with z-index?

Lchad · #6 Jun 22nd, 2007, 18:23

No not z-index. Z moves it below or infront. If you have layers of clothes on, t-shirt, over shirt jackets and wanted the jacket underneath you'd use z-index.

You want to use positioning to set it where you want it.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Aligning box to right	fr33sty13	Web Page Design	8	Jun 6th, 2008 04:49
CSS Aligning	Wesley	Web Page Design	15	Jan 20th, 2008 20:49
[SOLVED] Aligning to the very top	thewebkid	Web Page Design	4	Dec 23rd, 2007 09:48
GD Aligning?	PicoDeath	PHP Forum	3	Aug 2nd, 2007 17:14
Table Images not Aligning	Syody	Web Page Design	1	Jul 27th, 2006 08:36

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
aligning images with layers