Curyous Curyous - 4 months ago 18
CSS Question

How do I make the whole area of a list item in my navigation bar, clickable as a link?

I've got a horizontal navigation bar made from an unordered list, and each list item has a lot of padding to make it look nice, but the only area that works as a link is the text itself. How can I enable the user to click anywhere in the list item to active the link?

html:

<html>
<head>
<link type="text/css" rel="stylesheet" href="/stylesheets/test.css" />
<link rel="shortcut icon" href="/images/favicon.ico" >
</head>

<body>
<div id="nav">
<img src="/images/renderedicon.png" alt="Icon" height="57" width="57"/>
<ul>
<li><a href="#">One1</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<div>
<h2>Heading</h2>
</div>
</body>
</html>


css:

#nav {
background-color: #181818;
margin: 0px;
overflow: hidden;
}

#nav img {
float: left;
padding: 5px 10px;
margin-top:auto;
margin-bottom: auto;
vertical-align: bottom;
}

#nav ul {
list-style-type: none;
margin: 0px;
background-color: #181818;
float: left;
}

#nav li {
display: block;
float: left;
padding: 25px 10px;
}

#nav li:hover {
background-color: #785442;
}

#nav a {
color: white;
font-family: Helvetica, Arial, sans-serif;
text-decoration: none;
}

Answer

Don't put padding in the 'li' item. Instead set the anchor tag to display:inline-block; and apply padding to it.

Comments