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.