spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / programming / css_10 / 1 To page 1current pageTo page 3To page 4
[previous][next]

Technical Lead
Thomson Reuters (Markets) LLC
US-NY-New York

Justtechjobs.com Post A Job | Post A Resume
Developer News
Microsoft Shows Off Silverlight 4, IE9 Plans
Metasploit Expands Vulnerability Test Framework
HyperCard Reborn?


Sams Teach Yourself CSS in 10 Minutes
Chapter 19. Positioning Two Columns with a Header and a Footer

Styling the <h1> Element

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.

Styling the #nav Container

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.

Styling the <ul> Element

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.

Styling the <li> Element

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 To page 1current pageTo page 3To page 4
[previous][next]

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Rolling Out Your Own HTML Application Version Control · HTML 5: Client-side Storage · Working with Ajax Server Extensions
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Wi-Fi Product Watch, November 2009 · Chip Market Recovering From '08 Collapse · Low-Cost Tools to Kickstart Your New Business

Created: March 27, 2003
Revised: January 03, 2005

URL: http://webreference.com/programming/css_10/1