Moving things in a page - positioning

Discussion in 'Web Design' started by liverpoolphil, Jul 16, 2012.

to remove all ads.
  1. liverpoolphil

    liverpoolphil New Member

    Messages:
    9
    done as you said chris but now the FB plugin's completely gone! II guess this is something to do with the "margins in the header section"?


    *Answered my own question, it was something to do with the header section
     
    Last edited: Jul 17, 2012
  2. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Eh...you can do this, but know that you dont have to.

    Odd, I have not found this to be a problem. Fixed layouts, it is very simple...I could perhaps see an issue with fluid layout however being that we are using percentages and not fixed values.
     
  3. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Phil if you are going to fix the width of your site, which it looks like you are, there really is no need to use percentage based values for the width of the columns. I know, I wrote them in there in my example, but if you change them to a pixel value that will eliminate the stacking problem.

    Plus, you dont need to wrap your #sidebar with another div.

    Percentages are better suited for fluid layouts.
     
  4. liverpoolphil

    liverpoolphil New Member

    Messages:
    9
    chrishirst, PixelPusher - THANKS for your help with this. I have managed to get the result I wanted, not ideal I know but it will do for now.
     
  5. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    Get out of the habit of "wrapping" things in a div. Style the actual element where possible, and use divs for what they are: divisions. If you have a group of elements that are grouped together, put a div around them. For example: if you're using XHTML or HTML4, and you have a header with an h1 and h2, do like so:
    HTML:
    <div class="header">
     <h1>Text here</h1>
     <h2>Text here</h2>
    </div>
    Instead of:
    HTML:
    <div class="header">
     <div class="logo">
      <h1>Text here</h1>
      <h2>Text here</h2>
     </div>
    </div>
    Now, generally, you'll probably have the h1 and h2 in the same area of that header. The h1 and h2 are block elements. Style them directly instead of adding another div around them. Let's say the header is 100% width and the h1 and h2 sit on top of one another 5% from the left:
    Code:
    .header{
     position:relative;
     height:60px;
     width:100%;
    }
    .header h1, .header h2{
     position:relative;
     left:5%;
    }
    See? No more divs than necessary. You can honestly style any element in almost any way. If you wanted, you could style <b> tags (bold) to act like divs. There's no practical or semantic purpose for that, but it's entirely possible.
     
    Last edited: Jul 17, 2012
  6. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Your welcome :)
     

Share This Page