Home arrow Style Sheets arrow Page 2 - Styling HTML Lists with CSS: Manipulating Padding and Margins at the Same Time
STYLE SHEETS

Styling HTML Lists with CSS: Manipulating Padding and Margins at the Same Time


In this third part of a series, I demonstrate how easy it is to manipulate simultaneously the padding and margins of an HTML list with CSS. In fact, the process is so simple that you shouldn’t have major trouble replicating it when designing your own web pages.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 7
September 01, 2010
TABLE OF CONTENTS:
  1. · Styling HTML Lists with CSS: Manipulating Padding and Margins at the Same Time
  2. · Altering padding and margins at the same time

print this article
SEARCH DEVARTICLES

Styling HTML Lists with CSS: Manipulating Padding and Margins at the Same Time - Altering padding and margins at the same time
(Page 2 of 2 )

Definitely, one of the most common approaches used for more precisely positioning an element on a web page (or even inside of its parent container) is to assign values to its “padding” and “margin” properties at the same time. Logically, this approach can be used with HTML lists with satisfactory results as well. What’s more, the example below shows how to achieve this in a nutshell with the sample list coded previously:

ul#sample_list {
    padding: 0 20px;
    margin: 0 20px;
}

If you ever thought that altering the padding and margins of a list was a difficult process, then feel free to take a deep breath and relax; the above code snippet demonstrates exactly the opposite! In this case, the target list has been shifted only 40px to its left, but naturally it’s possible to manipulate the properties in the way that best suits your requirements.

Even though it’s fair to say that setting the position of an HTML list by manipulating its padding and margins at the same time is a considerable breakthrough, there are still many aspects that need to be covered on the way to achieving total control of its visual presentation.

But I’m getting ahead of myself; these topics will be discussed in depth in upcoming chapters of this series. For now, the only thing that remains is to include the CSS styles just defined in a web page, so you can see how the sample list looks after implementing these changes.

This will be done below, so read the next few lines.

Including the CSS code in a web page

If you want to see how the CSS styles defined in the earlier section affect the appearance of their associated HTML list, simply look at the following web page, which displays the list in its new position on screen:

<!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 padding-left and margin-left set to 20px</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;
}
ul#sample_list {
    padding: 0 20px;
    margin: 0 20px;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Sample list with padding-left and margin-left set to 20px</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>

Well, at this point you have at your disposal a functional example that can be easily tested using different browsers. This testing will hopefully give you a more accurate idea of how to alter the padding and margins of an HTML list in one go. And speaking of browsers, here’s how the previous list looks when rendered by Firefox:

That looks much better, right? Although admittedly the topics covered so far are pretty basic, the truth is that I’m only scratching the surface of defining the visual presentation of lists with CSS. However, the examples developed so far should keep you entertained long enough, so go ahead and start playing with them. It’ll be a fun experience, trust me.

Final thoughts

That's all for now. In this third episode of the series, I demonstrated how easy it is to manipulate simultaneously the padding and margins of an HTML list with CSS. In fact, the process is so simple that you shouldn’t have major trouble replicating it when designing your own web pages.

In the next chapter, things will become just a little bit more complex. I'm going to explain how to define the visual appearance of the bullets of a sample list. Curious to learn how this will be done in a few easy steps? Then, don’t miss the upcoming tutorial!


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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