Styling the <a> Element

Styling the <a> Element

You can increase the active area of text links by applying display: block; to the <a> element. This will change it from inline to block level and allow you to apply padding to all sides of the element.

Set the <a> element to display: block; so that padding can be applied to all sides. This will give the element additional width and height, increasing the clickable area.

The <a> element should then be floated, so that each list item moves into a single line butting against the previous item (see Listing 16.8).

Listing 16.8. CSS Code Setting display: block;

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

ul#navigation li
{
    display: inline;
}

ul#navigation a
{
    display: block;
    float: left;
}

Floats and Width For this lesson, you will not be setting a width on the floated <a> elements. This will allow each list item to have its own width based on the number of characters and the surrounding padding. However, this is not generally considered to be a good practice. It is best to set a width on all floated items (except if applied directly to an image, which has implicit width). If no width is set, the results can be unpredictable. Theoretically, a floated element with an undefined width should shrink to the widest element within it. This could be a word, a sentence, or even a single characterand results can vary from browser to browser. In this case, the results are acceptable because the styled list displays well in almost all modern browsers (including Internet Explore 5+, Netscape 6+, Opera 6+, Firefox, and Safari).

Next, add some padding using the padding declaration. You can use .2em for top and bottom padding, and 1em for left and right padding as shown in Listing 16.9.

Listing 16.9. CSS Code Setting Padding

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

ul#navigation li
{
    display: inline;
}

ul#navigation a
{
    display: block;
    float: left;
    padding: .2em 1em;
}

To remove the underlines on the links, use text-decoration: none;. To set the text color and background color, use color: #fff; (white) and background: #036; as shown in Listing 16.10. These colors can be changed to suit your needs.

Listing 16.10. CSS Code Setting Text Decoration, Color, and Background Color

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

ul#navigation li
{
    display: inline;
}

ul#navigation a
{
    display: block;
    float: left;
    padding: .2em 1em;
    text-decoration: none;
    color: #fff;
    background: #036;
}

To separate each list item, a white line divider will be added to the end of each item. This is achieved by adding a white border to the right side of each list item, using border-right: 1px solid #fff; as shown in Listing 16.11 and illustrated in Figure 16.3.

Listing 16.11. CSS Code Setting a Border

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

ul#navigation li
{
    display: inline;
}

ul#navigation a
{
    display: block;
    float: left;
    padding: .2em 1em;
    text-decoration: none;
    color: #fff;
    background: #036;
    border-right: 1px solid #fff;
}

Figure 16.3. Screenshot of list with the <a> element styled.