Home arrow HTML arrow Page 2 - Styling HTML Lists with CSS: Building an Accessible Navigation Bar
HTML

Styling HTML Lists with CSS: Building an Accessible Navigation Bar


It's fairly simple to define the visual presentation of HTML lists with CSS, especially for experienced web designers. However, it can be an intimidating and sometimes painful process for those who are just starting to build highly semantic web sites. If you feel stuck styling lists, this article series presents a decent number of code examples, in a step-by-step fashion, that will help you give your lists an appealing look.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 6
September 21, 2010
TABLE OF CONTENTS:
  1. · Styling HTML Lists with CSS: Building an Accessible Navigation Bar
  2. · Using a horizontal list in a navigation bar

print this article
SEARCH DEVARTICLES

Styling HTML Lists with CSS: Building an Accessible Navigation Bar - Using a horizontal list in a navigation bar
(Page 2 of 2 )

Since my goal here is to construct an accessible links bar using a horizontal HTML list, we must first define the bar's structural markup. In this case, it'll be made up of a simple unordered list and will look as follows:

<!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>Horizontal navigation bar using an unordered list</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>Horizontal navigation bar using an unordered list</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="navbar">
            <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>

Unquestionably, understanding the structure of the above navigation bar is extremely simple. It uses a common unordered list to create a set of linked items, and that's it. For obvious reasons, the bar in its current state looks rather coarse and unpolished, as no visual styles have been assigned to it yet. So the next logical step is to turn the bar into a more appealing user interface through CSS.

This process will be discussed in detail in the following section. To learn more about it, just keep reading.

Adding some styles to the previous navigation bar

While in a previous section of this tutorial I explained how to create a horizontal list by using the "display" property, in this case I'm going to appeal to the functionality offered by CSS floats to create this sample navigation bar, as this approach is the one I feel more comfortable with.

Having clarified that point, here is the CSS code that will make the earlier unordered list look like a pretty engaging links bar:

ul#navbar {
    list-style: none;
    width: 800px;
    height: 50px;
    padding: 0;
    margin: 0;
}
ul#navbar li {
    float: left;
    width: 100px;
    height: 50px;
}
ul#navbar li a:link, ul#navbar li a:visited, ul#navbar li a:focus, ul#navbar li a:active {
    display: block;
    width: 100px;
    height: 35px;
    padding-top: 15px;
    background: #00f;
    color: #fff;
    text-decoration: none;
    text-align: center;
    border: 1px solid #000;
}
ul#navbar li a:hover {
    background: #80ffff;
    color: #000;
}

As you can see, the above CSS styles are only responsible for floating each item of the previous unordered list to the left, and for improving the visual presentation of the links in its different states. These styles must be included in the pertinent web page to create a functional navigation bar. So, here's the code fragment that accomplishes this:

<!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>Horizontal navigation bar using an unordered list</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#navbar {
    list-style: none;
    width: 800px;
    height: 50px;
    padding: 0;
    margin: 0;
}
ul#navbar li {
    float: left;
    width: 100px;
    height: 50px;
}
ul#navbar li a:link, ul#navbar li a:visited, ul#navbar li a:focus, ul#navbar li a:active {
    display: block;
    width: 100px;
    height: 35px;
    padding-top: 15px;
    background: #00f;
    color: #fff;
    text-decoration: none;
    text-align: center;
    border: 1px solid #000;
}
ul#navbar li a:hover {
    background: #80ffff;
    color: #000;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Horizontal navigation bar using an unordered list</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="navbar">
            <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>

There you have it. If you give this web page a try using your own browser, you should get an output similar to the one depicted by the following screen capture:

Well, as I think you'll agree with me, building an accessible navigation bar using a simple horizontal list with CSS is indeed a straightforward task. Of course, there are many other situations and cases where horizontal lists play a relevant role; however, the example just developed is definitely representative.

Final thoughts

It's hard to admit it, but we've come the end of this series. Hopefully the journey has been instructive and also fun, since you learned how to improve the look of HTML lists using CSS.

Since they're one of the elements used most frequently when defining the structure of a web page (along with divs, of course), mastering every facet of lists is a must, especially if you're a conscientious web designer.

Meet you in the next web design 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
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-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials