PDA

View Full Version : Question on Postioning



arezzoit
27 May 2008, 09:08 AM
Hello,

I just have a quick question. I'm re-designing my coming soon page for my restaurant and I have decent HTML experience. I'm okay with CSS (minus positioning).

I want to create a COMING SOON page with a solid placed background, that parts easy.

However, then I want to place an image FIXED in the bottom right, and then one in the bottom left. The Third in the center.

I can do the center image. But how would i go about fixing the bottom left and right images, I want them to remain in the bottom right and left regardless of window size and resolution. Which would be my best method for employing that?

I'm self-sufficent, if you could just supply me some media, or an article outlining it, I'd be able to go from there.

Thanks alot guys,
Louis

Wickham
27 May 2008, 11:22 AM
This code works for flexible window widths, but the images need to be fairly small; if the total of their widths is more than a small window that they are inside, one of them will go down below the others.

<div style="width: 100%; text-align: center; background-color:
#eeeeee;">
<img style="float: left;" src="image1.jpg" alt="image left">
<img style="float: right;" src="image2.jpg" alt="image right">
<img src="image3.jpg" alt="middle image">
</div>

The side divs operate a float but the center image (coded after the other two) operates the text-align: center in the containing div and moves up into the space between them (if there is enough room).

Tested in IE7 and Firefox.

If you want all three fixed to the bottom of the window regardless of the window size. edit the containing div to:-
<div style="width: 100%; text-align: center; background-color:
#eeeeee; position: fixed; bottom: 0; left: 0;">

but it won't be fixed in IE6 which doesn't support position: fixed and you may find that it covers other content above (the background-color will cover other content) so you may need to add a margin-bottom to whatever div is above to provide a bit of space for the fixed images.