Styling the <ul> Element

Styling the <ul> Element

Both the margins and padding of the <ul> need to be set to 0 to remove any browser default styling.

To remove list bullets, use list-style-type: none.

The list items will need to be aligned against the right edge of the #nav container. This can be achieved using text-align: right as shown in Listing 19.7. The results can be seen in Figure 19.6.

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

body
{
    text-align: center;
    background: #B0BFC2;
    color: #444;
}

#container
{
    text-align: left;
    margin: 0 auto;
    width: 700px;
    background: #FFF url(header-base.gif) repeat-y;
}

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

#nav
{
    float: left;
    width: 130px;
    display: inline;
    margin-left: 20px;
    padding: 15px 0;
}

#nav ul
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: right;
}

Figure 19.6. Screenshot of styled <ul> element.