CSS div order\hiding images

Russinating · 8 Aug 2008 at 00:59

I've got a small problem. I have a website with 2 images in each top corner, however because the images are absolute and the rest of my site and content isn't, if you shrink the browser to a smaller size like 1024x768 or less the images appear above the content.

What I want to be able to do is have them go behind, or (as I've seen on some websites) become hidden if there's not enough room for them without overlapping something.

Searched high and low on the internet but found nothing, so hopefully someone here can help.

Cheers guys

radderfire · 8 Aug 2008 at 01:05

It's not the answer to your problem but I thought I'd make a quick suggestion - would you be able to tackle the problem in some way by using these images as the main background image to the page.

Rgds

MMD · 8 Aug 2008 at 01:13

Use fixed instead of absolute?

Russinating · 8 Aug 2008 at 01:28

@radderfire:

Unfortunately no, the background has to repeat-x and the two images need to be top left and top right no matter what the resolution.

@MMD:

Doesn't work :/

The website in question is www.idoweddingfilms.co.uk if it helps at all in you seeing the problem.

MMD · 8 Aug 2008 at 01:39

Have you tried putting the divs of the two corner pictures at the bottom of the page (order).

Russinating · 8 Aug 2008 at 01:48

Yeah, they're currently both directly before the </body> tag. Keep the suggestions coming!

Deleted User 234324 · 8 Aug 2008 at 07:35

use zlayers for your divs that should help

MMD · 8 Aug 2008 at 09:57

How about making a div for the entire page which is set to a fixed width? That way the user cannot resize the page to further than this width (eliminating the problem of the images overlapping).

Easiest way I think.

adamph · 8 Aug 2008 at 11:08

change the z-index of the absolute divs to 1 and the main content div to 999. That should work.

z-index: 0;

Tripnologist · 8 Aug 2008 at 12:21

Move your two absolute divs to be right below #main. Then give #main "position:relative". (Tested on IE6, FF, Opera and Safari.)

Russinating · 8 Aug 2008 at 13:24

Tripnologist said:
Move your two absolute divs to be right below #main. Then give #main "position:relative". (Tested on IE6, FF, Opera and Safari.)

Didn't work, but then I guessed you meant to move the two absolute divs above main and that does work - thanks a lot

Tripnologist · 8 Aug 2008 at 18:18

Yeah, sorry. Above.

Was at work so was a little distracted.