Results 1 to 7 of 7

Thread: Absolute positioning

  1. #1
    Join Date
    Feb 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Absolute positioning

    Hello fellow designers,

    Just a quickie.

    Not new to coding but new to absolute positioning. I designed a new site which required me to have rollover image links basically dotted over the page, which meant I could not use my standard way of creating nice neat CSS tables to house the links, I have had to play with absolute positioning each image link on the page.

    The code works fine, no problems there, BUT I use a 22 inch wide screen monitor and it sits perfectly in that, because I made sure it was laid out correctly to work. Now when I look at the site in say a smaller browsers, the images get pushed about and sit too far to the right.

    You can see it here:

    http://www.blandydoes.co.uk/bdprojects/thercshed/

    Does anyone have any ideas on how to make sure that no matter what size monitor is being used, they will sit where I want them to in my design?

    If you could get back to me with ideas, I would be very grateful. I don't like to ask for help but in this case im under a deadline and I am struggling, as most young designers do when it comes to absolute. lol

    Thank you!

  2. #2
    Join Date
    Feb 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Is there anyway of creating a wrapper to contain the AP Divs, so that no matter what screen size it stays centred to the layout?

    Hmm pondering

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,987
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    Well, yes. If you give the wrapper relative position, then it will contain the absolute positioned elements:

    HTML Code:
    <div style="position: relative;">
      <div style="position: absolute;">
      </div>
    </div>
    The inner division is absolute, but will be absolute in relation to the relatively positioned container. If you give the container width and height, it will lay out on the page like a static positioned element. If you use a valid URL DOCTYPE, the container (as long as its width is defined) may be centered on the page using:

    margin: 0 auto;
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. The Following User Says Thank You to jscheuer1 For This Useful Post:

    blandydoes2009 (02-08-2009)

  5. #4
    Join Date
    Feb 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    John,

    That makes sense, but will the new div sit nicely over the rest of the code already written?

    As it is my first time using absolute, I can see what your saying to do but I cant visualise how the code will work.

  6. #5
    Join Date
    Feb 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    John,

    I have created a container but now that relative container sits below the rest of my code. How will I position that container over the other div layers so that the absolute images sit in place at the top like before?

    Here see:

    http://www.blandydoes.co.uk/bdprojects/thercshed/

  7. #6
    Join Date
    Feb 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    John,

    I have moved the container so that it floats above the rest of the layers and it is now working fine. However I get a z-index bug likely for IE 6 & 7

    Any advice on this? I will try to find out some info myself as well..

    Check it out now!

    http://www.blandydoes.co.uk/bdprojects/thercshed/

  8. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,987
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    Looks good to me in IE 7 and 6. The trick is that anything that you want to 'stack' with z-index in those browsers must have relative or absolute position. Also in IE, if a parent element has a lower stacking order (lower z-index, or not positioned absolute or relative), it will sometimes drag down its child, regardless of the child's z-index. Other browsers allow for much more leeway in this.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Tags for this Thread

Bookmarks

Posting Permissions

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