SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Addict Huscy's Avatar
    Join Date
    Jul 2002
    Location
    Newcastle, UK
    Posts
    318
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help needed with positioning :/

    OK, am i right in thinking position: absolute; will position an object relative to its parent object?

    The reason I ask is that i am re-designing my website, here it is so far: http://www.infinite-fire.net/v3/index.php -- as you can see im having some issues, especially in IE - could someone explain how 1) to make the <div> for the middle of the header centered, and the right and left /// images just fit around it?
    Also 2) make the right and left columns 130px wide, and the middle expand to 90% of the remainder (regardless of resolution).

    Thanks, i could really use help here :s

  2. #2
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,053
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Huscy
    OK, am i right in thinking position: absolute; will position an object relative to its parent object?

    The reason I ask is that i am re-designing my website, here it is so far: http://www.infinite-fire.net/v3/index.php -- as you can see im having some issues, especially in IE - could someone explain how 1) to make the <div> for the middle of the header centered, and the right and left /// images just fit around it?
    Also 2) make the right and left columns 130px wide, and the middle expand to 90% of the remainder (regardless of resolution).

    Thanks, i could really use help here :s
    Position absolute positions the elements relative to the upper left corner of the page body.

    Position relative will position an object relative to its parent object.

    If I am understanding correctly, you want your content to occupy 90% of the entire page body. To do this, simple use

    body{margin: x 5%}

    With x being the distance you want between the top of the page and the beginning of your content (or in this case, your first division)

    Then with declaring the width of left and right columns, the center should expand to fill the remainder.
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Position absolute positions the elements relative to the upper left corner of the page body.

    Position relative will position an object relative to its parent object.
    If I might jump in here

    Position absolute positions an element in relation to its parents top left co-ordinates. It's parent is defined as the nearest ancestor that has a value set for the property position other than static (the default). If there is no ancestor then the parent is the root element which is effectively the html element( which is the body outside of all margins).

    What this means is that to place an object absolutely in relation to its parent the parent needs to be position:relative (or position:absolute) (In the case of position:fixed the containing block is the viewport.)

    Ther usual way to position in respect to a parent container is to give the parent container a position:relative but not to supply any co-ordinates. In this way the parent stays in the flow and the child positioned absolutely positioned within it and will move with its parent if required.

    Position relative is only relative to itself. The element is moved in respect of the position it already occupies and then placed according to the co-ordinates given.

    Basically position:relative;left:10px;top:10px will move an element 10px from the left and 10px from the top of where it would have been had it not been positioned .

    Also the space that the element previously occupied is preserved. What that means is that everything else on the page will think that the element has not been moved at all. If you move an element a great distance with position:relative you will leave a whole that the element previously occupied. The element will be removed from the flow but the space it occupied will not.

    Hope that clears it up a bit

    Paul

  4. #4
    SitePoint Addict Huscy's Avatar
    Join Date
    Jul 2002
    Location
    Newcastle, UK
    Posts
    318
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    THANK YOU for clearing that up, if you look now - http://www.infinite-fire.net/v3/index.php - you can see that I have fixed most of the problems, but cant seem to figure out how to get the middle column to be 90% of the leftover space ...

  5. #5
    SitePoint Addict eskuel's Avatar
    Join Date
    Apr 2003
    Posts
    255
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Huscy
    THANK YOU for clearing that up, if you look now - http://www.infinite-fire.net/v3/index.php - you can see that I have fixed most of the problems, but cant seem to figure out how to get the middle column to be 90% of the leftover space ...
    Try...
    height: auto;

    Thats if you meant you wanted it to be 90% vertical.

  6. #6
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,053
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Paul O'B
    If I might jump in here

    Position absolute positions an element in relation to its parents top left co-ordinates. It's parent is defined as the nearest ancestor that has a value set for the property position other than static (the default). If there is no ancestor then the parent is the root element which is effectively the html element( which is the body outside of all margins).

    What this means is that to place an object absolutely in relation to its parent the parent needs to be position:relative (or position:absolute) (In the case of position:fixed the containing block is the viewport.)

    Ther usual way to position in respect to a parent container is to give the parent container a position:relative but not to supply any co-ordinates. In this way the parent stays in the flow and the child positioned absolutely positioned within it and will move with its parent if required.

    Position relative is only relative to itself. The element is moved in respect of the position it already occupies and then placed according to the co-ordinates given.

    Basically position:relative;left:10px;top:10px will move an element 10px from the left and 10px from the top of where it would have been had it not been positioned .

    Also the space that the element previously occupied is preserved. What that means is that everything else on the page will think that the element has not been moved at all. If you move an element a great distance with position:relative you will leave a whole that the element previously occupied. The element will be removed from the flow but the space it occupied will not.

    Hope that clears it up a bit

    Paul
    Hello Paul. I have just finished an article on absolute positioning that does agree with your point of view. However, I got my response from this one:
    http://www.wdvl.com/Authoring/DHTML/...ndy_chart.html

    It would appear that along with many other things html and css, there are different schools of thought on positioning.
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  7. #7
    SitePoint Addict Huscy's Avatar
    Join Date
    Jul 2002
    Location
    Newcastle, UK
    Posts
    318
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HHHMmmm ive got it working in firebird, but IE is making the central column far too wide, http://www.infinite-fire.net/v3/index.php - heres my code:

    #midcol {
    min-width: 450px;
    /*margin-left: 130px;
    margin-right: 130px;*/
    background-color: #E1DACA;
    border: 2px solid #444;
    padding-top: 2px;
    padding-bottom: 5px;
    position: absolute;
    top: 80px;
    right: 150px;
    left: 130px;
    }


    can anybody help me (please!!) .

  8. #8
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Shyflower
    However, I got my response from this one:
    http://www.wdvl.com/Authoring/DHTML/...ndy_chart.html

    It would appear that along with many other things html and css, there are different schools of thought on positioning.
    If you look you will find that that article appears to be from a site last updated in August 1998 so is quite likely to be out of date.

    Additionally if you care to experiment you will find Paul is correct.

    The may be "there are different schools of thought" on how positioning should work but there is only one way that it is specified and most of the common browsers do a reasonable job of achieving it.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Benanfa
    The may be "there are different schools of thought" on how positioning should work but there is only one way that it is specified and most of the common browsers do a reasonable job of achieving it.
    Thanks for backing me up

  10. #10
    SitePoint Addict Huscy's Avatar
    Join Date
    Jul 2002
    Location
    Newcastle, UK
    Posts
    318
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can anyone help me ?

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

    I think the best you can do for ie without changing the whole design is to give IE a width. Ie doesn't like its width defined by margins only.

    So you could add this which only IE will get.

    Code:
    * html #midcol {width:65%;}
    This makes it look similar to the firebird design, however it's not perfect.

    To achieve your layout would need a complete redesign I think.

    Paul

  12. #12
    SitePoint Addict Huscy's Avatar
    Join Date
    Jul 2002
    Location
    Newcastle, UK
    Posts
    318
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well how *could* i acheive my layout, the current code only took an hour or so to write, im not bothered if it needs re-coding

  13. #13
    SitePoint Guru DCS's Avatar
    Join Date
    Apr 2002
    Location
    Arkansas
    Posts
    809
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Huscy when I do a 3 column layout like you are doing here what I would do is keep your header <div> and your <div> called maincont. Inside maincont I would put 1 simple table with 1 row, 3 columns then set up classes to define the table cells, leftcol, midcol, rightcol then if you want the "content box" like you currently have create something like midcol_content so you end up with a <div> inside your middle column in the table.

    Sure it's not a total tableless design but let's face facts CSS2 is not perfect and this is a nice workaround until CSS3 comes out and addresses the 3 column layout issue.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    Well how *could* i acheive my layout, the current code only took an hour or so to write, im not if it needs re-coding
    Well it all depends whether the image on the left hand side is to be the same size all the time or if you are happy to have a min height on your main container.

    It also depends on what else you are going to do on the page afterwards and which column you are going to change. Unlike tables CSS needs to be more specific and there isn't one layout to catch all possibilities (unfortunately ).

    Just to copy your layout in a different way can be achieved as follows but as mentioned above maybe entirely unsuitable.

    anyway here it is:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Web Design Centre - Infinite-Fire</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    /* Type CSS rules here and they will be applied
    to pages from 'editcss'
    immediately as long as you keep this window open. */
    /**** LINK-tag style sheet styles.css ****/
    /* Infinite-Fire.net CSS source */
    body {
    background-color: #444;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    padding: 5px;
    }
    pre {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    margin-bottom: 2px;
    margin-top: 0px;
    }
    p {
    margin-left: 15px;
    margin-right: 15px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    }
    a:link {
    border: 2px solid #DFD9C9;
    color: #444;
    font-weight: bold;
    text-decoration: none;
    z-index: 4;
    }
    a:visited {
    border: 2px solid #DFD9C9;
    color: #444;
    font-weight: bold;
    text-decoration: none;
    margin: 5px;
    z-index: 4;
    }
    a:hover {
    border-right: 2px solid #DFD9C9;
    border-left: 2px solid #DFD9C9;
    border-bottom: 2px solid #444;
    border-top: 2px solid #444;
    color: #8A5507;
    font-weight: bold;
    text-decoration: none;
    z-index: 4; 
    }
     
    #maincont {
    background-color: #C5C0B6;
    border: 2px solid #FFF;
    padding: 3px;
    position: relative;
    min-height:700px;/*min-height for mozilla */
    min-width:700px;/*min-width for mozilla */
    }
    * html #maincont {height:700px}/*min height for ie6 */
    #lefthead {
    background-image: url(images/header_leftbg.gif);
    width: 40%;
    height: 62px;
    }
    #righthead {
    background-image: url(images/header_rightbg.gif);
    width: 40%;
    height: 62px;
    position: absolute;
    right: 5px;
    margin-top: -62px;
    }
    #midhead {
    background-image: url(images/header_centre.gif);
    background-repeat: none;
    width: 189px;
    height: 62px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -62px;
    }
    .dashed_hr {
    background-image: url(images/dashed_hr.gif);
    background-repeat: repeat-x;
    width: 100%;
    height: 1px;
    margin-top: 5px;
    margin-bottom: 5px;
    }
    #leftcol {
    position:absolute;
    left:0;
    }
    #midcol {
    margin-left: 130px;
    margin-right:145px;
    background-color: #E1DACA;
    border: 2px solid #444;
    padding-top: 2px;
    padding-bottom: 5px;
    }
    #rightcol {
    position: absolute;
    right: 15px;
    top: 80px;
    text-align: right;
    }
    #nav {
    border-bottom: 2px solid #444;
    text-align: center;
    width: 100%;
    padding: 0px;
    }
    #container {height:100%}
    </style>
    </head>
    <body>
    <div id="maincont"> 
    <div id="lefthead"></div>
    <div id="midhead"></div>
    <div id="righthead"></div>
    <div class="dashed_hr"></div>
    <div id="leftcol"> <img src="images/googleaddemo.gif" alt="" /> 
    </div>
    <div id="midcol"> 
    	<div id="nav"> 
    	 <pre><a href="#">Home</a> - <a href="#">Forum</a> - <a href="#">Photoshop</a> - <a href="#">HTML</a> - <a href="#">CSS</a> - <a href="#">Webmaster</a></pre>
    	</div>
    	<p> Welcome To Infinite-Fire.net - Web Design Centre Welcome to infinite-fire.net 
    	 V3, THE place for web designers, programmers from novice to expert.</p>
    	<p>We offer a plethoria of free web site design and programming tutorials 
    	 - from HTML to JavaScript to PHP and CSS, tips and tricks.</p>
    	<p>If you're looking for HTML tutorials, PHP Scripts or simply a web design 
    	 community, look no further - Infinite-Fire offers all this and more!</p>
    </div>
    <div id="rightcol"><img src="images/addemo.gif" alt="" /></div>
    </div>
    </body>
    </html>
    Hope that gives you some ideas anyway

    Paul

  15. #15
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Berks, UK
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Thanks for the pointer Paul O'B

    Many thanks Paul,

    I had been having a 'mare with absolute positioning of a block inside another block. As you'd suspect, the inner blocks, with an absolute position, were anchoring relative to the top-left of the page, instead of the top-left of the container block I'd put them in. In the end I got the effect I was after by using negative margins. The disadvantage there was that it extended the height of the parent container by 50% with blank space - causing scrolling.

    Adding position:relative to the parent block made it all work!

    Many thanks again.

    Nigel
    Website: www.clarihon.co.uk
    ********************************
    Getting you on the web - cost effectively
    ********************************


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
  •