laying objects on top of one another

[Guest adanacben]

I have created a site that requires me to lay the link row on top of the background image. i had to splice the image and insert it using html, i don't know how to use multiple images as one div background. that is not my question though, this code used to work with ie 6 and 7 but with the new 8 and with fx, gc, and safari, the link row is underneath what i want as the background. i just don't know how to change the order of the items. the site is located at http://www.cowhorsesinc.com/

 

thanks

[Wickham]

You've split your image into 20 images 25px wide which is a terribly complicated way to do it.

 

Then you created a div id="background" and put the images inside as normal images.

 

I was going to try to make it work on my computer but I can't even start without putting the image together as just one image. It should preferably be a background-image.

 

You could have a normal image and then use position: absolute layer to place the menu on top, but it should be easier just to create a div 975px wide with a background-image 975px wide and the the menu will sit on top. See http://w ww.wickham43.net/layers.php for info on layers.

 

Edit: you have spelt the style as backgound but the div id as id="background" so I found I couldn't make it work until I corrected the spelling. I used my own image 975*475px and added a height to the div and I think you should carry on from there:-

 

#background { background-image: url(images/gray975x475.jpg);

width:975px; height: 475px;

float:right;

}/*was spelt backgound*/

 

Delete all images inside div id="background"

Edited February 7, 2009 by Wickham