Call (877) SITE-OPT (748-3678)

Figure 7-5. The home page uses CSS sprites

Chapter 7 - CSS Optimization uses CSS sprites on its home page to improve performance. AOL uses a CSS sprite for the icons in its main directory navigation bar (Autos, Finance, Food, etc.) on the left side of its home page (see Figure 7-5). css sprite example

Figure 7-5. The home page uses CSS sprites

Its main CSS file sets up the directory navigation bar list:

<link rel="stylesheet" type="text/css" href="" />
#sm_col .dir ul li a, #sm_col .nav2 li a, #sm_col .nav3 li a {
    padding:.28em 0 .28em 2.3em;
    border-bottom:1px solid #fff;
#sm_col .dir ul li a, #aiw, #sm_col .nav2 li a, #sm_col .nav3 li a {
#sm_col ul.serv li a:hover, #sm_col .nav2 li a:hover, #sm_col .nav3 li a:hover,
    .eight .dir ul li a:hover {

This CSS sets the styles for the height of the directory menu, padding (with plenty of room for the background icon—2.3 em—on the left), and a white border on the bottom, and hides any overflow. AOL displays the anchor as a block to make it clickable and set the width to 10.28 em and the rollover color to white.

Copyright © 2002-2018 Website Optimization, LLC. All Rights Reserved - Free website speed test - Privacy Policy
Last modified: February 19, 2009.

Follow us on: Twitter, Google+, Facebook, Linked In