HTML and CSS Reference
In-Depth Information
Figure 10-12.
Setting the display property to block makes the whole link clickable
8. To distinguish between the links, give them a border with harmonious colors. Putting
a lighter color on the top and left, and a darker color on the right and bottom gives
the illusion of embossed buttons. Amend the
#nav a
style rule like this:
#nav a {
display: block;
padding: 0.5em 15px;
text-decoration: none;
font-weight: bold;
color: #F2F2F2;
border: 2px solid;
border-color: #606B74 #02060B #02060B #606B74;
}
9. To make the buttons seem inverted when the mouse is hovering over them, the border
on the top and left needs to be a darker color, and the right and bottom a lighter one:
#nav a:hover, #nav a:active, #nav a:focus {
background-color: #326773;
border-color: #142A2F #61797F #61797F #142A2F;
}
10.
Save the style sheet, and test the navigation menu again. it should now look like
Figure
10-13
.
Figure 10-13.
Adding harmonious color borders gives the links an embossed look
