Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Navigation issues

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #188017
    Doodayer
    Participant

    So i have two main issues with my nav bar.
    Issue 1: I can’t get them to center. I know it’s probably plain as day, but that’s my problem.
    Issue 2: I can’t get the background of my nav bar to fill in properly. everything else looks great, but i don’t want just the links to have the color.

    `
    #nav {
    padding:0;
    }

    #nav li {
    display:inline;
    }

    #nav li a {
    font-family:Arial;
    font-size:12px;
    text-decoration: none;
    float:left;
    padding:10px;
    background-color: #333333;
    color:#ffffff;
    border-bottom:1px;
    border-bottom-color:#000000;
    border-bottom-style:solid;
    }

    #nav li a:hover {
    background-color:#9B1C26;
    padding-bottom:12px;
    border-bottom:2px;
    border-bottom-color:#000000;
    border-bottom-style:solid;
    margin:0px;
    }
    `

    #188038
    Paulie_D
    Member

    Without a Codepen.io example it’s hard to be specific.

    Could you make a demo with your existing code?

    #188043
    Doodayer
    Participant

    i changed the code just a bit
    http://codepen.io/Doodayer/pen/XJrGzj

    #188047
    Paulie_D
    Member

    OK…it’s a little unclear exactly what you are after but I’ve played a little

    http://codepen.io/Paulie-D/pen/KwPEbd

    You hadn’t set any width on .nav or .container so the first defaults to 100% wide (red) and I’ve thrown in an arbitrary width on the container.

    The ul (lightblue) fills the container BUT the individual list items do not (because they aren’t wide enough).

    If all you need is for the ul to look ‘filled’ just change the background color.

    I’v centered the list items (using inline-block and text-align:center on the parent and smoothed out the whitespace (font-size reset) and sizing issues as well with the box-sizing property.

    If you actually want the list items to fill the whole ul there are a few methods of doing that which I can get into if you want.

    #188051
    Doodayer
    Participant

    actually yeah that would be great! Thanks for the help so far!

    #188052
    Paulie_D
    Member

    Filling the ul

    First option : CSS tables

    http://codepen.io/Paulie-D/pen/PwYgjw

    Works nicely and automatically regardless of number of list items (within limits).

    Issues – can be a fit finicky with sub menus and positioning.

    Second Option : Calculate the width based on known number of list items

    http://codepen.io/Paulie-D/pen/dPbLRa

    Issue: You have to update the percentage if you change the number of list items.

    Third Option – Not shown

    A javascript version of No2 above whereby JS counts the number of list items and sets the width accordingly.

    Issues: Fails if JS is not enabled in the user’s browser but a sensible fallback would fix that.

    #188054
    Doodayer
    Participant

    thanks for all the help!

    so if i was to create a container for the main body of the page, how would i set it’s size to equal the width of my links?

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.