How to Make a Horizontal Navigation With Buttons in CSS

Not all websites use navigation bars for their site menus. A row of buttons can display links to other parts of the site, although the “buttons” are not technically buttons. The structural HTML code for both navigation types is the same, and much of the CSS (Cascading Style Sheets) code is also the same. When creating a row of horizontal navigation buttons, style a bullet list into buttons that all float to the left of each other. Styling the links themselves makes them easier to click and works well across different browser types.

Instructions

1. Create an unordered list in your Web page using HTML. Place links inside each pair of “<li>” tags:

   <ul id=”nav”>
   <li><a href=”page1.html”>Page 1</a></li>
   <li><a href=”page2.html”>Page 2</a></li>
   <li><a href=”page3.html”>Page 3</a></li>
   <li><a href=”page4.html”>Page 4</a></li>
   </ul>

   Give your list an ID name as shown above.

2. Open the stylesheet for your Web page and add new code to the bottom of the file. If your Web page does not yet have a stylesheet, create a blank file and save it as a CSS file within the same folder as your Web page. Place this code after the “<title>” tags in your HTML file to embed the stylesheet:

   <link rel=”stylesheet” href=”yourfile.css” type=”text/css” />

3. Remove bullets and left-side padding from the unordered list:

   #nav {
   list-style: none;
   padding-left: 0;
   }

   In this example, “#nav” selects any element with an ID name of “nav.” If you used a different ID name for your “<ul>” tags, then replace “nav” with your own ID name.

4. Float each list item to the left:

   #nav li {
   float: left;
   }

5. #nav a {
   display: block; /* makes anchor tags compatible with padding */
   background-color: #eeeeee;
   color: #555555;
   padding: 5px 10px;
   text-decoration: none;
   }

   This example creates light grey buttons with dark grey link text. Remove underlines from links by setting “text-decoration” to “none.” Use padding to widen the background around the text; in the example, “5px” represents five pixels of vertical padding while “10px” represents 10 pixels of horizontal padding.

6. Add a right-side margin to every button so they do not bump up against each other:

   margin-right: 20px;

   This property-value pair goes inside the curly braces after “#nav a.”

7. Go back to the style rule for the entire unordered list and make adjustments for spacing around the button group:

   #nav {
   list-style: none;
   padding-left: 0;
   margin: 20px 0;
   }

   The code for margins is similar to that of padding, but margins effect space between elements rather than the space inside of each element. This example sets 20 pixels of margin space on the top and bottom of the button set without setting any horizontal margins.

Tips & Warnings

• Add "float: right" or "float: left" to the entire unordered list if you want to position your buttons to the right or left of the site's header.

• Change "margin: 20px 0" to "margin: 20px auto" if you want to center the buttons horizontally on the page. Where you see "20px," you can change "20" to any number you want to effect vertical spacing.