SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: horizontal nav

  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    uk
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    horizontal nav

    Hi

    I am doing a horizontal nav with css but am struggling to get it to fit the exact width of the div - it is inline and has coloured background so i need it to line up with a pic on the left and right.

    I can do it by eye but obviously when i test in different browsers it goes mad

    Is there a way of controlling the width of the nav?

    Thanks

    Gav

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you show us the page? (a link)

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    uk
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.imageworks.co.uk/new/clean.html

    Very early draft but hopefully u get the idea.
    Do you need relevent css?

  4. #4
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    uk
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #top {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #003366;
    position:absolute;
    left:30px;
    top:30px;
    width:490px;
    z-index:3;
    overflow:hidden;
    }
    #top ul {
    list-style: none;
    border-top: 1px solid #FFFFFF;
    margin-left: 0px;
    margin-top: 0px;
    padding: 0px;
    }
    #top li {
    display: inline;
    padding: 0px;
    margin: 0px;
    }
    #top a:link, #top a:visited{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #FFFFFF;
    background-color: #003366;
    text-decoration: none;
    padding-top: 2px;
    padding-right: 10px;
    padding-bottom: 2px;
    padding-left: 10px;
    margin-left: 0px;
    margin-right: 0px;
    }
    #top a:hover{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #FFFFFF;
    background-color: #ff0000;
    text-decoration: none;
    }

  5. #5
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    See if this is any help.

  6. #6
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    uk
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that looks great apart from 'the company' being on 2 lines - what did u do?

  7. #7
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm... this is a font problem or something. When I see it here - in IE and in FF, 'The Company' is on one line.

    I just took the available width and divided it by the number of words and then increased it for longer words while decreasing it for shorter ones.

    Oh and I made if float:left instead of display:inline.

    Hang on, I'll see if I can fix it (though it might not be easy as it looks OK to me).

    Which browser are you looking in?

  8. #8
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have another look now... any better?


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
  •