Styling the Thumbnails

To produce the display shown in Figure 2.11, we now need to add the following styles for
thumbnails:
gallery.css (excerpt)
ul.thumbnails {
margin: 0 0 10px 0;
padding: 0;
float: left;
text-align: center;
background-color: #fff;
line-height: 1em;
list-style: none;
}
These styles are the same as those we used for navigation, except that we’re not positioning
this unordered list. We also want to style the list items in exactly the same way as we did
for the navigation list items. The results of this markup

ul.thumbnails li, ul.navigation li {
display: inline;
margin: 0;
padding: 0;
}
Finally, let’s style the navigation. As we’re not using a thumbnail image, we can use a
slightly different style in this case:
gallery.css (excerpt)
ul.navigation a {
display: block;
float: left;
margin: 0 10px 10px 0;
padding: 4px 4px 6px 4px;
border: 0;
background-color: #fff;
text-align: center;
width: 80px;
}
ul.navigation a:hover {
background-color: #eee;
border: 0;
}