3 Replies Latest reply on Mar 25, 2010 6:32 AM by MarkV84

    Navbar question

    MarkV84

      Hi,

       

      I am building a website using Dreamweaver. I have built a navbar but have used JPEG images for each button. Please view here -http://www.seemaidstone.co.uk

       

      What I would really like to know is how to make a navbar like the blue one on the Telegraph website (http://www.telegraph.co.uk) so Google can pick up on the text and links.

       

      If any body could point me to a tutorial or simply explain how, it would be much appreciated!

       

      Thanks,

       

      Mark

        • 1. Re: Navbar question
          osgood_ Level 8

          MarkV84 wrote:

           

          Hi,

           

          I am building a website using Dreamweaver. I have built a navbar but have used JPEG images for each button. Please view here -http://www.seemaidstone.co.uk

           

          What I would really like to know is how to make a navbar like the blue one on the Telegraph website (http://www.telegraph.co.uk) so Google can pick up on the text and links.

           

          If any body could point me to a tutorial or simply explain how, it would be much appreciated!

           

          Thanks,

           

          Mark

           

          It's made with an unordered list <ul><li></li></ul>. Its fairly simple to do.

           

          First you write your <ul> unordered list in the code:

           

          <ul id="navBar">

          <li><a href="#">Link One</a></li>

          <li><a href="#">Link Two</a></li>

          <li><a href="#">Link Three</a></li>

          <li><a href="#">Link Four</a></li>

          </ul>

           

           


          Then you style with some css:

           

          /* set up the navBar css ul and make sure the default margin/padding is set to zero. Give it a width and declare a font-family/font-size if required */

           

          #navBar {

          margin: 0;

          padding: 0;

          width: 600px;

          font-family: verdana, arial, helvetica, sans-serif;

          font-size: 12px;

          }

           

          /* set up the navBar li and make sure the default margin/padding is set to zero. float it left so the list is displayed side by side, and remove default bullet by applying list-style: none; */

           

          #navBar li {

          margin: 0;

          padding: 0;

          float: left;

          list-style: none;

          }

           

          /* set up the link using display: block; to activate the complete area of the link, give it some top/right/bottom/left padding to add some styling. Set the background-color, delete the links underline by setting the text-decoration to none, give the link a color and give it a left border to divide the navbar into buttons */

           

          #navBar a {

          float: left;

          display: block;

          padding: 5px 10px 5px 10;;

          background-color: #339;

          text-decoration: none;

          color: #fff;

          border-left: 1px solid #fff;

          }

           

          /* set the links hover (on mouse over color) */

           

          #navBar a:hover {

          background-color: #000;

          }

          • 2. Re: Navbar question
            MarkV84 Level 1

            Thanks, thats great, I'll give that a try!

             

            Im using tables in dreamweaver, so do I just copy that code into the correct cell where my navbar goes?

             

            Thanks again

            • 3. Re: Navbar question
              osgood_ Level 8

              MarkV84 wrote:

               

               

              Im using tables in dreamweaver, so do I just copy that code into the correct cell where my navbar goes?

               

              Thanks again

               

              Yes, just insert the <ul></ul> code into the table cell in which you want the menu to appear and the css can be added to your css stylesheet.

               

              A word of warning though horizontal navigations build in this way are virtually a law unto themselves. If the end user is using an enlarged font setting in their browser it will destroy the look of the menu bar, because those links that will not fit in one line will get pushed down to a second line. Usability is not impaired but the design is.

               

              If I ever have the cause to use a horizontal nav bar I make sure the links have enough room to grow into, at least a couple of browers zooms, which means you can't have the links spanning across the whole width of the design.

               

              If I needed the links to span across the whole width of the page then I would most likely use images for the buttons or investigate an elastic layout construction.