Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder Strider64's Avatar
    Join Date
    Dec 2011
    Thanked 33 Times in 33 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:
    <div id="nav">
            <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>
    Here is the CSS 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. #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Thanked 1,874 Times in 1,858 Posts
    Hello Strider64,
    Instead of underlining the text in your anchor, underline the anchor itself... like this -
    #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 a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  3. Users who have thanked Excavator for this post:

    Strider64 (01-28-2012)

  4. #3
    Regular Coder Strider64's Avatar
    Join Date
    Dec 2011
    Thanked 33 Times in 33 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