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.
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.
HTML 
/ 5 
