Styling the <ul> Element

Styling the <ul> Element

The third column contains a navigation list. In this lesson, the list items will line up with the edge of the container without bullets. This is achieved using three declarationsmargin: 0;, padding: 0;, and list-style-type: none;.

To add space between each list item, the line-height can be increased using line-height: 150%; as shown in Listing 21.11 and Figure 21.11.

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

body
{
    margin: 0;
    padding: 0;
    font: 90% arial, helvetica, sans-serif;
    background: #387A9B;
    color: #333;
}

h1
{
    background: #D36832;
    color: #FFF;
    margin: 0;
    padding: .5em 3%;
    border-bottom: 5px solid #387A9B;
}

h2, h3
{
    margin-top: 0;
}

#container
{
    background: url(back01.gif) repeat-y 50% 0;
}

#container2
{
    background: url(back02.gif) repeat-y 80% 0;
}

#content
{
    width: 44%;
    float: left;
    margin: 1em 3%;
}

#news
{
    width: 24%;
    float: left;
    margin: 1em 3%;
}

#nav
{
    width: 14%;
    float: left;
    margin: 1em 0 1em 3%;
}

#nav ul
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    line-height: 150%;
}

Figure 21.11. Screenshot of the styled <ul> element.