SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Newbie CSS problems

    I'm in the process of moving my site from tables based to web standards. I think I'm getting the hang of it but have got stuck on a couple of points.
    I've done the home page here The green area at the top of the page is supposed to be a container holding all the main elements of the page. It's the #contents bit that you can see here. How to I make it so that all the other elements sit inside it?

    Also, How do I make the menu at the top go across the page rather than on two lines.

    Finally - any comments on the general structure of the page and if I am heading in the right direction would be gratefully appreciated.

    Thanks

    Rob

  2. #2
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    div#contents {
    overflow:hidden;
    }
    The division contains floats, and as floats are out of flow it natively would not contain it. But setting the overflow to hidden/auto will ( the latter may result in scrollbars, so the former is preferred ).

    The structure is decent, but it can be improved by using less classes, removing of inline styles, removal of align=left/right ( in favor of floats/css ). You can make use of descendant selectors such as #headtitle p instead of p.titletext to cut down on bytes.

    Lastly I would recommend using HTML 4 Strict if you are not serving the page as real application/xhtml+xml.
    Cross browser css bugs

    Dan Schulz you will be missed

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fantastic! An answer three minutes after I posted! Thanks very much!
    I fixed the problem with the menu in the same way floating the <li> left then using
    overflow:hidden; on the container


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
  •