Home arrow Style Sheets arrow Styling HTML Lists with CSS: Resetting Padding and Margins
STYLE SHEETS

Styling HTML Lists with CSS: Resetting Padding and Margins


In this first part of the series on styling HTML lists with CSS, I explain how to reset their padding and margins. The entire styling process is very easy to follow.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 3
August 30, 2010
TABLE OF CONTENTS:
  1. · Styling HTML Lists with CSS: Resetting Padding and Margins
  2. · Giving a consistent look: resetting padding and margins

print this article
SEARCH DEVARTICLES

Styling HTML Lists with CSS: Resetting Padding and Margins
(Page 1 of 2 )

Itís time to face it: when you design your web pages, sooner or later youíll start working with lists (either in their unordered or ordered versions). They are one of the most common HTML elements, and one of the first things that you learn to use. Whatís more, you probably take it for granted that you know every single detail about them. But ask yourself the following question: are you really sure that your lists are styled correctly? And Iím saying this because sometimes it is a bit tricky to give them a consistent look across several browsers, considering the great variety that exist nowadays.

Well, if you no longer feel so confident about how youíre currently defining the visual presentation of your web page lists, donít worry. In this series of articles Iím going to explain how to provide HTML lists with an engaging visual presentation via CSS. I'll start with some basic stuff, such as assigning values to margins and padding, and replacing default bullets with appealing background images. I'll move on to more complex things, like building accessible navigation bars in a snap.

Does my proposal sound attractive to you? Then itís time to start learning how to make HTML lists look pleasant to the human eye by using only a few simple CSS styles. Letís get going!

Getting started: building a basic, unpolished HTML list

Considering that the goal of this series is to progressively demonstrate how to polish the visual presentation of HTML lists with CSS, the first step is to create one that can be used for testing purposes. In consonance with this requirement, below I defined a simple web page, which contains an unordered list of links. Hereís the page: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample list with default styles</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #fff;
    font: 0.9em Arial, Helvetica, sans-serif;
    color: #000;
}
p {
    margin: 0 0 10px 0;
}
#wrapper {
    width: 960px;
    margin: 0 auto;
}
#header, #content, #footer {
    padding: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Sample list with default styles</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
    </div>
    <div id="content">
        <h2>Main content section</h2>
        <ul id="sample_list">
            <li><a href="#">List Item 1</a></li>
            <li><a href="#">List Item 2</a></li>
            <li><a href="#">List Item 3</a></li>
            <li><a href="#">List Item 4</a></li>
            <li><a href="#">List Item 5</a></li>
            <li><a href="#">List Item 6</a></li>
            <li><a href="#">List Item 7</a></li>
            <li><a href="#">List Item 8</a></li>
        </ul>
    </div>
    <div id="footer">
        <h2>Footer section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
    </div>
</div>
</body>
</html>

Definitely, coding an unordered HTML list like the one shown above is something that youíve probably done hundreds of times before. In this case, the example list has been used as a wrapper for a set of links, simply to create a more realistic scenario; but naturally this structure is optional, so feel free to replace it with the one that better suits your needs.

So far, so good. At this point, if you give the previous example a try using your own browser, you should get a partial output similar to the one depicted by the following screen capture:

Well, even though the default appearance of the list is fairly acceptable, it still suffers from some serious inconsistency issues. Most modern browsers tend to assign disparate margins and padding to the bulleted items, and even display the bullets in a different way.

But as youíll surely know, CSS makes resetting the padding and margins of lists a breeze. However, the best way to understand this process is by example, so in the next section Iím going to add a couple of basic styles to the previous HTML list that will set its default padding and margins to 0.

To see how this will be done, click on the link below and keep reading.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials