I love lists

by James MacFarlane

This page is about learning two important web skills: CSS and semantic HTML. Mastering lists will give you insights into how to make your web pages look great as well as how to make them make sense to screen readers and bots.

Semantic HTML

This is simply an application of existing HTML principles with the focus on providing structural and contextual meaning to your markup. This can help you write cleaner, more meaningful code while at the same time making your page easier to understand for screen-readers as search bots.

Lists are awesome

A list can be a group of elements that share a common purpose, structure or meaning. A shoppling list is a list, a menu is a list, a series of thumbnail images can also be a list. A tab interface can also be a list.

Getting started

One important step to mastering lists is to ensure they behave the same across browsers. Resetting the default properties of lists is essential because different browsers come with different decault CSS settings for lists. At the top of your stylesheet, reset your lists like this. You'll end up with no bullets, which is great for layout, but not always useful for content, but we'll deal with that later.

ol,ul {
   list-style:none;
   margin:0;
   padding:0
}

Padding v.s. Margin

One of the single most important features of CSS is the box model. Understanding how the box model works is cricial to most CSS endevours. Can you see the difference in thes examples?.

No, you probably can't see the difference. From a visual standpoint there is none. Once we start to make the boxes containing our menu visible, the difference is obvious. Padding goes inside the box, margin goes outside the box. You use one to make your boxes bigger and the other to space them apart. There is one trick to this: using block elements instead of inline elements, which will be described in the next section.

Simple menus

One of the best and most common uses for lists is to build menus. An important note here is that you need to style the anchor tags in the menus, not the lists themselves. This is pretty easy once you understand the difference between inline elements and block elements.

In order to make our anchor tags behave the way we need for a menu, we need to make them behave as block elements. We also need to set this behaviour to only be this way in the context of our menu.

CSS:

.simpleMenu ul li a {
   display:block
}
.simpleMenuDeluxe ul {
   margin-top:5px;
   margin-left:5px;
}
.simpleMenuDeluxe ul li a {
   display:block;
   background-color:#1b1464;
}

.simpleMenuDeluxeHover ul li a:hover {
   background-color:#3024b0;
   font-weight:bold;
}



HTML:

<div class="simpleMenu">
   <ul>
      <li><a> href="">One</a></li>
      <li><a> href="">Two</a></li>
      <li><a> href="">Three</a></li>
   </ul>
</div>

Custom bullets

Sometimes you want a list of items that has graphical bullets. The first reaction to this is often to use list-style:image. Unfortunately list-style:image offers little control over the positioning of the bullet item, and depending on the proportions of the graphic and font size used the desired results are often impossible to achieve. Fortunately CSS give us much more control over this issue by using the background-image property.

How this CSS background works, step by step:

Why are we using this? padding-left:30px
margin-left:-30px

CSS backgrounds are applied to the entire element, including the area described by margin and padding. By adding padding-left, are are shoving the contents of the box over by 30 pixels (the size of our image). At the same time we are moving the boundary of the box left by the same amount. This allows the background to hang to the left of the contents.

Finally, we'll add some padding top and bottom to stop the image from being covered.

Custom backgrounds

Backgrounds work pretty well the same way custom bullets do, except the images are designed to cover the entire element.

Horizontal menus

Making a vertical menu into a horizontal menu is easy. The list items (LI tag) are floated-left. This uses the same CSS as Simple menu deluxe with the addition of the left-floating elements.

Just add a margin-right to the A class to add a gap.

Simple text menus can also take advantage of this same technique. I this case, a right border is added as a divider.