DIV has a full link

**Kanustep** · Oct 14, 2007, 13:36

Hello,

I have a list like this one:

I want to make this div working like a full link, so people will click inside the blue square will follow the link. How do I do that in CSS?

Thank you in advance.

**taliesinnz** · Oct 14, 2007, 14:20

What happens if you put the <div> tag inside the <a> tag

**Dan Schulz** · Oct 14, 2007, 16:33

The HTML no longer becomes valid since you cannot have a block level element (like a DIV) inside an inline one (like an anchor).

**Kanustep** · Oct 14, 2007, 16:48

I found the example in Veerle site: http://veerle.duoh.com/

It seems to be valid.

**DaveWoods** · Oct 15, 2007, 00:26

I'm not sure without seeing the fullcode but you can usually achieve this by changing the <a> to a block level element

Code:

a {
  display: block;
}

Obviously you'll probably need to target the individual <a> so put an ID on the container of the <div> or <ul> and use that so that display: block; isn't applied to the entire page/site.

**Kanustep** · Oct 16, 2007, 03:21

Yes you are right, sorry here is the code:

Code CSS:

.list {
	margin:-12px 0px 0px 0px;
	padding:0px;
	list-style:none;
}
.list a {
	text-decoration:none;
	font-size:1.25em;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#64680f !important;
}
.list a:hover {
	text-decoration:underline;
}
.list li {
	background:url(../images/border.gif) bottom repeat-x;
	padding:8px 0px;
}
.list .last {
	background:none;
}

And the HTML is:

Code HTML4Strict:

<ul class="list">
						<li><a href="#" accesskey="e" title="#">M&eacute;todos de <span class="uline">E</span>nvio e Pagamento</a></li>
						<li><a href="#" accesskey="d" title="#">Con<span class="uline">d</span>i&ccedil;&otilde;es de Servi&ccedil;o</a></li>
						<li><a href="#" accesskey="p" title="#"><span class="uline">P</span>olitica de Privacidade</a></li>
						<li><a href="#" accesskey="a" title="#"><span class="uline">A</span>juda</a></li>
						<li class="last"><a href="#" accesskey="t" title="#">Con<span class="uline">t</span>acto</a></li>
					</ul>

I have put a bg like Veerle's example but not able to put li has a entire link.

**Tyssen** · Oct 16, 2007, 03:29

Dave already gave you the answer.

**DaveWoods** · Oct 16, 2007, 03:31

This should work. Just apply display: block; to the <a> and apply the background and padding to this instead of the <li>

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Demo</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0;	
}
.list {
    list-style:none;
    padding-left: 25px;
}
.list a, .list a:link {
    text-decoration: none;
    font-size:1.25em;
    font-family: verdana, arial, helvetica, sans-serif;
    color:#64680f;
    display: block;
    background:url(../images/border.gif) bottom repeat-x;
    padding:8px 0px;
}
.list a:hover {
    text-decoration:underline;
}
.list .last a, .list .last a:hover  {
    background:none;
}
</style>
</head>
<body>
<ul class="list">
	<li><a href="#" accesskey="e" title="#">M&eacute;todos de <span class="uline">E</span>nvio e Pagamento</a></li>
	<li><a href="#" accesskey="d" title="#">Con<span class="uline">d</span>i&ccedil;&otilde;es de Servi&ccedil;o</a></li>
	<li><a href="#" accesskey="p" title="#"><span class="uline">P</span>olitica de Privacidade</a></li>
	<li><a href="#" accesskey="a" title="#"><span class="uline">A</span>juda</a></li>
	<li class="last"><a href="#" accesskey="t" title="#">Con<span class="uline">t</span>acto</a></li>
</ul>
</body>
</html>

I can't see the background image so not sure if it's exactly how you want it but it should work.

**Kanustep** · Oct 18, 2007, 20:04

Sorry csswiz only notice now your answer on the topic.

Thank you for your helping. I will try your solution.

Again, thank you all for the help.

The SitePoint Forums have moved.

User Tag List

Thread: DIV has a full link

Thread Tools

Display

DIV has a full link

Bookmarks

Bookmarks

Posting Permissions