A Smarter Way To Learn HTML & CSS(2015)

74
A horizontal navigation bar

part 1

You don’t need to know much more than you already know in order to create a horizontal navigation bar. Like a vertical navigation bar, it’s just a list of links with some styling.

We’ll start by replacing the shrink-to-fit inline-block specification with a width.

div#navbar {
display:inline-block;
width: 100%;
}

The ul styling is the same as before.

div#navbar ul {
list-style-type: none;
}

The a element styling has only one change.

div#navbar ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.1em;
font-weight: 900;
text-decoration: none;
color: white;
display: block;
padding: .75em;
}

The big changes are in the li styling.

div#navbar ul li {
background-color: blue;
text-align: center;
display: inline;
width: 19%;
float: left;
margin-right: .5em;
}

display: inline tells the browser not to arrange the list items vertically, the default, but to put them side-by-side.

We want each of the five blocks to be the same width. By specifying that each block occupy 19% of the width of the div, we leave room for the margin that creates a little whitespace between each block.

float: left—well, you know how that works. It arrays the blocks horizontally across the window.

The .5em right margin separates the blocks with a little white space. We wouldn’t have to do this, of course. We could skip the margin and have the navigation bar be a solid blue block across the window.

This is the result. (I'm showing you just the left half of the menu.)

Change your CSS file to convert the vertical menu to a horizontal menu. Save the file. Display the page.

Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-74-1.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/74.html