Forums

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

Home Forums CSS different horizontal menu method than inline blocks

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #37943
    Flybert
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.