SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Relative positioning breaks layout

    Buon Giorno from York UK :-)

    On this page http://tutorial.davidclick.com/philpotts-clone.html ive achieved the layout I want but my lack of understanding of positioning I fear has made this layout vulnerable, let me explain...

    I wanted to position the image element aligned to the far right flush against the grey back ground of the header container so i used relative positioning but when i did i got this problem: http://i216.photobucket.com/albums/c...oning-jinx.jpg I couldnt understand why the image appeared to be pushing down the nav bar.

    I then turned to absolute positioning http://i216.photobucket.com/albums/c...ositioning.jpg and this worries me as i wanted the image to sit flush, aligned left right up against the grey background but be contained within the header.

    Basically ive goy my self in a relative absolute positioning twist ultimately i want to ge this layout http://i216.photobucket.com/albums/c...ositioning.jpg but not use absolute positioning on the dumper truck image.


    Any help welcome, my head hurts :-(
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    I'd say it's fine to use pos: abs in a situation like this. The key, though, is to give the header div position: relative, so that you give the abs image a positioning context. Once the header has position: relative, the absolute position of the image can be precisely measured relative to the header, which is what you want.

  3. #3
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph :-) I was thinking down those lines just needed confirmation!
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,731
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    There is nothing evil about AP ( or DIVs).. it's just how people use them. Always avoiding AP could be just as bad as using only AP ( ok, maybe not JUST AS, but you can see that it can also lead to headaches)

    The key here is that RP moves the displayed image, but NOT the space it takes up.

    SO how do we THINK our way out of this? We ask questions.

    Do we want the image to be part of the normal text flow? It would appear not.
    Does it need to push other elements away? umm.. possibly not.
    does it need to be aligned to the BOTTOM of some other element? Yes ( well that rules out FLOATs)
    Do can is the element a set size, if so can we make space for it elsewhere? EASY! Yes, its an image so of course it has SET dimensions.


    So it seems this is PERFECT for AP.


    As ralph said, RP and AP work in CONJUNCTION with each other RP gives AP a frame or reference. In other words, the coordinates you give an AP'ed element will be relative to the space of the last AP'ed or RP'ed ancetsre (element). This is actually incredibly useful once you get your head around that little concept ( plus the thinking detailed above).

    Code:
    <div id="header">
    	  <h1>Bling my coffin</h1>
              <img class="hearse" src="hearse.JPG">
    	  <ul id="navigation2">
    			<li><a href="#">Home</a></li>
    			<li><a href="#">About</a></li>
    			<li><a href="#">Services</a></li>
    			<li><a href="#">Contact us</a></li>
    	  </ul>
    
    </div>
    note that you dont need the 'navigation' div.

    #header gets RP, since we want the picture to be at the bottom of the header/navigation
    #navigation2 is the last child of #header so it will , uless you add padding to #header, or a border and then margin to naviation, be FLUSH with the bottom of #header
    .hearse has AP this means it takes up NO space and can be positioned relative to #header, since it's .heare's the last AP'ed ancestor. note that it doesnt matter where within #header .hearse is, you could put it within the H1 if it made semantic sense. No matter how it's paces in that segment of code we can now make it DISPLAY flush at the bottom of #header by using bottom:0 ; We can also push it from the right edge by using: right: (amout)px .. no need for margin ( unless you are doing funky mixed unit math)
    To complete the illusion ( and to be safe) we make space for the picture.

    so the final css is something like :

    Code:
     #header
    {
    	background: #C8C8C8;
    	position:relative;
    	overflow:hidden;
    }
    
    #header h1 
    { 
    	margin: 0px; 
    	padding:  50px 0 ; /*VERTICAL padding is at least half the height of the image or so*/
      	float:none;/*MAKE SURE YOUR H1 IS NOT FLOATED FROM OTHER RULES!!*/
    }
    
    
    #navigation2 {
        background-color: #333;
        padding:0;
        margin:0;
        list-style:none;
        float:left;
        width:650px;
        padding-right:250px; /* this makes space for the image*/
    }
    
    
    #navigation2  li
    {
    	float:left;
    }
    
    #navigation2 li a
    {
    	display: block;
     	padding: 5px 10px;
    	color: #fff;
    	text-decoration: none;
    	border-right: 1px solid #fff;
    }
    
    #navigation2 li a:hover { background: #383; }
    hope that helps

  5. #5
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A genuine big thank you for all your help. The code works but my lack of CSS understanding means i dont quite get it yet! I'm taking a step back and making sure i understand relative & absolute positioning first :-)

    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    It's an important concept, but actually quite simple—meaning that even I can understand it.

    If you give an element position: absolute and then set its position to top: 50px, left: 100px, the question is, 50px from where and 100px from where? What is this positioning in relation to? By default, it's in relation to the browser window. But usually in web page design, that sucks. You want it positioned in relation to the other elements on the page. In your example, you want the image to stay positioned relative to the header div, rather than to the browser window.

    To make this happen, just give the element you want your AP element to be positioned in relation to (in this case, the header div) position: relative, and Bob's your uncle—top: 50px suddenly means 50px from the top of the header div, and left: 100px means 100px from the left side of the header element.

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,600
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    You can also position relative to the bottom and right instead of top and left if the element is to be positioned relative to a different corner of its container.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


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
  •