Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    63
    Thanks
    4
    Thanked 10 Times in 10 Posts

    Navigation Problem

    I'm doing a website for a client: Black Hawk Ranch and I am having problem with the links:

    I wand only an underline at the bottom of the navigation button, not all three lines like it is current doing.

    Here's the HTML Code:
    Code:
    <div id="nav">
          <ul>
            <li><a href="index.html"><span class="nav-style subselected">Black Hawk Ranch <br />
              Pictures <br/>
    
              The Saga Continues</span></a></li>
            <li><a href="#"><span class="nav-style">Black Hawk Ranch <br />
              Excavating <br />
              Mid Michigan Service</span></a></li>
            <li><a href="the-kids.html"><span class="nav-style">Pictures of <br />
              the Kids<br />
    
              Life's Little Miracles</span></a></li>
            <li><a href="#"><span class="nav-style">Let's Talk <br />
              Politics <br />
              Articles &amp; Commentary</span></a></li>
            <li><a href="#"><span class="nav-style">Ask <br />
    
              herbie.com <br />
              Advice from A to Z</span></a></li>
          </ul>
        </div>
    Here is the CSS Code:
    Code:
    #nav ul li a {
    	display: block;
    	width: 200px;
    	height: 50px;
    	font-family: Verdana, Geneva, sans-serif;
    		font-size: 12px;
    		font-weight: bold;
    		
    		color: #fff;
    		text-decoration: none;
    		text-align: left;
    	padding: 0px;
    	margin: 0px;
    }
    
    #nav ul li a:hover {
    		
    	text-decoration: underline;
    }
    I've tried a few things, but either it separates the trees too much or drops them down. If someone would be point me in the right direction, I would very much appreciate it. It's probably a simple solution and I probably will go duh when I see the fix. LOL

    Thanks John

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Strider64,
    Instead of underlining the text in your anchor, underline the anchor itself... like this -
    Code:
    #nav ul li a:hover {
    		
    	border-bottom: 1px solid #f00;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Strider64 (01-28-2012)

  • #3
    New Coder
    Join Date
    Dec 2011
    Posts
    63
    Thanks
    4
    Thanked 10 Times in 10 Posts
    Thanks Again, that solved the problem.


  •  

    Posting Permissions

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