It may be a bit difficult to see, but each button link in our horizontal menu is a slightly different width than the next. The size of each button is currently determined by the width of its text plus the padding on the left and right.
Unless the word-lengths of your menu text varies dramatically, you may want to make each link the same width. The author of CSS in 10 Minutes suggests that it is safest to provide a specific width value for any floated element, otherwise the display may be unpredictable in some browsers. You may also decide that all buttons in the menu should be the same width for your graphic sanity. Having each button the same width makes working with certain types of background images easier (coming up shortly).
- Add the following width and text-align declarations to the div#topnav a rule:
div#topnav a {
display: block;
float: left;
padding: .2em 1em;
text-decoration: none;
color: #333;
background: #fc3;
border-right: 1px solid #fff;
width: 4em;
text-align: center;
}
The resulting equally sized buttons will look similar to the example below.
The declarations added here specify a width for each link as well as centering the text within the link. Depending on the width of the text in your menu you may need to adjust the width value. Test in all available browsers to ensure your menu displays properly!
Borders and More
Now that we've completed our horizontal menu, the green border for the DIV no longer makes any sense and we can remove it from the topnav DIV style declaration. There are many cosmetic styling options available to you. We could remove one or both DIV borders, or we could change the color and size of the borders. The borders do not have to be equal sizes. Shortly I will introduce you to some great techniques for using graphics to style your navigation buttons.