SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    if($awake){code();} PHP John's Avatar
    Join Date
    Jul 2002
    Location
    Along the Wasatch Fault line.
    Posts
    1,771
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Absolute, Relative?

    I am curious to know how you can position elements relative to one another, so that if I change the position of the first element all other elements relative to that one change accordingly.

    For instance, if I have a form with 3 elements in it, and I am enclosing this form in a <div id="main"> how do I make the 3 form elements positions relative to the position of the main <div>?
    PHP Code:
              #main {
                
    positionabsolute;
                
    top:      25;
                
    left:     25px;
                
    width:    700px;
                
    padding:  4px;
                
    border:   1px solid blue;
              }
              
    #userName {
                
    positionrelative;
                
    top:      0px;
                
    right:    -100px;
              }
              
    #firstName {
                
    positionrelative;
                
    top:      10px;
              }
              
    #lastName {
                
    positionrelative;
                
    top:      20px;
              } 
    and the html:
    PHP Code:
    <div id="main" class="formText">
      <
    form name="'.$formName.'" method="post" action="'.$PHP_SELF.'">
        <
    div id="userName">
          
    '.$requiredInfo['userName'].':
          <
    input type="text" name="userName" value="'.$userName.'" size="15" maxlength="'.$fieldSize['userName'].'" tabindex="1" />
        </
    div>
        <
    div id="firstName">
          
    '.$requiredInfo['firstName'].':
          <
    input name="firstName" type="text" value="'.$firstName.'" size="15" maxlength="'.$fieldSize['firstName'].'" tabindex="4" />
        </
    div>
        <
    div id="lastName">
          
    '.$requiredInfo['lastName'].':
          <
    input name="lastName" type="text" value="'.$lastName.'" size="15" maxlength="'.$fieldSize['lastName'].'" tabindex="5" />
        </
    div>
      </
    form>
    </
    div
    This is my first positioning project, and I am confused at how "absolute" and "relative" are supposed to work.

    Any help in understanding this is greatly appreciated!
    John

  2. #2
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well, in theory relative means "in relation to its parent container". however, consider that you don't really need to make anything inside a container relative, as it will already be moved together with the container itself, i.e. their relative position in relation to the container's position remains the same.

    hope that made some kind of sense...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  3. #3
    if($awake){code();} PHP John's Avatar
    Join Date
    Jul 2002
    Location
    Along the Wasatch Fault line.
    Posts
    1,771
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply, Redux.

    I have been doing some reading, and you are basically echoing what it says. The position of elements within a container when using "absolute" are positioned from the 0,0 coordinate of the parent container.

    I'm still confused on how "relative" could be used, though.
    John

  4. #4
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Relative means that it will be shifted from the place it would otherwise be.
    For example you can position a letter in a word some pixels higher/lower than the rest letters:
    Code:
    <p>I am S<span style="position:relative; top:5px;">7</span>even</p>

  5. #5
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Basically what S7even said, relative means, relative to the position the element would normally be.

    Absolute is from 0,0 in the window.
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  6. #6
    if($awake){code();} PHP John's Avatar
    Join Date
    Jul 2002
    Location
    Along the Wasatch Fault line.
    Posts
    1,771
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you all for your responses! They have made the distinction clearer.
    Last edited by PHP John; Jun 5, 2003 at 15:47.
    John

  7. #7
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another thing to remember is that 'absolute' elements are taken completely out of the flow.

    A relative element's space in the flow is preserved. In effect, other elements will behave as if the element is still in it's original position.

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm arriving late here but heres my 2p worth.

    Absolute position is 0,0 (top,left) from the parent container. A parent container is defined as the nearest ancestor that has a property for position other than static. If none exisits then the ancestor is the html element (i.e. the body outside of any margins).

    As stated above relative really means relative to itself and not relative to something else.

    Paul

  9. #9
    SitePoint Zealot markarena's Avatar
    Join Date
    May 2003
    Location
    Perth, Australia
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Zoef
    Another thing to remember is that 'absolute' elements are taken completely out of the flow.

    A relative element's space in the flow is preserved. In effect, other elements will behave as if the element is still in it's original position.

    Rik
    Your statement about document flow gave me a HUGE idea in regard to my layout.

    I have a header and footer with content in the middle, pretty standard you would think. However, I am optimising my graphics by slicing them up through ImageReady, and reassembling the pieces by using absolute positioning.

    Here's what my code looks like now. I've removed the image tags for readability; they appear in all the nested DIVs except the first and last...

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
      body { margin:0px; padding:0px; border:0px; }
      .block1 { background-color:black; color:white; }
      .block2 { background-color:navy; color:white; }
      .block3 { background-color:maroon; color:white; }
    </style>
    </head>
    <body>
      <div class="block1" style="position:relative; left:0px; top:0px; height:40px; ">One text</div>
      <div class="block2" style="position:relative; left:0px; top:0px; height:0px; ">
        <div class="block2" style="position:relative; height:299px; "></div>
        <div style="position:absolute; left:433px; top:21px; width:234px; height:19px; "></div>
        <div style="position:absolute; left:426px; top:33px; width:7px; height:7px; "></div>
        <div style="position:absolute; left:18px; top:35px; width:286px; height:46px; "></div>
        <div style="position:absolute; left:413px; top:40px; width:339px; height:257px; "></div>
        <div style="position:absolute; left:192px; top:108px; width:86px; height:185px; "></div>
        <div style="position:absolute; left:281px; top:164px; width:132px; height:74px; "></div>
        <div style="position:absolute; left:23px; top:236px; width:166px; height:47px; "></div>
        <div style="position:absolute; left:23px; top:286px; width:74px; height:13px; "></div>
        <div class="block2" style="position:relative; ">Hoopla!</div>
      </div>
      <div class="block3" style="position:relative; left:0px; top:0px; height:0px; ">Third text</div>
    </body>
    </html>
    This works a treat on IE6 and Opera7 on Windows XP. Notice the first nested DIV? That's what keeps the content area high enough that the footer area will run underneath, instead of straight underneath the header. Go on, remove it and see what happens.

    The "Hoopla!" text is to test if extra content after the graphic will still force the footer underneath it.

    Unfortunately, this doesn't work for a Mac running IE5 or Safari beta 2. Any ideas?

  10. #10
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not sure I understood what exactly you want to do. Maybe you should give us a link with the image and everything to make it clear. For example, why you want to do it like above and not like this:
    Code:
      <div class="block1" style="position:relative; left:0px; top:0px; height:40px; ">One text</div>
      <div class="block2" style="position:relative; left:0px; top:0px; height:299px; ">
    	<div style="position:absolute; left:433px; top:21px; width:234px; height:19px; "></div>
    	<div style="position:absolute; left:426px; top:33px; width:7px; height:7px; "></div>
    	<div style="position:absolute; left:18px; top:35px; width:286px; height:46px; "></div>
    	<div style="position:absolute; left:413px; top:40px; width:339px; height:257px; "></div>
    	<div style="position:absolute; left:192px; top:108px; width:86px; height:185px; "></div>
    	<div style="position:absolute; left:281px; top:164px; width:132px; height:74px; "></div>
    	<div style="position:absolute; left:23px; top:236px; width:166px; height:47px; "></div>
    	<div style="position:absolute; left:23px; top:286px; width:74px; height:13px; "></div>
      </div>
      <div class="block2" style="position:relative; ">Hoopla!</div>
      <div class="block3" style="position:relative; left:0px; top:0px; height:0px; ">Third text</div>

  11. #11
    SitePoint Zealot markarena's Avatar
    Join Date
    May 2003
    Location
    Perth, Australia
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm trying to make these three areas expand automatically according to the content within, much like a table does.

    I had the impression that I would define the div with a block2 class only once and pile everything in there. I hadn't thought of doing it twice as you have; once for the graphic, once for the text.

    I was actually positioning the top of the content and footer via PHP because I didn't fully understand how absolute and relative positioning worked. This has ended up being an exercise in thinking out loud I think!

    If you want to see the layout I speak of, because you may have something else to suggest, go here...

    http://www.westpoint.com.au/mhewitt/csstest.htm

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi Makarena,

    Position relative only needs to be appilied to an element if you are :

    a) moving it some distance from its original position (ie. relative to itself)

    b) require a stacking context so that you can set z-indexes etc.

    c) Or as a means to set a parent container for absolute elements to be placed within so that they take their positions from the top left of the container and not thehtml element as usual.

    You have used position relative a number of times with a valuse of top and left of 0px respectively. This is a waste of time and code as all you are doing is leaving them where they would have been in the normal flow anyway.

    The only container that needs to have a relative position is the one that holds your absolutely positioned elements.

    Also you should set a class or id for all your absolutely positioned images and not use inline styles as you want to separate presentation from content. (i assume you only did that anyway for demonstration purposes but it's still worth pointing out.)

    One last thing is that you have used a doctype without a URI and this will throw most browsers into quirks mode and make it harder for you to achieve consistent designs.

    Taking that all into account your code can be reduced as follows.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    body { margin:0px; padding:0px; }
    .block1 { background-color:black; color:white;height:40px; }
    .block2 { background-color:navy; color:white;position:relative;height:299px;}
    .block3 { background-color:navy; color:white;width:100%}
    .block4 { background-color:maroon; color:white; }
    #image1{position:absolute; left:433px; top:21px; width:234px; height:19px;}
    #image2{position:absolute; left:426px; top:33px; width:7px; height:7px;}
    #image3{position:absolute; left:18px; top:35px; width:286px; height:46px;}
    #image4{position:absolute; left:413px; top:40px; width:339px; height:257px;}
    #image5{position:absolute; left:192px; top:108px; width:86px; height:185px;}
    #image6{position:absolute; left:281px; top:164px; width:132px; height:74px;}
    #image7{position:absolute; left:23px; top:236px; width:166px; height:47px;}
    #image8{position:absolute; left:23px; top:286px; width:74px; height:13px;}
    
    </style>
    </head>
    <body>
    <div class="block1">One text</div>
    
    <div class="block2">
    <div id="image1"></div>
    <div id="image2"></div>
    <div id="image3"></div>
    <div id="image4"></div>
    <div id="image5"></div>
    <div id="image6"></div>
    <div id="image7"></div>
    <div id="image8"></div> 
    </div>
    <div class="block3" >Hoopla<p>Hello</p><p>hello</p>Hello</div>
    <div class="block4">Third text</div>
    </body>
    </html>
    I hope that this is of some use.

    Paul
    Last edited by Paul O'B; Jun 9, 2003 at 04:52.

  13. #13
    SitePoint Zealot markarena's Avatar
    Join Date
    May 2003
    Location
    Perth, Australia
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hell yeah! This new html worked for Mac IE and Safari as well. Very nice.

    The URI emission was a mistake, but I didn't actually know why exactly they were put there, so thanks. I thought this might be causing the third block to be omitted on Mac browsers, but in reality it was the style definitions.

    In regard to the definition of ".block3", is there a reason you specified 100% for width? I took this out with no effect.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi markarena,
    In regard to the definition of ".block3", is there a reason you specified 100% for width?
    It was a workaround for IE, for some reason it stops a line break forming when you use the first <p> tag in block 3. However, it doesn't work for Mozilla which is why I changed the first line of text in the div in block3 to be without a <p> tag which cures the problem in both browsers.

    So the answer to your question is that you now don't need to specify width as 100% as the default is auto (which is effectively 100% as long as no borders margin or padding have been added).

    Obviously the correct way to handle the line break introduced by the first <p> tag in a div is to set the top/bottom margins accordingly.

    Hope this helps.

    Paul

  15. #15
    SitePoint Zealot markarena's Avatar
    Join Date
    May 2003
    Location
    Perth, Australia
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well Paul O'B, you're full of top tips! Have you got a link for all these fudges and workarounds?

    When I use a style definition to display a block of colour, and that block is smaller than the height of the font for that block (which is automatically inherited), I was inserting a transparent pixel GIF to fix the problem you describe. Can you tell I was in web development a long time ago, and I've just come back?


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
  •