CODEWITHSUNDEEP
csshtmlhyperlinkhref
Dr. Owning
Dr. Owning

Reputation: 173

Clickable <a> tag background

I've made a nav menu with this code:

    <nav id="navitems">
        <ul>
            <li><a href="page1.html" id="link">PAGE 1</a></li>
            <li><a href="page2.html">PAGE 2</a></li>
        </ul>
    </nav>

I used CSS to make the links look like buttons and sit next to each other. However, I can only click the text to activate the link, not the background (button).

My question is: how can I make the grey area around the link also lead to the same link?

Upvotes: 1

Views: 176

Answers (2)

GluePear
GluePear

Reputation: 7715

An alternative to emmanuel's answer is to add some padding to the a tag:

ul {
    list-style-type:none;
}
li { 
    float:left;
}
a {
    background:grey;
    color:white;
    text-decoration:none;
    padding: 10px 20px 10px 20px;
    margin-right:1px;
}

See it in action here: http://jsfiddle.net/rufneu0w/1/

Upvotes: 2

emmanuel
emmanuel

Reputation: 9615

<a> elements by default displayed as inline. You should change it to block to occupy the entire space of its parent.

ul {
  list-style-type: none;
}
li {
  background: blue;
  width: 100px;
}
li a {
  background: orange;
  display: block;
}
<nav id="navitems">
  <ul>
    <li><a href="#" id="link">PAGE 1</a>
    </li>
    <li><a href="#">PAGE 2</a>
    </li>
  </ul>
</nav>

Upvotes: 3

Related Questions