HTML and CSS Reference
In-Depth Information
and left margin. Float the list items left, and center the text. The resulting style rule
looks like this:
#nav li {
width: 15.5%;
margin-left: 1%;
float: left;
text-align: center;
}
3. next, create a style rule for the links in the list items. This is basically the same as
you created for the horizontal menu, but with a little less horizontal padding. Also,
instead of creating embossed borders, give the menu items rounded corners and a
drop shadow with the following style rule:
#nav li a {
display: block;
padding: 0.5em 5px;
text-decoration: none;
font-weight: bold;
color: #F2F2F2;
border-radius: 8px;
-webkit-box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
}
4. Add background colors for the normal and hover states:
#nav a:link, #nav a:visited {
background-color: #071726;
}
#nav a:hover, #nav a:active, #nav a:focus {
background-color: #326773;
}
5.
Save the style sheet, and test the page in a browser. As Figure 10-14 shows, there
are two problems. The Eastern Mediterranean link is split over two lines, creating a
button that's much taller than the others. Also, the main<div> is tucked behind the
menu, which is why the first line of text has moved into the space alongside the tall
menu item.
Figure 10-14. The long item and the position of the main < div > need fixing
Search WWH ::




Custom Search