Grow your CSS skills. Land your dream job.

CSS horizontal nav

  • # December 3, 2008 at 11:29 pm

    Hey, need some help here. Designing a website and integrating facebook into it. (http://tifty.tinr.org/index2.php)

    I want a layout like this
    [img]http://triton.imageshack.us/Himg243/scaled.php?server=243&filename=whatiwantpo9.png&xsize=578&ysize=480[/img]

    However, I can’t get the navigation bar the way I want it. I tried floats but they don’t seem to want to work :x

    Here is my code as of right now (html) but can be changed in anyway

    Code:

    # December 4, 2008 at 2:06 am

    Try putting links b in a span tag instead of a div tag.

    # December 4, 2008 at 2:49 am

    Find:

    Replace with:

    Find:

    Code:
    #menubar
    {
    font-size: 10pt;
    display: block;
    background: #809FFF;
    margin-bottom: 5px;
    padding-right: 5px;
    padding-left: 5px;
    }

    #menubar2
    {
    font-size: 10pt;
    display: inline;
    float:right;
    background: #809FFF;
    margin-bottom: 5px;
    padding-right: 5px;
    padding-left: 5px;
    }

    #menubar a
    {
    color: white;
    display: compact;
    list-style: none;
    text-decoration: none;
    }

    #menubar a:hover
    {
    background: #CCCCFF;
    }

    Replace with:

    Code:
    #menubar {
    background: #809fff;
    margin-bottom: 5px;
    padding: 0 5px;
    font-size: 10pt;
    text-transform: uppercase;
    }

    #menubar2 {
    float: right;
    }

    #menubar a {
    color: #fff;
    text-decoration: none;
    }

    #menubar a:hover {
    background: #ccf;
    }

    # December 4, 2008 at 4:02 pm

    Thanks iopet. The clear:both did it.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".