We’ll create a typical thumbnails page—a display of small images, each of which links to its respective image page. Actually, since we’ve already created the look and feel of the image page, most of the groundwork is completed. The markup for our thumbnails page looks like this :
You’ll notice that this markup is very similar to the image page’s markup, except the h1 is different, and the description area has been removed. We’ve created an unordered list to contain the thumbnails; it utilizes the class of thumbnails that we used previously on the navigation for the photo page.
The number of thumbnails displayed on this page can be varied to suit your preferences. I’ve chosen to display 25, as the layout is wide enough to accommodate five thumbnails per row and per column, which echoes the 1:1 proportions of the thumbnails themselves. A little aesthetically pleasing balance is never a bad thing!
The pagination-style navigation is very similar to the navigation on our single image page, but the class of thumbnails was removed, since these links don’t contain thumbnail images and don’t need to be styled as such. At the moment, our page appears as in Figure 1.
You’ll notice that this markup is very similar to the image page’s markup, except the h1 is different, and the description area has been removed. We’ve created an unordered list to contain the thumbnails; it utilizes the class of thumbnails that we used previously on the navigation for the photo page.The number of thumbnails displayed on this page can be varied to suit your preferences. I’ve chosen to display 25, as the layout is wide enough to accommodate five thumbnails per row and per column, which echoes the 1:1 proportions of the thumbnails themselves. A little aesthetically pleasing balance is never a bad thing!
The pagination-style navigation is very similar to the navigation on our single image page, but the class of thumbnails was removed, since these links don’t contain thumbnail images and don’t need to be styled as such. At the moment, our page appears as in Figure 1.
Figure 1. The thumbnails page before additional styling
Styling the Thumbnails
To produce the display shown in Figure 2.11, we now need to add the following styles for thumbnails:
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 are shown in Figure 2.:
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 are shown in Figure 2.:
Figure 2. Thumbnails page showing styled thumbnails
Finally, let’s style the navigation. As we’re not using a thumbnail image, we can use a slightly different style in this case:
The navigation styling differs from the thumbnails styles, in that a smaller padding value is applied to the bottom, and there is no border on the links. Make sure that this styling comes before the ul.thumbnails styles in your markup so that the borders and padding display correctly, as they do in Figure 3.
Figure 3. Completed thumbnails page
The navigation styling differs from the thumbnails styles, in that a smaller padding value is applied to the bottom, and there is no border on the links. Make sure that this styling comes before the ul.thumbnails styles in your markup so that the borders and padding display correctly, as they do in Figure 3.
Figure 3. Completed thumbnails pageCongratulations—you now have a thumbnails page and an image page. All we need to donow is make an album page.
No comments:
Post a Comment