Grow your CSS skills. Land your dream job.

different horizontal menu method than inline blocks

  • # May 5, 2012 at 5:52 pm

    Hello .. I am new here and saw the article Fighting the Space Between Inline Block Elements

    I have a bit different method for horizontal menus

    in the html this would be div class=”menu”

    in yoursite.css

    .menu
    {
    background-color:#4c9cd9;
    width:984px;
    padding:0px;
    margin:auto;
    border-style:solid;
    border-width:0;
    border-radius:0px 0px 0px 0px;
    text-align:left;
    }

    then here’s the real trick that gives you control

    a.menu:link
    {
    color:#def;
    text-decoration:none;
    }
    a.menu:visited
    {
    color:#def;
    text-decoration:none;
    }
    a.menu:hover
    {
    color:#fff;
    text-decoration:none;
    }
    a.menu:active
    {
    color:#def;
    text-decoration:none;
    }

    now you can construct your menu lettering from

    to

    tags defined in your CSS and use spaces to define the spacing .. each menu item can be easily linked after you’ve designed the menu bar
Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

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