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 .
Search WWH ::

Custom Search