| home / programming / css_10 / 1 |    [previous][next] |
|
|
|
The first step in styling the heading is to set a background color. You can use background: #D36832. The color can then be set to #fff.
Next, padding: 20px can be applied to create some space around the <h1> content.
You will then need to set margin: 0 to remove the default top and bottom margins.
You also can add a border to the bottom of the <h1> element using the shorthand border: 5px solid #387A9B; as shown in Listing 19.5. The results can be seen in Figure 19.4.
To position the #nav container and #content container beside each other,
they will both need to be floated.
To float the #nav container, use float: left. You also will need to set a
width, which in this case will be 130px.
Internet Explorer 5 and 5.5 for Windows will sometimes display margins
at double the specified width in certain circumstances. This Double
Margin Float Bug is explained in Lesson 11, “Positioning an Image and
Its Caption.” The bug can be fixed by setting the floated item to display:
inline. All other browsers will ignore this declaration, but Internet
Explorer 5 and 5.5 for Windows will then apply the correct margin width.
Now that the margins will display correctly in all recent browsers, you
can apply margin-left: 20px.
Finally, padding needs to be applied to the top and bottom of the container.
Here, you will need to use padding: 15px 0 as shown in Listing
19.6. The results can be seen in Figure 19.5.
Both the margins and padding of the <ul> need to be set to 0 to remove
any browser default styling.
To remove list bullets, use list-style-type: none.
The list items will need to be aligned against the right edge of the #nav container. This can be achieved using text-align: right as shown in
Listing 19.7. The results can be seen in Figure 19.6.
The list items will now have a background image applied to them to act as
a bullet. You will use background: url(header-bullet.gif) no-repeat
100% .4em; to place the background image against the right edge of the <li> element, and .4em from the top. The image is also set to no-repeat,
so it does not repeat across the entire <li> element.
Padding can then be applied to the right edge and bottom of the <li>. The
right padding will move the list content away from the edge so that it does
not appear over the top of the background image. The bottom padding is
used to provide some space between list items as shown in Listing 19.8.
The results can be seen in Figure 19.7.
| 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
