HTML and CSS Reference
In-Depth Information
We're also floating the logo left and floating the navigation section to the right and aligning
these using margins and padding. Next we have the
<ul>
element along with its child
<li>
elements. The list-style property, which we apply to the
<ul>
, is a shorthand property that
defines the type of bullet we want to have on the list (the default value is “
disc
”), along
with the position of the bullet. We've added a value of “
none
” to the list and we've set the
margins and padding on the list to zero values, overriding the browser defaults for these.
Finally, in order to get the list items to align horizontally, we've set the list items to
dis-
play: inline-block
,andwe'veaddedahack(
therepeatedstylewiththeasteriskchar-
acter
)
to get this to work in IE7.
Figure 2.10
shows how the header will look after we've ad-
ded these styles.
Figure 2.10. Our header and navigation links after adding some layout styles
Laying out the Promo Photo
For the big promo photo that appears below the logo and navigation, there isn't too much to
do except get the photo description and “cook it now!” button to appear overlaid on top of
the big image.
Here's the HTML for our promo section:
<div class="promo center-global">
<img src="images/promo.jpg" alt="Zucchini Puree">
<div class="promo-desc">
<h1>Sweet and Sour Zucchini Puree</h1>
<a href="#" class="promo-btn">cook it now!</a>
</div>
</div>
