SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast Etaria's Avatar
    Join Date
    Jul 2006
    Location
    Midwest
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Confused with relative/absolute with DIVs

    I understand what absolute does.. especially from toying around with it so much tonight.. but I cannot understand relative?

    when i type several <div style="text-align: center; position: absolute; right: 100px; top: 180px; height: 200px;"><img etc etc></div>

    and then maybe another div tag to put another img below it.. same absolute reference.

    So, for example if I have 3 images one on top of one another on a page... why would one even use relative? And what is it relative to? I am just not understanding all that I am reading on it.

    So, for example... on my site.. I have on a page say 3 photos .. and then i want to start text below.. if I start with absolute, it seems I have to keep using absolute as I go down and I keep previewing it to make sure it is not overlapping... is this the proper way to use DIVs or should I be using relative?

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Relative positioning will move the element 'relative' to where it started from - so:
    Code:
    #mydiv {
      position: relative;
      top: 100px;
      left: 100px;
    }
    #mydiv will be moved 100px to the right and down from where it would normally be and will leave a space where it should have been.

    Absolute positioning doesn't leave that space - the element is removed from the document flow, and repositioned relative to the position of its nearest ancestor that has a position set (or the body if no such ancestor exists).

    In general (in terms of layout techniques) using just absolute positioning is not recommended; it doesn't cope well with text resizing, and means that you cannot use any other kind of positioning on elements after the absolutely positioned elements in the source code.

  3. #3
    SitePoint Enthusiast Etaria's Avatar
    Join Date
    Jul 2006
    Location
    Midwest
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah.. that makes more sense.. think I will have to reread it 10 times for me to really grasp it...

    Question though... let's say I have.. wait i think i understand... so if I have say a picture and have the atribute top:10px; and then say another picture (also relative) and have the attribute bottom:10px,

    the top picture moves down a smidge and the bottom picture moves up a smidge.. and they could overlap, maybe?

    Now.. my question is...

    say for example I have <DIV style="width 500px">
    should I be using px?

    Now let's say I have a small photo.. how to I get it to center within that 500px?

  4. #4
    [Biped] LJK's Avatar
    Join Date
    Jun 2004
    Location
    In My Jammies
    Posts
    761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi -
    Remember, margins [space betw. an element & another]
    and padding [space betw. an elem. & its own 'border']
    are your friends when it comes to positioning, too!
    [And - what styles have you used on the body tag or
    the containing div for all of the page's elements? That
    can influence positioning as well.]

    Just set the img to display:block; text-align:center; margin:0 auto;
    then if it's 250px in height, add padding:125px 0; to add cushioning
    at the top & bottom but not to the sides.

    Good luck,
    El
    F-Fox 2.0 :: WIN :: el design :: US


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
  •