Home arrow HTML arrow Styling HTML Lists with CSS: using the Display and Float Properties
HTML

Styling HTML Lists with CSS: using the Display and Float Properties


Are you looking for an approachable guide that shows you how to provide your HTML lists with an engaging appearance, while keeping their consistency untouched across different browsers? If your answer is a resounding yes, then you should take look at this article series. In its parts you’ll learn not only how to make your web page lists look more attractive with CSS, but how to achieve this in a few simple steps.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 5
September 14, 2010
TABLE OF CONTENTS:
  1. · Styling HTML Lists with CSS: using the Display and Float Properties
  2. · Building a horizontal list using the display CSS property

print this article
SEARCH DEVARTICLES

Styling HTML Lists with CSS: using the Display and Float Properties
(Page 1 of 2 )

And now that you know what to expect from this series, it’s time to review the topics that were covered in the last part, in case you still haven’t read it for some reason. In the preceding installment I explained how to replace the default bullets assigned to the items of an unordered list with a custom background image.

Actually, I discussed two distinct approaches to performing the  replacement process. First I used the “list-style-image” CSS property, which is admittedly a quick and dirty option. Then I utilized a combination of the “padding” and “background” properties, as this method is the one that web designers use the most nowadays.

It’s valid to point out, however, that CSS makes it truly easy to build horizontal lists, even when these HTML elements are rendered vertically by default. Of course, the role that horizontal lists play in modern web design is so important that they deserve a close analysis. In keeping with this idea, in this penultimate part of the series I’m going to demonstrate how to built this type of list, first by using the “display” property and then by way of the venerable CSS floats.

Now, it’s time to leave the preliminaries behind us and start learning how to create horizontal HTML lists in a truly effortless fashion. Let’s go!  

Review: decorating the items of an HTML list with a custom background image

Before I begin discussing how to create some horizontal lists with CSS, I'd like to reintroduce one of the examples created in the previous part of the series. It was aimed at demonstrating how to decorate a basic unordered list with a custom background image.

In case you still haven’t had the chance to study the aforementioned example, below is its full source code. Look at it:

<!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 a background image</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 {
    margin: 0 20px;
    padding: 0 20px;
    list-style: none;
}
ul#sample_list li {
   padding: 0 0 0 20px;
   background: url(arrow_right.gif) 5px no-repeat;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Sample list with a background image</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>

As the above example shows, assigning a proprietary image to the items of an HTML list is a fairly straightforward process, which is reduced to combining the “padding” and “background” CSS properties and nothing else. In this particular case, the background graphic used to decorate the items in question is part of the icon set developed by the people of FAMFAMFAM, so feel free to stop by the site if you need to download some cool icons for free.

Naturally, the previous example wouldn’t be complete if I didn’t show you the output that it produces when displayed on the browser, so here’s an image that depicts this process pretty clearly:

So far, so good. Having illustrated how to spice up the items of HTML lists with custom icons, it’s time to explore some other ways to improve the visual appearance of these web page elements. So, as I stated in the introduction, in the next section I’m going to explain how to create a simple horizontal list by using the “display” CSS property.

Want to learn the full details of this styling process? Then hurry up and read the lines to come. 


blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

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