-5

I have a nav list. I want the lighter gray area to be clickable as a link as opposed to just the text. The source is:

http://mattcdecker.comeze.com/HELP/

<nav>
    <a href="http://mattcdecker.comeze.com/" title="Visit the homepage."></a>
    <ul>
        <a href="http://mattcdecker.comeze.com/" title="Visit the homepage."></a>
        <li><a href="http://mattcdecker.comeze.com/" title="Visit the homepage."></a><a href="work.php" title="View my work.">Work</a></li>
        <li><a href="about.php" title="Learn about me.">About</a></li>
        <li><a href="contact.php" title="Send me a message!">Contact</a></li>
    </ul>
</nav>

CSS

nav{
    float:right;
}
nav li{
    float:left;
    text-transform:uppercase;
    font-size:24px;
    background:#333;
    margin:70px 10px 0 10px;
    padding:10px;
}
nav a{
    color:#666;
}
nav a:hover{
    color:#fff;
}
Popnoodles
  • 28,090
  • 2
  • 45
  • 53
Matt Decker
  • 1
  • 2
  • 1
    Please remember to include your source code in the question and explain what you've tried so far, it makes it easier for us to help you. – StackExchange What The Heck Dec 20 '13 at 22:39
  • Can't you just right-click on the page and view the css that way as well? – Matt Decker Dec 20 '13 at 22:40
  • Interesting you bring that up, Matt. I tried to, but my employer thinks your domain is malicious. Don't know if they're right or not, but the solution is what we ask anyway, for all questions - copy the relevant code here. – Michael Petrotta Dec 20 '13 at 22:41
  • Don't particularly want to just follow your link, but assuming you are describing a div with a link inside of it, this might help http://stackoverflow.com/questions/796087/make-a-div-into-a-link – Jordan Dec 20 '13 at 22:42
  • @MattDecker Yes but it's not how things are done. What if the site disappears - that makes this question totally useless to any future visitors. Questions aren't just for the individuals who post them. – Popnoodles Dec 20 '13 at 22:42

1 Answers1

2

Please post code, not a link.

You need to move the padding from the list element to the anchor, and also add display:block to the anchor.

nav li {
    float: left;
    text-transform: uppercase;
    font-size: 24px;
    background: #333;
    margin: 70px 10px 0 10px;
    padding: 0;
}

nav a {
    color: #666;
    display: block;
    padding: 10px;
}

The issue you have is that your nav HTML is malformed so won't display properly.

<nav>
    <a href="http://mattcdecker.comeze.com/" title="Visit the homepage."></a>
    <!-- ^ this probably doesn't belong here -->
    <ul>
        <a href="http://mattcdecker.comeze.com/" title="Visit the homepage."></a>
        <!-- ^ this certainly doesn't belong here -->
Popnoodles
  • 28,090
  • 2
  • 45
  • 53