| home / programming / css_10 / 1 |    [previous] [next] |
|
|
|
The #content container needs to be set to float: left so that it sits
beside the #nav container. You also will need to set a width, which in this
case will be 475px.
To create a gutter between the two columns, use margin-left: 45px.
Finally, padding needs to be applied to the top and bottom of the container.
You will need to use padding: 15px 0 as shown in Listing 19.9. The results can be seen in Figure 19.8.
The #footer container is displayed after the #nav and #content containers.
Because these two containers are floated, there is a possibility that
the #footer container might try to sit beside them. This can be fixed
using the clear property on the #footer container. The four options are
clear: left, clear: right, clear: both, and clear: none.
Here you will use clear: both, which will force the #footer container to
sit below the two floated containers.
To set a background color, use background: #387A9B. The color can then
be set to #fff.
Next, padding can be used to create some space around the content. You
can apply 5px to the top and bottom, and 10px to the left and right edges
using padding: 5px 10px as shown in Listing 19.10.
To align the footer content to the right, use text-align: right.
Finally, the font size of the footer can be reduced because it is less important
information. You can use font-size: 80% as shown in Listing 19.10.
The results can be seen in Figure 19.9.
The <h2> element is used for the main heading on the page. Its top margin
needs to be removed so that the <h2> element lines up with the content in
the #nav container. This is achieved using margin-top: 0.
Next, the color can be changed using color: #B23B00.
Standard headings generally are displayed in bold text. You can override
this default behavior using font-weight: normal as shown in Listing
19.11. The results can be seen in Figure 19.10.
| home / programming / css_10 / 1 | [previous] [next] |
Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: March 27, 2003
Revised: January 03, 2005
URL: http://webreference.com/programming/css_10/1
