In the first tutorial of the series, CSS Positioning, we build a basic, table-less structure for a two-column webpage. In this post, we’ll add what every webpage needs: navigation.
Some designers prefer to add an additional <div> and identify it as “nav” or “navigation” using a class or id. Since almost all navigation bars I’ve seen styled with CSS use an unordered list, <ul>, I like to style that directly, rather than adding the additional <div>.
From the first tutorial, we have the following page structure:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 strict//EN”>
<html>
<head>
<title>CSS Test</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<link href=”test.css” rel=”stylesheet” type=”text/css”>
</head>
<body><div id=”wrapper”>
<div id=”header”></div>
<div id=”column1″>
</div><div id=”column2″>
</div><div id=”footer”></div>
</div>
</body>
</html>
Now we will add our unordered list to column one, between the <div></div>
tags:
<ul id=”nav”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Nothing</a></li>
</ul>
Now to style our list into a standard navigation menu. First we’ll take the unslightly list attributes from the <ul> tag itself:
ul#nav{
list-style: none;
padding: 0px;
margin: 0px;
}
Setting the list-style to none removes the bullet, and setting padding and margins to 0px removes the indent.
I’m going to ignore the <li> tag and style the link <a> tag directly. I do this to take advantage of a:hover to change the links background on rollover:
ul#nav li a{
display: block;
padding:5px;
margin: 1px;
border: 1px solid white;
width: 100px;
height: 20px;
background: #333333;
color: white;
text-decoration: none;
}
First we style the link as a block, so the browser will treat the element like we want it to, as a rectangular button. We style the appearance of the element as we would any box. Finally we remove the link’s underline by setting text-decoration:none.
All that’s left is to set the rollover using a:hover. The only thing we want to change is the background color, so all we have to do is this:
ul#nav li a:hover{
background: #666666;
}
Now fill your content column with text, and you have a table-less, two column webpage, displayed using css.
#1 by Anonymous - April 21st, 2008 at 18:31
Hi Napkin,
Thanks for finishing the reminder of the tutorial. It was really nice.
Could you please tell me how can I move the navigation links to the top bottom, right hand corner of the header?
I want to display the links like this rather than on the lefthand column.
Home | About Us | Contact Us
I created another division inside the header called div id=”nav”.
When I applied the css style for the nav div, it is only going to the far right hand side not at the place where I wanted this links to be.
I would appreciate if you can shed some lights on this.
Thanks,
Regards,
KK
#2 by Bottlecap Napkin - April 21st, 2008 at 20:57
Aha! I knew you were going to ask that. It’s a pain to put the code in the comment, so I’ll reply in another post.