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
|
|
