Stupid nav!

**c1vineoflife** · Nov 7, 2004 21:07

Hey all! Well, I'm having another problem:

I'm trying to get my navbar to look like this:

And well...it's not. I want the numbers ( 01, 02, 03, 04, 05 ) to just be markers that dont do anything, and I want the words ( item 1, item 2, etc... ) the be links. This is my code so far:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Stupid Nav Won't Work!
</title>

<style type="text/css">

body {
	margin: 0px;
	padding: 0px;
}

#nav {
	position: absolute;
	right: 4px;
	top: 4px;
}

#ul {
	list-style-type: none;
	text-align: center;
}

#nav ul li {
	border-left: 1px solid #666;
	display: inline;
	padding: 4px;
	width: 80px;
}

#nav ul li ul {
	display: block;
	float: left;
}

#nav ul li a {
	line-height: 18pt;
}

#nav ul li .number {
	color: #666;
	font: small-caps 14pt/15pt arial, verdana, helvetica, sans-serif;
}

#nav ul li .word {
	font: small-caps 9pt/10pt arial, verdana, helvetica, sans-serif;
}

#nav ul li a {
	color: #666;
	text-decoration: none;
}

#nav ul li a:hover {
	color: #222;
	text-decoration: none;
}

</style>

</head>
<body>

<div id="nav">
<ul>
 <li><span class="number">01</span> <span class="word"><a href="#">Item 1</a></span></li>
 <li><span class="number">02</span> <span class="word"><a href="#">Item 2</a></span></li>
 <li><span class="number">03</span> <span class="word"><a href="#">Item 3</a></span></li>
 <li><span class="number">04</span> <span class="word"><a href="#">Item 4</a></span></li>
 <li><span class="number">05</span> <span class="word"><a href="#">Item 5</a></span></li>
</ul>
</div>

</body>
</html>

Gah, I'm so confused.

**Egor** · Nov 7, 2004 23:51

So you want the top numbers to not be links when clicked?

I think you would need to make the .number and the #nav ul li a both block and say your li is 60px high, then make the .number display: block; height: 30px; and the same for the #nav ul li a. I don't see why you need to wrap the links in another span?

**c1vineoflife** · Nov 8, 2004 01:05

Originally Posted by mstwntd

So you want the top numbers to not be links when clicked?

I think you would need to make the .number and the #nav ul li a both block and say your li is 60px high, then make the .number display: block; height: 30px; and the same for the #nav ul li a. I don't see why you need to wrap the links in another span?

I don't know either. I'm just so confused. Thanks for the help though. I'm gonna try that right now.

Well, I tried it and it just lined them all up on the right.

User Tag List

Thread: Stupid nav!

Thread Tools

Display

Stupid nav!

Bookmarks

Bookmarks

Posting Permissions