HTML and CSS Reference
In-Depth Information
font-size: 18px;
font-weight: bold;
padding: 5px 5px 6px 35px;
color: #900;
background-image: url(images/sprite.png);
background-repeat: no-repeat;
background-position: left top;
#nav a:hover, #nav a:active, #nav a:focus {
background-position: left -90px;
color: #060;
The only significant difference from the previous examples is the addition of a background image. In the
normal state the image's background-position is left top , but in the hover state it changes to left -90px . This
moves the sprite 90px up to reveal a green ball in place of the red one (see Figure 10-18 ).
Figure 10-18. You can use a CSS sprite to change the background on hover
This is only a very basic example to demonstrate the principle. I hope it inspires you to experiment with
designs of your own.
There are just three CSS properties and one shorthand property for styling lists. The list-style-type property
lets you change the symbol or number, or remove it completely. The symbols for unordered lists are limited to
disc , circle , and square , but there's a much wider choice for ordered lists. Changing the type of number for
nested lists improves readability. The list-style-position property determines whether the symbol or number
should be outside the list item or tucked into the first line. And the list-style-image property lets you use a
custom image for unordered lists. Unfortunately, there's no way of fine-tuning the position of the image, so it's
sometimes preferable to use a background image instead.
It's become a common convention to convert an unordered list into a navigation menu by setting
list-style-type to none to remove the bullets. The links inside the list items can be turned into clickable
buttons by setting their display property to block , and giving them a background color. To create a horizontal
Search WWH ::

Custom Search