4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

Design help

by Izerman
3 replies
  • WEB DESIGN
    • |
Hi
I'm new to website building and wanted to know how to "build" the typical menu bar?
Such as the blue one in muscleandstrength dot com.

/Izerman
#design
  • Profile picture of the author alkantenik
    It is Ok. This codes are Css codes and it is very good for you.

    You must paste it into menu area in the <body>codes</body>


    <div id="chromemenu">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="diets.html">Diets</a></li>
    <li><a href="nutrition.html">Nutrition</a></li>
    <li><a href="fitness.html">Fitness</a></li>
    <li><a href="health.html">Health</a></li>
    <li><a href="allarticles.html">Articles</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="blog/index.html">Blog</a></li>
    </ul>
    </div>

    Then you must paste this CSS codes into your <head>codes</head> tags.

    #chromemenu{
    width: 99%;
    font-weight: bold;
    font-size: 90%;
    }
    #chromemenu ul{
    border: 1px solid #BBB;
    width: 100%;
    background: url(images/menuback.gif) center center repeat-x;
    padding: 5px 0;
    margin: 0;
    text-align: left;
    color: #AAA;
    }
    #chromemenu ul li{
    display: inline;
    }
    #chromemenu ul li a{
    color: #4d4d4d;
    padding: 5px;
    margin: 0;
    text-decoration: none;
    border-right: 1px solid #DADADA;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    }
    #chromemenu ul li a:hover{
    background: url(images/menubackhover.gif) center center repeat-x;
    color: #FFF;
    }

    You can change colours and other css rules.
    Good Luck
    You can see this menu in my website
    Online | Healthy Diet Plan at Weight Loss Effort
    Signature
    Wordpress Designer
    Skype: wordpress_alkan
    {{ DiscussionBoard.errors[2223408].message }}
    • Profile picture of the author Izerman
      Originally Posted by alkantenik View Post

      It is Ok. This codes are Css codes and it is very good for you.

      You must paste it into menu area in the <body>codes</body>


      <div id="chromemenu">
      <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="diets.html">Diets</a></li>
      <li><a href="nutrition.html">Nutrition</a></li>
      <li><a href="fitness.html">Fitness</a></li>
      <li><a href="health.html">Health</a></li>
      <li><a href="allarticles.html">Articles</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="blog/index.html">Blog</a></li>
      </ul>
      </div>

      Then you must paste this CSS codes into your <head>codes</head> tags.

      #chromemenu{
      width: 99%;
      font-weight: bold;
      font-size: 90%;
      }
      #chromemenu ul{
      border: 1px solid #BBB;
      width: 100%;
      background: url(images/menuback.gif) center center repeat-x;
      padding: 5px 0;
      margin: 0;
      text-align: left;
      color: #AAA;
      }
      #chromemenu ul li{
      display: inline;
      }
      #chromemenu ul li a{
      color: #4d4d4d;
      padding: 5px;
      margin: 0;
      text-decoration: none;
      border-right: 1px solid #DADADA;
      font-family: Verdana, Geneva, sans-serif;
      font-size: 14px;
      }
      #chromemenu ul li a:hover{
      background: url(images/menubackhover.gif) center center repeat-x;
      color: #FFF;
      }

      You can change colours and other css rules.
      Good Luck
      You can see this menu in my website
      Online | Healthy Diet Plan at Weight Loss Effort
      Thank you very much!!
      {{ DiscussionBoard.errors[2226896].message }}
  • Profile picture of the author justcrowd2010
    Wow, I think you know the advance method of HTML coding
    Signature
    Expired Domains Search Engine Script(PageRank,backlinks,indexed,Alexa info) for Sale
    Expired Domains with Pagerank. List is published daily
    {{ DiscussionBoard.errors[2233014].message }}

Trending Topics