SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist fs_tigre's Avatar
    Join Date
    Feb 2009
    Location
    Close to Chicago, Illinois
    Posts
    517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    The best way to make the structure of you page

    Hi,

    I have designed and coded only a few pages using HTML and CSS and I always tend to float everything but looking at other web sites it looks like most of them tend to absolutely position everything.

    My Current structure:
    Code:
    <div id="header">
    	<div id="logo"> Logo goes here </div>
       <ul id="nav"> Nav goes here </ul>
    </div>
    Then I float my header as well as the child divs, but I have seen that most of the programmers/designers absolutely position all these elements, something like this…
    Code:
    <div id="logo"> Logo goes here </div>
     <ul id="nav"> Nav goes here </ul>
    and absolutely positioning them with CSS.

    What would be the best way to create the structure of you site? Is there any benefit of doing it one way over the other?

    I have read a few books but none of them tell you what method to use they just show you how to do it.

    Thanks
    Thank you very much!!!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    For the most part, avoid absolute positioning. It takes elements out of the document flow, making it hard to get them to play nicely together. For example, if your main content is absolutely positioned and you have a footer below that, you would have to move the footer manually every time you added content, which is a hopeless situation.

    However, with small items like a logo or a menu within a head section, there's a reasonable argument for placing it absolutely. Just remember, though, that if font sizes are increased significantly, these abs;pos elements might start to overlap rather than reflow. So again, use wisely and with caution.

    Absolute positioning is mainly useful for placing small items here and there on an occasional basis.

    For the most part, if you want things sitting side by side, use floats.

  3. #3
    SitePoint Evangelist fs_tigre's Avatar
    Join Date
    Feb 2009
    Location
    Close to Chicago, Illinois
    Posts
    517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very good advice. Thanks a lot for your help and sorry about all questions I have asked today, you are awesome!

    Learning a lot!
    Thank you very much!!!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by fs_tigre View Post
    sorry about all questions I have asked today
    No questions, no forum.

    You're welcome!

  5. #5
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,250
    Mentioned
    59 Post(s)
    Tagged
    3 Thread(s)
    Off Topic:

    actually, it's "no answers, no forum"


    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    OK, let's compromise: "No questions = no answers = no forum."

  7. #7
    SitePoint Evangelist fs_tigre's Avatar
    Join Date
    Feb 2009
    Location
    Close to Chicago, Illinois
    Posts
    517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you!

    No forum = Less good designers/programmers
    Thank you very much!!!


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
  •