SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hoz CSS list nav bar

    On a set of pages I am creating I have used a styled unordered list for the (horizontal) sub-navigation bar.
    This is great on most pages (lots and lots better than using graphics), but on some of the pages the sub nav items have long names, so they spill on to 2 lines.
    Has anyone got any ideas on how to cure the problems this causes,
    1. The divider lines for each 'button' are only on the right hand end of each 'list item' (so it is a single pixel line) on the ones that end up on 2 (or more) lines this looks odd as the line is only on the right hand end (I dont really want thick dividers).
    2. Would it be possible to make the whole bar the hight of the 'taller' button, without altering the main px hight in the CSS so that the nav is not over tall on all the pages (ones without multi line items in the sub-nav bar).
    test page css file

    Thanks in advance for any help

    In a seporate issue when the page is long and requires to be scrolled (I have added a lod of retuns on the example), the nav and content sections scroll over the logo at the top of the page, instead of moving it up (except in IE6 Win)?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,818
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    The easiest solution would be to insert a whitespace nowrap so that the line stays as a sigle line.
    Code:
    #sub-navcontainer ul li a
    {
    border-right: 1px solid #939393;
    margin: 0px;
    color: black;
    text-decoration: none;
    font: normal 10px/15px containervalue0, "Lucida Grande", verdana, lucida, sans-serif;
    text-align: center;
    display: block;
    height: 15px;
    padding: 0px 5px 0px 5px;
    width: 110px;
    min-width:110px;
    white-space:nowrap;
    }
    html>body #sub-navcontainer ul li a {width:auto}
    I realise that this may spoil the uniformity of the layout. Otherwise if the width must remain uniform then the solution will be to make the height double for all of the links. That would need a bit more work as the double line doesn't work in mozilla at the moment anyway.

    Paul

  3. #3
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works quite well. I supose I could use a bit more padding and just totally forget the uniformity in the subnav, which would actually look OK.


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
  •