CSS Basics: List Properties II and a Horizontal Menu

Last week I wrote about the specific CSS list properties. This week I’m going to cover some of the positioning properties that are useful with lists but can be used with other html elements as well.

Margins and Padding

Every element can have both a margin and padding given to it, i.e.

Here the element ends at the border, then the margin is the spacing outside of the border, and the padding is the spacing between the border and the content.

Both properties are similar to use. For example with the margin property you can use

ul {
    margin-top: 10px;
    margin-right: 0;
    margin-bottom: 5px;
    margin-left: 20px;
}

Or you can use the shorthand version:

ul {
    margin: 10px 0 5px 20px;
}

As explained before on HTML Basics: Images, the margin property can accept 1, 2, 3 or 4 values:

• 1 value: Sets the margin for all sides ie. the top, right, bottom and left margins.
• 2 values: The first value sets the top and bottom margins, the second sets the left and right margins.
• 3 values: The first value sets the top margin, the second sets the left and right margin, the third sets the bottom margin.
• 4 values: Sets the margin values in the order top right bottom left.

To use the padding property, you use virtually the same property except you swap ‘margin’ with ‘padding’ eg.

ul {
    padding: 10px 0 5px 20px;
}
li {
    padding-top: 5px;
}

By default lists have a predefined amount of margin and padding, so these are two properties that you’ll often want to alter in your CSS to get them to fit into your design.

Box Model image courtesy of David Anderson.

Horizontal Menu

Lists are often used (and rightly so!) for navigation, however the horizontal navigation is often a bit tricky for some, when the basics are fairly straightforward. First of all, we need a menu eg.

<div class="nav">
    <ul>
        <li class="current_page_item"><a href="http://www.bloggingtips.com/" title="Blogging Tips">Home</a></li>
        <li class="page_item page_item_3"><a href="http://www.bloggingtips.com/forums/">Forums</a></li>
        <li class="page_item page_item_8"><a href="http://www.bloggingtips.com/forums/local_links.php">Directory</a></li>
	<li class="page_item page_item_7"><a href="http://www.bloggingtips.com/themes/">Themes</a></li>
    </ul>
</div>

Then we need to remove the bullets from the menu, and remove the margin and padding, so that we can start with a clean slate. To do this we use

#nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

Finally we need to give each list item a width and then we use the float property, which allows us to float each list item next to each other (the float property will be explained in depth in the future). To do this we can use the following CSS

#nav li {
    float: left;
    width: 100px;
}

And from a basic point of view, that’s all there is to it! The code above gives each list item a width of 100 pixels, and then using the float property with a value of left, each item gets floated left, then the next item is positioned next to it. You can see this in action on the basic menu example.

Of course, this doesn’t look very pretty, so we can jazz this up a little with the following CSS

#nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#nav li {
    float: left;
    width: 75px;
    margin: 0 1px;
    background: #900;
    text-align: center;
    border: 1px solid #009;
}
#nav a {
    color: #fff;
    display: block;
    text-decoration: none;
    padding: 2px 0 3px;
}
#nav a:hover {
    background: #000;
}

Here I’ve added some extra styles to the list item, to put a slight gap between each item using the margin property, given the list items a background colour and border to give it a more button look. Then for the links they’ve had the colour changed to white, the underline removed and have a bit of padding. I’ve also used display: block, which we’ve not used before. This changes the link from inline, meaning just the text is clickable, to making the whole containing element (ie. the list item in this case) clickable. It makes the link more of a button. As a final touch I’ve set the background of the link to change on hover.

You can see this example in the second menu example.

As you can see, the posts from the past few weeks on the HTML and CSS Basics are starting to give us enough to be able to understand and create some intermediate solutions

Written by Sarah from Stuff By Sarah
Posted on January 1st, 2009 and filed under CSS
Do not forget to subscribe to our RSS feed for updates

3