Styling Navigation Links Using CSS

Article ID: KB101842

Last month, we moved past the CSS knowledge Level 2 mile marker by weighing a tables site against a CSS site (with the same look and layout). CSS was lighter, cleaner, and less complex overall.

Next, Level 3: "I've heard it's good, but I can't use it because of..."
People in this level know some CSS but something (a Level 2 boss, perhaps) keeps them from using CSS positioning.

Since the "something" can be different for everyone, this month I'll focus on entering the realm of CSS layout. More than just changing some colors and fonts, CSS layout involves setting dimensions and learning the "box model," which is where many newbies get lost. I think one of the best ways to approach this topic is by giving you a real-life and extremely practical example: Styling navigation links using CSS.

Let's start with what a navigation bar usually is: A navigation bar is, at its root, a list of links -- and usually the order of the links don't really matter. In HTML, we can represent a list by using the bulleted list element (<ul>). Here is my bulleted list of links in HTML, and I'm also applying a CSS class (as yet undefined) to the <ul> tag so that I can start manipulating it:

<ul class="menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>

Let's transform this boring list of links into a semi-interesting basic rectangular button that changes cover when you hover over it. First, let's make some basic edits to the list itself to get rid of the bullets and line all the text up against the left, with no margins or padding:

.menu {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

(This above code applies to the <ul class="menu"> itself. If you applied these same settings to just "ul," they would change every bulleted list in your site. That's why we target this specific list with the .menu class.)

Now, we want to target the links (<a>) with some styles. By targeting the links instead of the <li>, we have more control over the "hover" state. While current browsers allow for "hover" states on non-links (such as <li>), there are some older browsers that don't, namely IE6 and below. If you don't need to support IE6 and below, you can apply the rules that I'll discuss below to any other element, not just the <a> tag. For the purposes of this article, I'll stick with the old-school way of attaching styles to the links themselves.

First, I want my links to be a specific width and height. Links by default are inline elements as opposed to block elements. Block elements are things like paragraphs and headings that take up their own "box" area of content (usually with some default space before and after). Inline elements are things like links, bold text, and images that appear within paragraphs, headings, and other block elements. Block elements can have widths and heights; inline elements can't.

So my first bit of code is to turn the links into a block element, then apply dimensions. So that I don't affect every link in my site, I'm going to limit my style rule to only "link tags that show up inside the .menu class" (in CSS-speak, the selector would be .menu a). My next bit of code is to align the text, define the color of the text, add some padding above and below the text, then set a background color and border.

.menu a {
  display: block;
  width: 120px;
  height: 15px;
  text-align: center;
  color: #3366ff;
  padding-top: 3px;
  padding-bottom: 3px;
  background: #eeeeee;
  border: solid 1px #666666;
}

When dealing with dimensions, padding, and borders, it's important to talk about the CSS box model. CSS has a very specific way of how dimensions, padding, margins, and border amounts relate to each other. The "width" is for the actual area where the content fits into, and the padding, border, and margin amounts are added on outside of it. Why you might care about this (apart from understanding what specific numbers you should use) is that the code above will interpret differently in IE5 because of IE5's misinterpretation of dimensions. If you need to fix it for IE5, take a look at this support article which discusses a workaround. This can be an important issue when you get into layout, as well.

Now, let's make a hover effect where the background changes color when the user hovers over the button:

a:active, a:hover {
  background: #99ccff;
}

Here's what our buttons look like:

This article provides you with the bare-bones basics of understanding CSS dimensions and how they and other properties can be applied to turning a bulleted list of links into a simple navigation bar. However, there isn't space here to show you how much more can be done with CSS and navigation buttons. Here are some links to further resources:

• Use a "blank" button graphic as a background image behind the links so it looks like you have a graphic button. You can even handle rollovers using this method as well! This gives you a button background while still having easy-to-edit text within the HTML. Read Fast Rollovers Without Preload.
• See how you can turn a bulleted list of links into a CSS-formatted horizontal navigation bar. Read Turning a list into a navigation bar.
• See a few different examples of using only CSS to style links. Read Taming Lists.
• For advanced designs where you want custom graphics for each one of your button links, you can make a grid or matrix of all your navigation buttons in one graphic, and position it as a background image behind your links. On link hover, you simply move the background image to the "hover" image part of the matrix. Read Navigation Matrix Reloaded.
• I have a webinar that goes through some of these techniques that you can purchase for $20 to view. Sample files are included in the download. Go to Using CSS to Format Navigation Links webinar.

In next month's newsletter, I'll talk about why layers aren't necessarily good and different approaches to CSS-based page layouts.

---

Was this helpful?

Please rate this article:

Not helpful			Very helpful
1	2	3	4	5	6	7

Email address: (not required)

(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. You're email address is NOT REQUIRED to submit a comment.)

Comments: (How can we improve this article?)


Clicking "Submit" will not clear this page.

---

link to this page: http://www.pixelmill.com/support/al1121/kb101842.htm
permalink to this article: http://www.pixelmill.com/support/kb101842.htm

Back to top