homepage Welcome to WebmasterWorld Guest from 54.198.130.203
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
z-index confusion...
billybonds




msg:1206848
 9:35 pm on Nov 24, 2003 (gmt 0)

hi,

maybe i'm just thick but i'm having real difficulty getting the z-index property to work for me.

i have two images to make up my header and if it were to succeed it would be a gif image placed over a jpeg image.

the CSS is

#logo {
position:relative;
z-index: 20;
left: 0;
top: 0;
margin: 0 0 0 0;
padding: 0;
}

#picture {
position:relative;
z-index: 10;
left: 0;
top: 10px;
margin: 0 0 0 0;
padding: 0;
}

and the html is

<div id="content"><div id="logo"><img src="images/logo_text.gif"></div><div id="picture"><img src="images/logo_picture.jpg"></div>
</div>

however this just places the logo image before the jpeg in the flow of the page with no overlap.

any help would be greatly appreciated....

thanks

jim

 

Distel




msg:1206849
 9:59 pm on Nov 24, 2003 (gmt 0)

try position:absolute.

Reflection




msg:1206850
 10:06 pm on Nov 24, 2003 (gmt 0)

By positioning them relatively you are positioning them relative to how they would normally be in the flow of the document. Since both of the div's have a left coordinate of 0, they are going to remain in the same horizontal position as they would have without positioning, in other words they wont overlap.

billybonds




msg:1206851
 10:18 pm on Nov 24, 2003 (gmt 0)

thank you to both of you...

i have been avoiding relative positioning because i have my page centred in the screen and anything i have positioned absolutely has moved depending on the resolution viewed through. obviously there is a way to do this - i just don't know it....

reflection - i have taken into account what you have just told me

#logo {
position:relative;
z-index: 20;
left: 0;
top: 0;
margin: 0 0 0 0;
padding: 0;
}

#picture {
position:relative;
z-index: 10;
left: 0;
top: -137px;
margin: 0 0 0 0;
padding: 0;
}

now the desired image sits on top ot the other image as desired... many thanks for moving me forward.

....however now there sits a great big white space (the size of the jpeg image) beneath the header where the jpeg was sitting when it wasn't working at all!?

jim

billybonds




msg:1206852
 10:47 pm on Nov 24, 2003 (gmt 0)

not to worry...

i think i might well be scrapping the idea for the moment. i initially wanted to do this because of the way text degrades as a jpeg image unless you go to a very high quality - i though if i saved the text as a gif and positioned on top of the photo image that had been saved as a medium/low quality jpeg it would avoid the problem. however even when saved as a gif with 256 colours the text appears very blocky on the image with white around as well. not pretty.....

jim

garann




msg:1206853
 12:01 am on Nov 25, 2003 (gmt 0)

Hi Jim,

In case you come back to this method later..
There's a hack I've seen in these forums where you can center an absolutely positioned div by setting the left property to 50% and setting the left-margin to negative half the width of your div. That should enable you to position your gif and jpg absolutely, giving you a nice overlap without them taking up space you don't want them to.

billybonds




msg:1206854
 1:25 am on Nov 25, 2003 (gmt 0)

thanks garann

somebody on another forum has suggested that rather than save a gif image of the text, i could always position some normal text over the image..... so i'm trying to go with that - still struggling with the white space though :(

jim

drbrain




msg:1206855
 6:12 pm on Nov 26, 2003 (gmt 0)

You want to use a mixture of absolute and relative positioning to accomplish this, similar to a "titlebox" effect. See my post (msg #22) in Absolute Positioning and Positioning With Padding/Margins/Etc... [webmasterworld.com]

In short, you probably want to have your picture relatively positioned with no offset, then absolutely position text over the top of it, something like:

#picture { position: relative }
#logo { position: absolute; top: 10px; }

billybonds




msg:1206856
 7:08 pm on Nov 26, 2003 (gmt 0)

thanks drbrain, i'll have a read of that post...

jim

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved