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.





Sams Teach Yourself CSS in 10 Minutes
Sams Teach Yourself CSS in 10 Minutes
ISBN: 0672327457
EAN: 2147483647
Year: 2005
Pages: 234
Authors: Russ Weakley

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net