Results 1 to 2 of 2

Thread: Question on Postioning

  1. #1
    Join Date
    May 2008
    Posts
    1

    Question on Postioning

    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

  2. #2
    Join Date
    Feb 2006
    Location
    Salisbury UK
    Posts
    4,332
    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.
    Code downloaded to my PC will be deleted in due course.
    WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
    Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.

Similar Threads

  1. Web Site Partnership Question
    By ExcelSBG in forum General Questions
    Replies: 0
    Last Post: 28 Jan 2006, 09:11 PM
  2. A question of content
    By revrandysausage in forum General Questions
    Replies: 0
    Last Post: 26 Sep 2005, 02:25 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •