how do i position a picture at centre right part of window

absolute position of picture

[andreea115]

hi everyone.

i have a quick question.

i want to place a small picture in the far right corner/middle of the window screen.

i want the picture to always remain in this position even when a user scrolls down the page or reduces the window in size.

i know that i will have to use absolute positioning for this, but i am not sure of the exact code that i would need to use to get the picture to stay at the exact far right corner of the window.

warm regards


andreea

[lucy24]

Absolute positioning is relative to the whole page. It moves when you scroll. You want the rarely-used fixed [w3.org] position:

The box's position is calculated according to the 'absolute' model, but in addition, the box is fixed with respect to some reference. As with the 'absolute' model, the box's margins do not collapse with any other margins. In the case of {stuff they put in just to scare you} the box is fixed with respect to the viewport and does not move when scrolled.

I just tried it with a small picture on a random page. The effect is way cool if you're absolutely sure there will not be any collisions with your ordinary, non-fixed, non-absolutely-positioned content. That's the drawback to both "absolute" and "fixed": they don't care if they're stepping on some other element's toes.

[andreea115]

thank you very much for that good piece of advice. i will employ it.

one last question though; how do i write the css code to place the div in the middle of the page/at the far right corner of the visible window.

[lucy24]

I can't get "middle" and "corner" into the same sentence. Do you mean "edge"?

Cut & paste from my experimental picture:

position: fixed; right: 10px; top: 50%;

"right: 10px" means the right edge is always 10px from the right edge of the viewport. (If it were "position: absolute" it would be 10px from the right edge of the page, or potentially out of sight if the page won't fit horizontally.) So "right: 0" puts you smack against the right edge, while "left: 0" would zoom you over to the other side. If you've also set a width, as you would for an image, the other side should default to "auto".

"top: 50%" means that the top edge of the picture is halfway down the viewport. If you want it centered you have to use a percentage. And if you want it perfectly centered you have to make it a background image; only backgrounds have an option for "center". Otherwise, take your best guess at a reasonable percentage value, like 40% or 49% or whatever suits the size of your picture.

There will be a lot more options in CSS3, but the "position" section is still very preliminary. As in: red label rather than blue or green. But scroll through any CSS3 informational page and you can see fixed positioning [dev.w3.org] in action ;) OK, technically it's a background (I sneaked a look at the CSS) but the effect is the same.