ExtraDiv Image and Banner Images

[RogersDA]

Is it possible to place an image using the ExtraDiv code so that it appears above the body background image, but behind the banner? I've tried different z-index values for the ExtraDiv and the banner, but the image in the ExtraDiv is always above the banner.

[Andy]

Sure. Define your extraDiv in your header html, then position it in your CSS, then assign your header a higher z-index than your extraDiv.

[RogersDA]

Define your extraDiv in your header htmlSo does that mean I place the div id name in the header just like the my_banner? I am not sure how to place the ExtraDiv code itself in the header since the code is CSS and the header is to be in html. A code money I am not.:scratch

...then position it in your CSS, then assign your header a higher z-index than your extraDiv.Well, I have two z-index values (one for the my_banner and one for the ExtraDiv - both are defined in the CSS. I am not sure how else to do that.

As an aside - could ya' fix the typo in the thread title?

[Andy]

Sure tell us what code you are using please, post it here

[RogersDA]

Sure tell us what code you are using please, post it here
Thanks for getting back with me. Jut trying to get this right to see what affect the image in the extraDiv might have. I will probably change the image later.

I have been playing with several values for both z-index variables below. So - obviously I have something wrong.

In CSS I have the following:
my_banner {
width: 1600px;
height: 70px;
left:0;
top:70;
background: url(http://darphotos.smugmug.com/photos/246644631-O.png) no-repeat;
_background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=image, src='http://darphotos.smugmug.com/photos/246644631-O.png');
z-index: 999;
}

#extraDiv1 {
position: fixed;
_position: absolute;
top: 0;
left: 0;
width: 630px;
height: 630px;
background: url(/photos/251388976-O.png) no-repeat;
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingmethod=crop,src='/photos/251388976-O.png');
z-index: -1 /* negative value selected to make it disappear until I correct the position of the extradiv*/;
}
In the header I have the following:
<div id="my_banner"> </div>
<div id="extraDiv1"> </div>

[Andy]

Thanks for getting back with me. Jut trying to get this right to see what affect the image in the extraDiv might have. I will probably change the image later.

I have been playing with several values for both z-index variables below. So - obviously I have something wrong.

In CSS I have the following:
my_banner {
width: 1600px;
height: 70px;
left:0;
top:70;
background: url(http://darphotos.smugmug.com/photos/246644631-O.png) no-repeat;
_background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=image, src='http://darphotos.smugmug.com/photos/246644631-O.png');
z-index: 999;
}

#extraDiv1 {
position: fixed;
_position: absolute;
top: 0;
left: 0;
width: 630px;
height: 630px;
background: url(/photos/251388976-O.png) no-repeat;
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingmethod=crop,src='/photos/251388976-O.png');
z-index: -1 /* negative value selected to make it disappear until I correct the position of the extradiv*/;
}
In the header I have the following:
<div id="my_banner"> </div>
<div id="extraDiv1"> </div>
ok this is not my expertise area - but hopefully Allen can ...

[Allen]

...
In the header I have the following:
<div id="my_banner"> </div>
<div id="extraDiv1"> </div>
One point.
There is already an extraDiv1 defined so you can't add a second one. You CAN
defined it's contents in CSS though.

To use the z-index I think you need relative position, otherwise it wouldn't
position itself relative to anything else.:D

#my_banner {
position: relative;
width: 1600px;
height: 70px;
left:0;
top:70;
background: url(/photos/246644631-O.png) no-repeat;
_background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=image, src='/photos/246644631-O.png');
z-index: 999;
}

btw, you can lose the http://darphotos.smugmug.com part of the links and use the relative link. Makes CSS a little bit easier to read.


Add this to your CSS. Might have to add all the styles you use. Added Smugmug
for that style.

#smugmug,
#userBio {
position: relative;
z-index: 999;
}

Another btw, you have a gap in you nav between the main and drop making
it impossible to select a drop in Firefox. Also need to pump up the z-index for the
drop, it goes behind some gallery elements.

[RogersDA]

Think I got it now. Thanks Allen. :thumb