Putting it All Together - HTML5 with CSS3 - page 368

Figure 10-16. The completed new item box
Styling the Footer
The site's footer is nothing too elaborate. It features some secondary navigation, the company slogan, and
a copyright date—standard footer fare. We'll add a smaller version of the Power Outfitters logo but it's
strictly decorative here so we can use a background image and avoid any additional markup. The entire
footer will form a box with a border and background color, and we'll include some extra padding on the left
side to make room for the logo:
#site-info {
padding: 15px 30px 0 160px;
border: 2px solid #ffc307;
margin-top: 20px;
background: #fc0 url(../images/logo-small.png) 20px 15px no-repeat;
background-color: rgba(255,225,105,.8);
}
We've declared the background color twice: first in the shorthand background property with an opaque,
hexadecimal color value for older browsers, then overriding that with a second background-color
declaration providing a translucent, RGBA value for newer browsers.
The rest of the footer comes together quite simply, and you should be starting to get the hang of this by
now. We'll remove the default bullets for the navigation list and declare each list item should appear on the
same line with display:inline , overriding the default list item display. A modest right margin wedges
some extra space between the inline list items. We'll include just a few more rules styling the slogan and
copyright statement and we have ourselves a finished footer. Listing 10-23 shows the full set of CSS rules
and you can see the result in Figure 10-17.
Listing 10-23. The CSS rules that style the Power Outfitters footer
#site-info {
margin-top: 20px;
border: 2px solid #ffc307;
padding: 15px 30px 0 160px;