Formatting Main Navigation with CSS

Good navigation is a crucial part of creating a web site. A site's navigation should be meaningful and clear. Designing meaningful navigation for a complex site can be a laborious process including focus groups, card sorting, and many cups of coffee. Since coming up with a good navigation scheme requires a lot of coffee, an acronym to help remember the properties is 3CREAM:

• Consistent - appears and functions in predictable ways across an entire site
• Clear - unambiguous link names, unmistakable as navigation
• Concise - visitors can easily navigate to all parts of your site through the provided navigation
• Reliable - users can trust the navigation to be there when they need it and it can be used with a high degree of confidence
• Efficient - allows users to identify what they want to do, then allow them to do it without being impeded
• Accessible - easy to read and use, both visually and aurally
• Meaningful - helps communicate the purpose or tell the story of a web site

Keeping these characteristics in mind will help you develop good, meaningful navigation for your websites. Our navigation currently looks like this:

While this is completely functional navigation, we want to make it more clear that this is our main navigation:

To make a list look like a table, we will use CSS. To do this, we need to talk about the display property.

Changing the Display of Elements

The CSS property, display, can be used to make the web browser draw an element in a way that is different than the default. For example, hyperlinks are usually inline elements:

This hyperlink is display:inline; (default).

Note that there are no line breaks around the hyperlink.

Using the display property, we can make hyperlinks render like block elements:

This hyperlink is display:block;.

Note that the hyperlink appears as if it's inside a paragraph element.

The markup in both situations is the same (minus the change of text):

<p>This <a>hyperlink</a> is display: block/inline (default).</p>

Exiting code block.

The CSS that changes the behavior of the hyperlink from inline to block is:

a { display: block; }

Exiting code block.

So, as you can see, without changing the markup, the display property can modify how an element behaves when being rendered by the browser.

The display property has several different values that can be used, all with different rendering behavior. The W3School's page about CSS display Property contains a description of the display property and its possible values.

We are interested in two particular property/value pairs today, display: table; and display: table-cell;. In the previous section, we learned how to build tables around tabular data. That content was made to look like a table because the HTML markup says that it's a table. We don't want to change the meaning behind our navigation, i.e. a list of hyperlinks, but we do want to change the way it behaves in the web browser. This is a two-step process. First, we tell the browser to display the unordered list as a table.

Step1. If necessary, switch back to the code editor.

Step2. To create a rule to change the navigation to be displayed as a table, type:

a {
    color: #852c28;
    text-decoration: none; 
}
.main-nav ul {
    display: table;
    margin: 0;
    padding: 0;
}

Exiting code block.

You see that we're using the display property to change the unordered list's rendering behavior to table.

Next, we set the individual list items to be displayed as a table cell.

Step3. To render the individual list items as a table cell, type:

.main-nav ul {
    display: table;
    margin: 0;
    padding: 0;
}
.main-nav ul li {
    display: table-cell;
    padding: 10px;
}

Exiting code block.

Step4. Save style.css and refresh index.html.

Now, our navigation looks like this:

To get our navigation to look like our final example, we just have to add some background colors and borders. Let's do that now.

Step5. To change the colors of our main navigation, add:

a {
    color: #852c28;
    text-decoration: none; 
}
.main-nav {
    background-color: #462;
    border-bottom: 1px solid #462;
    border-top: 1px solid #462;
}
.main-nav ul {
    display: table;
    margin: 0;
    padding: 0;
}
.main-nav ul li {
    display: table-cell; 
    padding: 10px;
    border-right: 1px solid #462;
    background-color: white;
}

Exiting code block.

Let's see how this looks in the web browser.

Step6. Save style.css and refresh index.html.

The page is refreshed and we see the navigation in its finished form:

Now that we've taken a look at our main navigation list, let's look at how to use lists to represent more complex data.