Understanding ListsThere are three types of lists: unordered, ordered, and definitions. They have similar markup but should be used based on their content.
The markup for lists is very simple. Here's the code for an unordered list <ul> <li>Gibson</li> <li>Fender</li> <li>Rickenbacker</li> <li>Washburn</li> </ul> This unordered list opens with an unordered list (ul) tag, contains a number of list (li) items, and then closes with another ul tag. An ordered list is very similar except the list tag is ol instead of ul. In an ordered list, each item is sequentially labeled using numbers, letters, or roman numerals, depending on the value of the list-style-type property. You can place the label either outside of the list or within in it using the list-style-position property. Figure 7.1 shows some examples of different types of unordered and ordered lists. Figure 7.1. Here are examples of the various sorts of unordered and ordered lists you can create. Styling ListsLists are the basis for navigation and menus; after all, navigation elements usually consist of a list of pages you can visita menu is a list of choices. So there is a movement within the CSS community toward styling navigation and menus as lists. One very important advantage of this thinking is that if the user is viewing the page in a user agentperhaps a cell phonethat cannot apply the CSS styles, the XHTML list markup is enough to render the navigation or menus in meaningful ways. Even if that doesn't make sense now, it will by the time you have read through this section. Let's begin by styling a set of navigation links that you might find on the left sidebar of almost any site. Here's the markup for an unordered list inside of a div, so you can see it in relation to a containing element (in the context of left navigation, the container would be the left column) <div id="listcontainer"> <ul> <li>Gibson</li> <li>Fender</li> <li>Rickenbacker</li> <li>Washburn</li> </ul> </div> First, let's display the div so we can see our unstyled list inside it (Figure 7.2).
body {font: 1.0em verdana, arial, sans-serif;}
div#listcontainer {border:1px solid #000; width:160px; font-size:.75em; margin:20px;}
Figure 7.2. Here's an unordered list inside a div with its border on.
Second, let's turn on the borders of the ul and the li elements so that we can see the position of the individual elements of the list (Figure 7.3).
ul {border:1px solid red;}
li {border:1px solid green;}
Figure 7.3. With the ul and li borders turned on, it's clear that Safari (top) and Internet Explorer (bottom) have different default styles for lists.
In Figure 7.3, the ul has a red border and each li has a green border. As you can see, Safari uses padding on the ul to indent the list (the green elements are pushed away from the ul red container) and also adds small top and bottom margins to separate the list from surrounding items. Internet Explorer uses a margin on the ul to indent the list (note the ul is wrapped tight around the li elements and both are moved away from the div), and Internet Explorer only adds a bottom margin, not a top one. These differences can make it hard to have lists look the same across browsers. The only way to overcome these discrepancies is first to reset the margin and padding values on lists to zero and then restyle them. So let's set the ul and li margins and padding on both types of list elements to zero (Figure 7.4).
ul {border:1px solid red; margin:0; padding:0;}
li {border:1px solid green; margin:0; padding:0;}
Figure 7.4. Now Safari (top) and Internet Explorer (bottom) present the list identically. Note that once the bullets move outside of the ul in Internet Explorer, they are not displayed.
Now the list looks the same on both Safari and Internet Explorer. Note that the bullets, which belong to the li elements, are now hanging outside of the div. If the div was right against the edge of the browser window, the bullets wouldn't even be visible. So it's clear that we have to apply some minimal amount of left margin or padding to the ul to ensure that the bullets are within the div and are not overlapping another element, or, as is the case in Internet Explorer, are not even displayed. So let's set the left margin (Figure 7.5).
div#listcontainer {border:1px solid #000; width:160px; font-size:.75em; margin:20px;}
ul {border:1px solid red; margin:0 0 0 1.25em; padding:0;}
li {border:1px solid green; margin:0;}
Figure 7.5. By setting a left margin of 1.25 em on the ul, the bullets are brought back into the div.
Note that I used the shorthand style to set all the margins, not just the left margin. If you don't keep the others explicitly set at zero, the default top and bottom margins, which are different for each browser, will reappear. Also, now we have placeholders ready for the other three values in case we want to change them later. Let's change the space between the list items since they're a little too close together
div#listcontainer {border:1px solid #000; width:160px; font-size:.75em; margin:20px;}
ul {border:1px solid red; margin:0 0 0 1.25em; padding:0;}
li {border:1px solid green; margin:0; padding:.3em 0;}
The obvious way to do this is to set the margin-top or margin-bottom on the li elements, but I prefer to use identical top and bottom padding. This keeps the li elements touching instead of creating space between them, which gives us some more options for styling. To show you why it's better to increase the padding than to change the margin, I'll replace the boxes around the elements with neat horizontal lines between each item (Figure 7.6). Figure 7.6. Adding the horizontal lines is the first step in giving the list a more designed look.
By adding the top and bottom padding to increase the height of the li elements instead of creating space between them, the top and bottom edges of the li elements are exactly halfway between each line of type. Now when you style either their top or bottom edges, you get a rule exactly halfway between them. Now let's do some more cleanup on this list (Figure 7.7).
Figure 7.7. The list looks better, but it could use a rule above the first item.
Here are the changes to the markup
body {font:1em verdana, arial, sans-serif;}
div#listcontainer {border:1px solid #000; width:160px; font-size:.75em; margin:20px;}
ul {border:0; margin:10px 30px 10px 1.25em; padding:0; list-style-type:none;}
li {border-bottom:2px solid #069; margin:0; padding:.3em 0; text-indent:.5em}
The most notable modification made at this step was using the list-style-type property, with a value of none, to remove the bullets. The text-indent property moves the text in slightly from the left edge of the rule, and the new margins on the ul position the list nicely within the container. The list would certainly look better if we added a line across the top of the first item (Figure 7.8 on the next page). The ideal solution is to add a border-top to just the first list item. There is a simple way to do that with the CSS pseudo-class :first-child. Sadly, IDWIMIEInternet Explorer does not understand that pseudo-class. Figure 7.8. Here we've added a top line using the :first-child pseudo-class.
This means that we either add the :first-child pseudo-class and accept, zen-like, that it will not appear in Internet Explorer, or we come up with a work-around. Let's use the pseudo-class first, and then think about a work-around for our less-compliant but popular friend Internet Explorer. Here's the code
body {font:1em verdana, arial, sans-serif;}
div#listcontainer {border:1px solid #000; width:150px; font-size:.75em; margin:20px;}
ul {border:0; margin:12px 20px 10px 1.25em; padding:0; list-style-type:none;}
li {border-bottom:2px solid #069; margin:0; padding:.3em 0; text-indent:.5em}
li:first-child {border-top:2px solid #069;}
Now take a look at a simple fix for Internet Explorer. When the bullet was removed, the ul element shrank down to the same width as the list items. We can create our top rule by applying the style to the top of the ul, which contains all the list items. Instead of using the markup I just listed, you could use the following, which makes the top line appear in Internet Explorer too body {font:1em verdana, arial, sans-serif;} div#listcontainer {border:1px solid #000; width:150px; font-size:.75em; margin:20px;} ul {border:0; margin:12px 20px 10px 1.25em; padding:0; list-style-type:none; border-top: Sometimes you can find easy work-arounds like this for Internet Explorer, and sometimes you have to accept that not everyone is going to get the same experience. As long as everyone gets an acceptable experience, that's OK. We now have something that looks a lot like a set of navigation links. All we need to do is turn what are now lines of text into links and we'll have an attractive and functional navigation element (Figure 7.9). This is quite simple using this code <div id="listcontainer"> <ul> <li><a href="gibson.htm">Gibson</a></li> <li><a href="fender.htm">Fender</a></li> <li><a href="rickenbacker.htm">Rickenbacker</a></li> <li><a href="washburn.htm">Washburn</a></li> </ul> </div> Figure 7.9. With links added into the markup, the text now appears underlined.
Note how the link tags are closest to the content and nested inside the list items. Basic Link StylingNow let's give your links some styles. First, let's remove the underlining from them in their normal, "sitting-there-waiting-for-something-to-happen" state, and then, when the users rolls the cursor over the link, let's have it change color.
Also, since this is the last step to complete your navigation component, you should do some clean up: you need to adjust the ul bottom margin, add context to the selectors so that only the elements within your listcontainer div are affected by the styles, and add a hack (actually, two hacks) to make the line above the first list item appear in Internet Explorer for Windows. Here's the final code for your list-based navigation component
body {font:1em verdana, arial, sans-serif;}
div#listcontainer {border:1px solid #000; width:150px; font-size:.75em; margin:20px;}
div#listcontainer ul {border:0; margin:12px 20px 12px 1.25em; padding:0; list-style-type
Figure 7.10. Here's the finished menu, complete with a rollover highlight.
|
2px solid #069
