SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Starting CSS Layout - beginners quick question

    Hi all,

    I'm looking to move away from table based designs to full CSS. Are there any hard and fast rules with regard to positioning divs ?

    Am i right in saying that they should conform to a document flow, where they stack up on top of each other and then you position them as is appropriate ...
    Should I always use relative positioning ? When should I use absolute positioning ?

    or does it matter ? are there any gains/problems depending on how they are positioned

    many thanks in advance

    alan

  2. #2
    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)
    I personally find using absolute positioning for large chunks of the layout tricky - I prefer to only use it for smaller bits and pieces and stick to relative positioning and floats for laying out the page - more reliable generally in my experience.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks tailslide......i've been looking through tutorials and thought i missed something.....for a basic two column design with header/banner i've been using relative.....tho i've tried out some 3 column layouts using float...
    so far my pages have been two columns....i guess i'll use relative for images too...??

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    UK
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Generally, you dont often need to use relative positioning for layouts. Relative positioning is normally used for more subtle effects.

    Absolute positioning for layout is fine but like tailside said, it can get tricky using absolute positioning for large chunks of the layout.

    Using floats is normally the best way to go and it should be easy to create a two or threee column layout with a header using this technique.

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cheers for the advice....
    i had started off using a header/banner relative to a container div...
    then a menu positioned absolutely underneath that (not sure why i did that!!)..
    and my main content div positioned relative...

    does the positioning have any bearing when using different resolutions or if a user resizes their browser window ?

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It can.

    The two things you have to remember are that CSS is predicated on clean, valid and semantic (X)HTML code, and that it works best with the bare minimum of markup. Don't code your (X)HTML to work with your CSS, code your CSS to work with your (X)HTML.

    Most site layouts tend to have a header, left column, main column, (possibly a right column), and a footer. Marking up your structure that way will allow for a much easier time when it comes to apply the styles.

    I prefer to use a simple source code order, and then use a combination of floats and margins (margins on the main column equal to the width of the column next to it) to achieve the layout I want. I also set a default font size of 100% in the body selector (which is tied in with the <body> element), and then use EM units for all subsequent font size changes and my layout. For example, if the font size is set to 16px (which in my stylesheet the 100% font size gets read as 16px), and I have a column that is 9em wide, then at 16px that column will be 144px wide. This allows for the layout to expand and contract as needed. Only when I have a column that must be a certain size (like a sidebar with a calendar that has an image above it) will I use pixels instead of EMs--and then the main column will have the margin for that side set in pixels instead of EMs.

    Also, be sure to strip the margins and padding from virtually every element. Use the universal selector (* { /* style rules here */ }) to do this. Understand though, that when you do this, you will be responsible for the margins andpadding of all your elements. It's powerful, so be sure to use it with care, and learn how to fully maximize it.

  7. #7
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,179
    Mentioned
    233 Post(s)
    Tagged
    1 Thread(s)
    I agree with Dan (again, seems that I agreeing with Dan in every single thread )

    I also tend to do my layouts liquid whenever is possible, so they will expand/contract as necessary.

    Most of the time, I use floats to get the result I want, but in order to know what it is best for you, you need to understand floats and positioning, so you can take the right decission.

    I was going to give you a really brief explanation but I decided to take a small break... maybe later (sorry if I am feeling lazy, but it's friday and I am tired )

  8. #8
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks guys for all the great advice...
    i've seen some liquid layouts for 3 column.....and i will take a look at ones for 2 column now too....
    am i right in thinking that with a liquid layout, different screen resolutions are handled in an easy and efficient way ?
    are there any other methods for dealing with different screen resolutions in css ?
    at the moment i'm making sure my header is 800px wide and the menu+content is 800px wide combined also.

    thanks

    alan

  9. #9
    SitePoint Addict
    Join Date
    May 2006
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    one thing that I had to learn the hard way (actually many things but lets not go there!!) is the importance of doctype. If you don't get that right forget the rest!

  10. #10
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lordy....i've opened up a hornets nest!
    i'm trying to make the xhtml compliant also...and have been referring to the w3.org transitional dtd....
    trying to satisfy that...pretty okay so far...
    is there anyway it relates to css and layout in particular that i should watch out for ?

    cheers

    alan

  11. #11
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,179
    Mentioned
    233 Post(s)
    Tagged
    1 Thread(s)
    the doctype doesn't relate to CSS, only your markup. Obviously, if you do not conform whatever specification you are using and the browser goes into quirks mode, that's going to affect how your page is rendered and hence, indirectly, your css... to conform any specification you need the doctype.

    The only thing important about XHTML is the version you are using and how you are sending it (the only version that can be sent as text is 1.0, any other needs to be sent as application). If it isn't really necessary, I would use HTML 4.01, because Internet Explorer doesn't really understand XHTML, and just treats it as bad formed HTML, so no benefits there.


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
  •