10 replies [Last post]
jrmontg
Offline
Regular
Last seen: 17 years 35 weeks ago
Joined: 2004-09-23
Posts: 16
Points: 0

I have to images at the top of my page. The problem is when you min the broswer window. The right image overlaps the left. I need it to be the other way around. I tried playing with Z index but still no solution.

Here is my code:
<div id="Banner">
</div>
<div id="RightBanner">
</div>

CSS:
#Banner {
padding-top: 0px;
width: 65%;
height:51px;
float:left;
background-image: url(/newsite/images/topbanner.gif);
background-repeat: no-repeat;
padding-bottom: 0em;
text-align: justify;
z-index: -5;
}
#RightBanner {
width:20%;
height:51px;
float:right;
background-image: url(/newsite/images/rightside_baner.gif);
background-repeat: no-repeat;
padding-bottom: 0em;
z-index: 5;
}

Thanks for the help

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 8 years 43 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Overlapping Elements

I'm guessing here, but have you tried this?...

<div id="RightBanner">
</div>
<div id="Banner">
</div>

Life's a b*tch and then you die!

jrmontg
Offline
Regular
Last seen: 17 years 35 weeks ago
Joined: 2004-09-23
Posts: 16
Points: 0

Overlapping Elements

No that didn't work.

My goal is an expanding and shrinking page for screen resolutions.

When I shrink it down below 800x600 the overlapping occurs. I just need the overside to be overlapped because it has my company name on it.

Thanks

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 8 years 43 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Overlapping Elements

Okay; again I'm guessing until someone who knows what they're talking about takes over... have you tried removing the negative z-index value as I'm not sure if that is valid?

Life's a b*tch and then you die!

jrmontg
Offline
Regular
Last seen: 17 years 35 weeks ago
Joined: 2004-09-23
Posts: 16
Points: 0

Overlapping Elements

I don't either I was trying all kinds of values. I changed it to 1 and still doesn't work.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 8 years 43 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Overlapping Elements

Okay: z-index should work so maybe it's your browser or doctype that's at fault. Do you have a link so I can see the page?

Life's a b*tch and then you die!

jrmontg
Offline
Regular
Last seen: 17 years 35 weeks ago
Joined: 2004-09-23
Posts: 16
Points: 0

Overlapping Elements

No, sorry its on my local server. I have tried with IE and FireFox.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 8 years 43 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Overlapping Elements

It's a case of the blind leading the blind I'm afraid. I've recreated your page and I can't solve your problem either. Sorry!

Life's a b*tch and then you die!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 5 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Overlapping Elements

Hi jrmontg,
z-index only works with positioned element (absolute or relative).

Something worth a try would be to swap the images round in the source code.
You could put the right image first and float it right then have the left image and float that left.
You may have to play around to get it how you want.

Hope that helps

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 8 years 43 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Overlapping Elements

Tony wrote:
Something worth a try would be to swap the images round in the source code.
You could put the right image first and float it right then have the left image and float that left.

I tried that on jrmontg's behalf.

Life's a b*tch and then you die!

Root
Offline
Enthusiast
Brighton UK
Last seen: 15 years 15 weeks ago
Brighton UK
Joined: 2004-09-08
Posts: 76
Points: 0

Overlapping Elements

I would be inclined to make the one I wanted on top the one I floated.
The other image I would cunningly set in the background. Just my 2c.

No class, little style and a lotta division.