Another z-index problem

Forum Moderators: not2easy

Message Too Old, No Replies

Another z-index problem

spire8118

9:42 am on Dec 2, 2007 (gmt 0)

Hi all. I am trying to place an image on top of my banner div.
So my html is like this:

<body>
<div id="wrapper">
<img id="IMAGE 1" src="blahblah" height"blah blah../>
<div id="BANNER">
<img blah blah...../>
<h1>heading</h1>
</div>
</div>
</body>

my css is...:

#IMAGE 1 {
position: absolute;
top: 0;
left: 0;
width: 810px;
height: 40px;
z-index: 5;
}

#BANNER {
position: absolute;
top: 0;
left: 2px;
margin: 0 auto 0 auto;
border-bottom: 1px solid black;
background : url(banner_bg_01.gif) repeat-x;
height : 140px;
width: 801px;
z-index: 1;
}

The problem I am having is that I can control the z-index of the BANNER, but for some reason I cant control the z-index of the IMAGE 1?
I have tried placing the image in the BANNER element but that does nothing, and also see that somonelse says you cant give a child element a z-index to place over or beneath its parent, which makes sense.
But i do not have any control over the z-index of the image no matter where i put it? any ideas?

Xapti

4:46 am on Dec 3, 2007 (gmt 0)

You can't use spaces in CSS ids or classes, silly :P
Spaces are used to indicate nesting.
IMAGE 1{} should be IMAGE1{}
You may also want to consider doing everything in lowercase, but it really comes down to preference.

I also don't see the point of having your banner absolutely positioned. Whenever possible, it's best to keep things non-specially positioned.
You won't even need to assign either a z-index when you do it like that (since absolute always displays over static). Even if they were both absolutely positioned, the last/most recent element in the code will be the one that appears on top, so you still wouldn't need a z-index.

[edited by: Xapti at 4:50 am (utc) on Dec. 3, 2007]

spire8118

12:55 pm on Dec 3, 2007 (gmt 0)

I only gave those names to make it a bit clearer i know not to use spaces and to write in lower case. Ok so have removed the position for banner which has sorted the z-indexing issue i was having, thanks. But now would like to place the image over the banner and the page sides I have.
Basically what im tryin to achieve is a top page fade effect, so have an image that im tryin to place over ALL of the contents at the top which includes: wrapper - has background image, banner - has background image. For it to do this it needs to be larger in width than everything else, so I cannot place the image inside the banner div, otherwise it does not cover the wrapper background image. If i place it inside the wrapper but outside the banner, it pushes the banner div down by the height of the image i.e. it wont overlap the banner div.
So i suppose my question is can you get an image to place over a div that it is not inside of?

also do you know how to get alpha transparency to apear in IE? I have used this:
<span id="topfade" style="width:900px;height:40px;display:inline-block;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='page_fade_top.png');
"><img style="
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
" src="page_fade_top.png" width="900" height="40" border="0" alt=""></span>

with the css of :
#logo img, #topfade img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
#logo, #topfade {
display: inline-block;
}
#topfade {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='page_fade_top.png');
}

But when i browse the page in IE it blocks the effect. It only shows the effect when I click accept, but I dont really want it to block it in the first place as people might think the site is dogdy?

Xapti

6:50 am on Dec 4, 2007 (gmt 0)

That message is probably only appearing for local page views. You should test it on a web server, which has different security settings (which I think is implemented in a dumb fashion, but that's off-topic). I believe there's a way to change your own browser it so it will be the same settings as online security, but I don't remember.
I'm not sure if this was the only way, but I think you can add some proprietary HTML tag to the code (probably at the top of the page by the doctype) which indicates the page should be considered an online page, and will use those security settings. (which won't do anything for viewers viewing it online, since the page is already using those settings)

[edited by: Xapti at 6:51 am (utc) on Dec. 4, 2007]

spire8118

2:54 pm on Dec 4, 2007 (gmt 0)

Cool, ill have a look round for that then.
Im still struggling tryin to get the page fade at the top. In firefox is displays correctly, but in IE it is behind everything but dont know why.
I have to set the banner as relative so that my navigation sits at the bottom of the banner. The navigation is set as absolute positioned. If i set it as relative and bottom: 0; for some reason it places itself in the middle of the banner.
Ill just give the code cause i am struggling to explain myself.

I have tried using absolute and relative positioning on the #topfade but it still shows underneath everything. I did include heights and widths when doing this.
I no you said earlier to remove the positioning on the banner, but i think i need this to place the navigation correctly, unless im doing this wrong as well?

UPDATE: sorry to have wasted your time. I have finally cracked it after much deleting and editing. WOHOO!
Thanks 4 all your help.