Styling the a Element

Styling the <a> Element

Text links are generally only active when you mouse over the actual text area. You can increase this active area by applying display: block; to the <a> element. This will change it from inline to block level, and the active area will extend to the full width of the list item.

When the <a> element is block level, users do not have to click on the text; they can click on any area of the list item.

Style the <a> elements with display: block; as shown in Listing 15.5.

Listing 15.5. CSS Code for Setting display: block

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

To remove the underlines on the links, use text-decoration: none; (see Listing 15.6).

Listing 15.6. CSS Code for Removing Link Underlining

ul#navigation {     margin-left: 0;     padding-left: 0;     list-style-type: none; } ul#navigation a {     display: block;     text-decoration: none; } 

Changing Link Behavior

Changing standard hyperlink behavior (such as removing underlines) can be confusing for some users who might not realize that the item is a link.

For this reason, it is generally not a good idea to remove underlines on links unless you provide some other means to allow users to distinguish links.

To set the background color, you can use the shorthand rule background: #036; as shown in Listing 15.7. This color can be changed to suit your needs.

Listing 15.7. CSS Code for Setting Background Color

ul#navigation {     margin-left: 0;     padding-left: 0;     list-style-type: none; } ul#navigation a {     display: block;     text-decoration: none;     background: #036; } 

Next, the text color should be set to #fff (the hex color for white). See Listing 15.8. Like the background color, text color can be changed to suit your needs.

Listing 15.8. CSS Code for Setting Text Color

ul#navigation {     margin-left: 0;     padding-left: 0;     list-style-type: none; } ul#navigation a {     display: block;     text-decoration: none;     background: #036;     color: #fff; } 

You will need .2em padding on the top and bottom of the <a> element, and .5em padding on both sides. Rather than specify these amounts in separate declarations, you can use one shorthand declaration to define them all. In this case you will use padding: .2em .5em, which will apply .2em of padding on the top and bottom of the <a> element, and .5em on both sides as shown in Listing 15.9.

Listing 15.9. CSS Code for Setting Padding

ul#navigation {     margin-left: 0;     padding-left: 0;     list-style-type: none; } ul#navigation a {     display: block;     text-decoration: none;     background: #036;     color: #fff;     padding: .2em .5em; } 

Why Use Ems?

You can use either pixels or ems to specify measurement units for padding, margins, and widths. Ems are more flexible because they scale up or down to match the user's font size settings.

To provide some space between the list items, you can add a border on the bottom of each list item. In this case you will use border-bottom: #fff as shown in Listing 15.10.

Listing 15.10. CSS Code for Setting Borders

ul#navigation {     margin-left: 0;     padding-left: 0;     list-style-type: none; } ul#navigation a {     display: block;     text-decoration: none;     background: #036;     color: #fff;     padding: .2em .5em;     border-bottom: 1px solid #fff; } 

Customizing the Border Bottom

In this lesson, the border-bottom is set to #fff, assuming that the page background is white. However, the color of the border-bottom should be set in the same color as the page or container background.

If more space is required between list items, the width of the border can be increased.

Set the width of the <a> element using width: 7em; as shown in Listing 15.11 and illustrated in Figure 15.3. This width can be changed to suit your needs.

Listing 15.11. CSS Code for Setting Width

ul#navigation {     margin-left: 0;     padding-left: 0;     list-style-type: none; } ul#navigation a {     display: block;     text-decoration: none;     background: #036;     color: #fff;     padding: .2em .5em;     border-bottom: 1px solid #fff;     width: 7em; } 

Figure 15.3. Screenshot of list with <a> element styled.

List Width

As discussed in Lesson 5, "Getting to Know the CSS Box Model," padding is added to the content area to give a final width. In this case, .5em of padding is applied to the left and right sides of the list. When added to the content width of 7em, the list items are now 8em wide.

Fixing Odd Borders

Certain browsers, such as Netscape, Mozilla, and Firefox, will render the border-bottom incorrectly for some list itemsgenerally in the middle of a list. This can be fixed by changing the border thickness to 1em instead of 1px.