SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to: equal width horizontal navigation

    Hi, I'm building out a site with a horizontal menu. I've based the design on a grid, so I'd like each menu item to be of equal width. Is there a way to do this? Here's an excerpt of my code:

    XHTML

    Code HTML4Strict:
    <ul id="topnav">
    <li><a href="">About</a></li>
    <li><a href="">Ministries</a></li>
    <li><a href="">Missions</a></li>
    <li><a href="">Community</a></li>
    <li><a href="">Resources</a></li>
    </ul>

    CSS

    Code CSS:
    #topnav li {
      display: inline;
      padding-right: 3em;
    }
    #topnav {
      padding-top: .2em;
      text-align: center;
      width: 770px;
      }

    Thanks

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Float the list items instead, and set a width for each li.

    Note that you then need to clear those floats, e.g., by setting overflow:hidden on the ul.
    Birnam wood is come to Dunsinane


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
  •