Patrick’s development blog

Creating a horizontal CSS navigation using lists

Posted in Webdesign by Patrick on March 3, 2008

Here follows an example of creating a horizontal navigation bar using CSS. I’ve marked the mandatory lines, the rest are just for the looks that I added.

<html>
<head>
<title>Horizontal navigation bar</title>
<style type=”text/css”>
body {
font-family: arial;
font-size: 12px;
}

#nav {
width: 900px;
height: 100px;
background: #dddddd;
border: 1px solid #000000;
padding: 7px;
}

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

#nav li {
float: left;
}

#nav a {
background: #555557;
border: 1px solid #333333;
color: #ffffff;
padding: 5px 35px 5px 35px;
display: block;
margin: 1px;
}

#nav a:hover {
background: #777777;
}
</style>
</head>

<body>

<div id=”nav”>
<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 1</a></li>
</ul>
</div>

</body>
</html>

Advertisements
Tagged with: , , , ,

One Response

Subscribe to comments with RSS.

  1. jelthure said, on July 16, 2008 at 11:13 pm

    Here’s a tutorial I wrote that you might find useful. http://blog.jelthure.com/code/horizontal-navigation-a-how-to-xhtml-css-sprite/


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: