Styling the <ul> Element

Styling the <ul> Element

As discussed in Lesson 15, "Creating Vertical Navigation," most browsers display HTML lists with left indentation. To remove this left indentation consistently across all browsers, you must override both margins and padding.

Here, you will set the margin to 0 so that the list sits up against the <h1> element.

The list items will need to be padded with 5px above and below, and 10px to the left and right. This can be achieved with a shorthand padding declaration of padding: 5px 10px.

The HTML bullets must be removed using list-style-type: none.

The <ul> can be styled with background-color: #387A9B.

Because you do not want these rules to be applied to all <ul> elements on the page, you should use a descendant selector that targets the topnav list only. This is achieved by using ul#topnav as shown in Listing 18.7. The results can be seen in Figure 18.5.

Listing 18.7. CSS Code for Styling the <ul> Element

body
{
    margin: 0;
    padding: 0;
    text-align: center;
    font: 85% arial, helvetica, sans-serif;
    background: #B0BFC2;
    color: #444;
}

#container
{
    text-align: left;
    margin: 0 auto;
    width: 700px;
    background: #FFF;
}

h1
{
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #fff;
}

h1 img
{
    display: block;
    border: 0;
}

ul#topnav
{
    margin: 0;
    padding: 5px 10px;
    list-style-type: none;
    background: #387A9B;
}

Figure 18.5. Screenshot of styled <ul> element.