Position images

HTML & CSS
1

What’s the best way to position the 2 images on the top right of the header on this page? I absolutely positioned them using top and right elements which I know isn’t correct b/c of course, when the screen is minimized, the images pop over to the left (relative to the screen).

I also noticed that on two pages: Illustration and Contact, the images overlap the right border?? Both pages have no content but I used a template???

Thank you!

2

Oh, right! Hopefully, it will stick this time :-).

Thanks Paul!

3

The details are explained in the specs here:

http://www.w3.org/TR/CSS2/visudet.html#containing-block-details

Basically an absolute element is positioned in respect to its nearest positioned ancestor. If none exists then the viewport is used.

If the parent is not positioned then just add position:relative to it and then the absolute element gets placed in respect of this parent and not the viewport and will keep track with it should the parent be moved.

4

Gosh, that’s easy! I couldn’t find a source online to explain that. Do you have one?

I’m taking the sitepoint CSS course with Russ Weakley (I was hoping you would be teaching the course??). This is about my 4th CSS course. I hope one day all this will sink in!

5

Hi,

You could just set position:relative on #header to create a local stacking context and absolutely place the images in respect of #header this will ensure that they will always stay in the top right corner of that element.

e.g.


#header { 
    background:#FFFFFF url(../images/header-bg.gif) repeat-x center; 
    width:900px;
    height:186px;
[B]position:relative;[/B]
}
#topright {
    width:263px;
    height:186px;
    position:absolute;
 [B]   top:0;
    right:0;[/B]
}