SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Stupid nav!

  1. #1
    Non-Member c1vineoflife's Avatar
    Join Date
    Sep 2004
    Location
    CA
    Posts
    460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Stupid nav!

    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.

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    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?

  3. #3
    Non-Member c1vineoflife's Avatar
    Join Date
    Sep 2004
    Location
    CA
    Posts
    460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote 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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •