HTML and CSS Reference
In-Depth Information
12. Center the header's background image by adding the
background-position
property to the
#header
style rule like this:
#header {
background-image: url(../images/yachts banner.jpg);
background-repeat: no-repeat;
background-position: center top;
height: 127px;
}
13. The “Climate” heading is an
<h3>
element, and it's the first child of its parent. So,
you can eliminate the gap by adding the following style rule to basic.css:
h3:first-child {
margin-top: 0;
}
14. To make the navigation buttons more usable on a small touch screen, they need
to be wider and taller. By changing their width from
15.5%
to
48%
, they stack up in
three rows, and need a bottom margin to keep the rows apart. Amend the styles like
this (the changes are highlighted in bold):
#nav {
list-style-type: none;
margin: 15px 0 0 0;
padding: 0;
height:
132px;
}
#nav li {
width:
48%
;
margin-left:
2%
;
margin-bottom: 5px;
float: left;
text-align: center;
display: inline;
}
#nav li a {
display: block;
padding:
0.75em
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);
}
15. Test the page again with the browser window still at a narrow width. The header and
menu now look like Figure
17-12
.
