SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Nov 2000
    Posts
    741
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS layout questions

    I am new to css but am starting to like it! For my first design, I am thinking of doing this:

    1. Create #wrapper and centre it.

    2. Inside the wrapper, create div tags for header, mainContent and footer.

    3. Create Compound rule for each div tag for formatting, size etc.

    4. Enter content/images etc.

    My questions are:

    1. #mainContent - if I want two columns, do I create 2 more div tags, one called leftCol and the other rightCol? Do I then use floats to position them within #mainContent?

    2. #header to contain logo and navigation child div tags. Is that good practice, to nest them like this? For the horizontal navigation, how would I position where the text starts? Is that using the navigation's div tag margin?

    I am getting a little bit confused because I am not sure when I should be using absolute positioning, relative, static or floats!

    Thanks,

    Jon

  2. #2
    SitePoint Evangelist
    Join Date
    Aug 2006
    Location
    Nantwich, Cheshire
    Posts
    468
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    I've been in the same position, and not yet experienced enough to answer your questions with any authority. I recommend you search some of the articles on the site as well as forum postings and you can get some ideas of what others do, then experiment. Also some of the relevant Sitepoint books allow you to download preview chapters that can set you in the right direction.
    Learning PHP. http://www.firenza.net - my homage to a car from the 1970s

  3. #3
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Jon

    There is a certain amount of trial and error - you'll find what works best for you. All I can tell you is what I've found works best for me.

    I start from the point of view of the content itself - (even if it's just planned content) - I place that on the page and place the appropriate tags around it (e.g. Ps, ULs, H#s etc). I'll then give some of those elements an id or class (e.g. the menu) to differentiate them.

    I'll then add further div tags to separate off the various chunks of the page that I can't do with their native tags - I generally have a heading div (not always necessary) and then for a 2 column layout I'll have a sidebar div and a contents div followed by a footer. I don't call them left or right because I might need to move them around in future and that name wouldn't make sense so I try to give them names reflecting their purpose rather than their position.

    I prefer using floats to position the divs where necessary. I don't like using Absolute Positioning for large chunks of the page - it's fine for small bits and pieces but nothing big. I find floats easier to predict and less likely to break.

    Start off simple - use as few divs as you need (e.g. the menu probably doesn't need a div around it - just give the list an id) but keep in mind possible future layout changes so sometimes adding an extra div or two will help in the long run - it's a balance. Keep the tags semantic (e.g. heading tags for headings).
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,338
    Mentioned
    465 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Jon Lawrance View Post
    If I want two columns, do I create 2 more div tags, one called leftCol and the other rightCol? Do I then use floats to position them within #mainContent?
    Yes. Just make sure that the #mainContent div wraps around the floated columns to avoid some surprises (it won't by default). There are several good methods for this, such as applying overflow: hidden to the wrapper.

    #header to contain logo and navigation child div tags. Is that good practice, to nest them like this?
    Yes. You don't necessarily have to use inner divs, though. The logo can be positioned in its own right (be it an H1 or an image), so too the UL navigation.

    E.g.

    Code:
    ul#nav {
      font-family:georgia,palatino,garamond,"times new roman",times,serif;
      font-size:1.125em;
      line-height:1;
      list-style:none outside none;
      overflow:hidden;
      padding:52px 0 0 20px;
    }
    
    #nav li {
      float:left;
      padding:0 1.5em 0 0;
    }
    For the horizontal navigation, how would I position where the text starts? Is that using the navigation's div tag margin?
    Yes, or padding, as shown above. Again, you can just pad out the UL, rather than adding an unnecessary div.

    I am getting a little bit confused because I am not sure when I should be using absolute positioning, relative, static or floats!
    The default positioning is static, and it's best to stay with that unless you really need something else. (E.g. the UL example above just uses a bit of padding in static position.) As Tailslide said, in most cases look next to floats. Only use absolute positioning for little bits and pieces when you really need to. Don't use it for the main layout.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yes. Just make sure that the #mainContent div wraps around the floated columns to avoid some surprises (it won't by default). There are several good methods for this, such as applying overflow: hidden to the wrapper.
    And haslayout for IE6
    Yes. You don't necessarily have to use inner divs, though. The logo can be positioned in its own right (be it an H1 or an image), so too the UL navigation.

    E.g.

    Code:
    ul#nav {
      font-family:georgia,palatino,garamond,"times new roman",times,serif;
      font-size:1.125em;
      line-height:1;
      list-style:none outside none;
      overflow:hidden;
      padding:52px 0 0 20px;
    }
    
    #nav li {
      float:left;
      padding:0 1.5em 0 0;
    }
    If you have that code yyou also want ot float the anchors (assuming it has haslayout set on it) to avoid an IE6 bug
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •