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, set both padding-left and margin-left to 0 on the <ul> element as shown in Listing 16.3.

Listing 16.3. CSS Code Zeroing Margins and Padding

ul#navigation
{
    margin-left: 0;
    padding-left: 0;
}

To remove the list bullets, set the list-style-type to none as in Listing 16.4.

Listing 16.4. CSS Code Removing List Bullets

ul#navigation
{
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
}

Next, add a background color using the shorthand background: #036; as shown in Listing 16.5. This color can be changed to suit your needs.

Listing 16.5. CSS Code Setting Background Color

ul#navigation
{
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
    background: #036;
}

To float the <ul>, use float: left. You will also need to set a width. In this case, we will use 100% because we want the list to spread across the full width of the page. The results are shown in Listing 16.6 and illustrated in Figure 16.1. At this stage, the text is almost illegible. This will be addressed when the <a> element is styled.

Figure 16.1. Screenshot of list with the <ul> element styled.

Why Float the <ul> and <a> Elements? In this lesson, both the <ul> and <a> elements need to be floated. The <a> element is floated so that the list items sit in a horizontal line, butting up against each other. The <ul> must be floated so that it wraps around the <a> elements. Otherwise, it will have no height and will not be visible.

Listing 16.6. CSS Code Setting Float and Width

ul#navigation
{
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
    background: #036;
    float: left;
    width: 100%;
}