Help on positioning and visibility

[Athelstan]

Hi All
I would like to position an image div over the top of 2 other divs, I have done this using absolute positioning but the result is less than pleasing when the browser is resized. Here is a short piece of code which i hope explains what i am after.
Thanking you in advance for your help…Regards Athestan

Code:

Content for id “logobar” Goes Here

Content for id “navbar” Goes Here

Transparent .png image120px high…I would like this to be positioned on top of the "logobar" and "navbar" divs on the right hand side so that the content of the 2 divs show through the images transparency (image should drop below navbar)

 

 

I have done this using absolute positioning but it looks awful if the browser size is changed ie. position of image moves left or right. Is there anyway of doing this so the image does not move?

[Cotton]

You need to tell your container to have a position of relative, then absolutely positioned elements inside of it will position themselves off of it, and not the entire screen.

Code:

#container {
width: 768px;
margin-right: auto;
margin-left: auto;
position: relative;
}
#container #logobar {
background-color: #FF0000;
height: 60px;
color: #FFFFFF;
}
#container #navbar {
background-color: #0000FF;
height: 40px;
color: #FFFFFF;
}
.yourImage {
position: absolute;
right: 0;
top: 10px;
z-index: 10;
}

Code:

Content for id “logobar” Goes Here

Content for id “navbar” Goes Here

Transparent .png image120px high…I would like this to be positioned on top of the "logobar" and "navbar" divs on the right hand side so that the content of the 2 divs show through the images transparency (image should drop below navbar)

 

 

I have done this using absolute positioning but it looks awful if the browser size is changed ie. position of image moves left or right. Is there anyway of doing this so the image does not move?

[Author]

Posts