Make Empty Part of Div a Link

**Pamela1991** · Sep 20, 2012 09:05

Hi all

I have a div container which contains other div's. Not only do I want the div's inside the container to be links of their own, but I also want the unused space of the container div to be a separate link. I tried messing with z-index, but that was real messy, and I even thought of doing something in PHP, but I really feel I'm complicating things and moreoever not accomplishing what I'm trying to do.

How can I do this?

Here's the jsfiddle.

Thanks!

**Paul O'B** · Sep 21, 2012 09:21

Hi,

You can absolutely position an empty anchor over the whole area of the div and that will mean the whitespace can be clicked as long as you ensure the other divs have a higher z-index/

e.g.

Code:

<!DOCTYPE HTML>
<html>
<head>
<title>Testing</title>
<meta charset="utf-8">
<link type="text/css" href="style.css" rel="stylesheet" media="all">
<title>Untitled Document</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html, body {
	background: #ccc;
	font: 13px/1.231 arial, helvetica, clean, sans-serif
}
body { text-align: center; }
#container {
	margin: 0 auto;
	width: 100%;
}
#header {
	background: #ccc;
	width: 100%;
	height: 100px;
}
#page {
	width: 100%;
	background: white;
	overflow: hidden;/*height: 1%;*/
	position:relative;
}
.headline1 {
	display: inline-block;
	position: relative;
	width: 25%;
	float: left;
	vertical-align: middle;
	line-height: 20;
	border: 3px solid black;
	background: #eee;
}
.headline2 {
	display: inline-block;
	position: relative;
	width: 12.5%;
	float: left;
	vertical-align: middle;
	line-height: 10;
	border: 3px solid black;
	background: #eee;
}
.dummy { margin-top: 100%; }
.headline {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
#page a{display:block;z-index:2;position:relative;}
#page a.white-space-link{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:1;	
}
</style>
</head>

<body>
<div id="container">
		<div id="header"> </div>
		<div id="page"> <a href="link1">
				<div class="headline1">
						<div class="dummy"></div>
						<div class="headline">Link 1 </div>
				</div>
				</a> <a href="link2">
				<div class="headline2">
						<div class="dummy"></div>
						<div class="headline">Link 2 </div>
				</div>
				</a> <a href="link3">
				<div class="headline2">
						<div class="dummy"></div>
						<div class="headline">Link 3 </div>
				</div>
				</a> 	
				<a class="white-space-link" href="http://www.google.com"></a>
			</div>
</div>
</body>
</html>

Of course I still hate that html5 allows anchors to surround divs and it is still buggy in some browsers. You must always ensure that when you do this that you set the anchor to display:block or funny things will happen. In the example above you should really move the float to the parent anchor and not on the inner element anyway as IE7 will be completely broken if you don't do that.

**Pamela1991** · Sep 21, 2012 11:04

Originally Posted by Paul O'B

In the example above you should really move the float to the parent anchor and not on the inner element anyway as IE7 will be completely broken if you don't do that.

Thanks so much Paul! It works brilliantly. I had been trying to do it with z-index's all over the place and it didn't even work for me, but your solution works so efficiently and easily!

I'm just a bit confused by what you mean about moving the float to the parent anchor. I thought .headline1/.headline2 were the parent anchors?

Originally Posted by Paul O'B

Of course I still hate that html5 allows anchors to surround divs and it is still buggy in some browsers.

So then this is the way you would recommend me doing this instead of surrounding the divs with anchors (it's working like this and looks much cleaner)?

Code:

<div class="headline2">
			<div class="dummy"></div>
			<div class="headline"><a href="http://www.hello.com">Link 1</a>
			</div>
		</div>

Thanks!

**Paul O'B** · Sep 21, 2012 11:42

Originally Posted by Pamela1991

I'm just a bit confused by what you mean about moving the float to the parent anchor. I thought .headline1/.headline2 were the parent anchors?

I meant do something like this:

Code:

<a  class="headline1" href="link1">
				<div>
						<div class="dummy"></div>
						<div class="headline">Link 1 </div>
				</div>
				</a>

The styles are applied to the anchor as that is the container now.

So then this is the way you would recommend me doing this instead of surrounding the divs with anchors (it's working like this and looks much cleaner)?

Code:

<div class="headline2">
			<div class="dummy"></div>
			<div class="headline"><a href="http://www.hello.com">Link 1</a>
			</div>
		</div>

Thanks!

It all depends whether you need block content inside your anchors or not. The benefit of the html5 way is that you can have semantic block elements inside your anchor whereas before html5 you would need to have used only inline containers such as spans. If the anchor contains no inner structured content then the old way is fine and setting the anchor to display:block makes it fill the parent div.

It also depends what your .dummy div is there for and whether you want that to be surrounded by the anchor as well?

**Pamela1991** · Sep 21, 2012 11:58

Originally Posted by Paul O'B

I meant do something like this:

Code:

<a  class="headline1" href="link1">
				<div>
						<div class="dummy"></div>
						<div class="headline">Link 1 </div>
				</div>
				</a>

The styles are applied to the anchor as that is the container now.

It all depends whether you need block content inside your anchors or not. The benefit of the html5 way is that you can have semantic block elements inside your anchor whereas before html5 you would need to have used only inline containers such as spans. If the anchor contains no inner structured content then the old way is fine and setting the anchor to display:block makes it fill the parent div.

Thanks Paul! That makes a lot of sense.

Originally Posted by Paul O'B

It also depends what your .dummy div is there for and whether you want that to be surrounded by the anchor as well?

Well, I put in the .dummy div because that was the only way I was able to make perfect squares. Did I over-complicate my code by using 3 divs (.headline1, .dummy, .headline) all just for the purpose of getting one perfect square?

**Paul O'B** · Sep 21, 2012 12:48

Originally Posted by Pamela1991

Well, I put in the .dummy div because that was the only way I was able to make perfect squares. Did I over-complicate my code by using 3 divs (.headline1, .dummy, .headline) all just for the purpose of getting one perfect square?

Ah ok, I see what you were doing.

You could do it like this then.

Code:

<!DOCTYPE HTML>
<html>
<head>
<title>Testing</title>
<meta charset="utf-8">
<link type="text/css" href="style.css" rel="stylesheet" media="all">
<title>Untitled Document</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html, body {
	background: #ccc;
	font: 13px/1.231 arial, helvetica, clean, sans-serif
}
body { text-align: center; }
#container {
	margin: 0 auto;
	width: 100%;
}
#header {
	background: #ccc;
	width: 100%;
	height: 100px;
}
#page {
	width: 100%;
	background: white;
	overflow: hidden;/*height: 1%;*/
	position:relative;
}
.headline {
	position: relative;
	width: 12.5%;
	float: left;
	border: 3px solid black;
	background: #eee;
	position:relative;
	z-index:2;
}
.head1 {width: 25%}
.headline b { margin-top: 100%;display:block;zoom:1.0}
.headline a {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
a.white-space-link{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:1;
}
span{
	position:relative;
	margin-top:50%;
	display:block;
}
</style>
</head>

<body>
<div id="container">
		<div id="header"> </div>
		<div id="page"> 
				<div class="headline head1">
						<b></b><a href="link1"><span>Link 1</span></a>
				</div>
				<div class="headline">
						<b></b><a href="link2"><span> Link 2</span></a>
				</div>
				<div class="headline">
						<b></b><a href="link3"><span> Link 3</span></a>
				</div>
				<a class="white-space-link" href="http://www.google.com"></a>
			</div>
</div>
</body>
</html>

That should work back to Ie7 (not ie6 though). If you only wanted ie8+ support then you could remove one element and do it like this:

Code:

<!DOCTYPE HTML>
<html>
<head>
<title>Testing</title>
<meta charset="utf-8">
<link type="text/css" href="style.css" rel="stylesheet" media="all">
<title>Untitled Document</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html, body {
	background: #ccc;
	font: 13px/1.231 arial, helvetica, clean, sans-serif
}
body { text-align: center; }
#container {
	margin: 0 auto;
	width: 100%;
}
#header {
	background: #ccc;
	width: 100%;
	height: 100px;
}
#page {
	width: 100%;
	background: white;
	overflow: hidden;/*height: 1%;*/
	position:relative;
}
.headline {
	position: relative;
	width: 12.5%;
	float: left;
	border: 3px solid black;
	background: #eee;
	position:relative;
	z-index:2;
}
.head1 {width: 25%}
.headline a {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.headline:after{
	content:" ";
	display:block;
	margin-top: 100%;		
}
a.white-space-link{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:1;
}
span{
	position:relative;
	margin-top:50%;
	display:block;
}
</style>
</head>

<body>
<div id="container">
		<div id="header"> </div>
		<div id="page"> 
				<div class="headline head1">
						<a href="link1"><span>Link 1</span></a>
				</div>
				<div class="headline">
						<a href="link2"><span> Link 2</span></a>
				</div>
				<div class="headline">
						<a href="link3"><span> Link 3</span></a>
				</div>
				<a class="white-space-link" href="http://www.google.com"></a>
			</div>
</div>
</body>
</html>

The inner span is only to move the link text to the middle and can also be removed if that isn't a requirement.

**Pamela1991** · Sep 21, 2012 14:12

Originally Posted by Paul O'B

Ah ok, I see what you were doing.

You could do it like this then.
...

Thanks Paul! Talk about efficiency!

Should I be designing with IE7 in mind?

To shake things up even further, I'm trying to add a third link to the scene, this one within/on top of the headline class. I'm giving it a z-index of 3, but it's giving the entire div this third link instead of just the text of the link.

Code:

<!DOCTYPE HTML>
<html>
<head>
<title>Testing</title>
<meta charset="utf-8">
<link type="text/css" href="style.css" rel="stylesheet" media="all">
<title>Untitled Document</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html, body {
	background: #ccc;
	font: 13px/1.231 arial, helvetica, clean, sans-serif
}
body { text-align: center; }
#container {
	margin: 0 auto;
	width: 100%;
}
#header {
	background: #ccc;
	width: 100%;
	height: 100px;
}
#page {
	width: 100%;
	background: white;
	overflow: hidden;/*height: 1%;*/
	position:relative;
}
.headline {
	position: relative;
	width: 12.5%;
	float: left;
	border: 3px solid black;
	background: #eee;
	position:relative;
	z-index:2;
}
.headline label {
	float: left;
	z-index:3;
}

.head1 {width: 25%}
.headline b { margin-top: 100%;display:block;zoom:1.0}
.headline a {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
a.white-space-link{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:1;
}
span{
	position:relative;
	margin-top:50%;
	display:block;
}
</style>
</head>

<body>
<div id="container">
		<div id="header"> </div>
		<div id="page"> 
				<div class="headline head1">
						<b></b><a href="link1"><span>Link 1</span></a>
						<a href="http://www.yahoo.com"><label>Yahoo</label></a>
				</div>
				<div class="headline">
						<b></b><a href="link2"><span> Link 2</span></a>
				</div>
				<div class="headline">
						<b></b><a href="link3"><span> Link 3</span></a>
				</div>
				<a class="white-space-link" href="http://www.google.com"></a>
			</div>
</div>
</body>
</html>

When I switch the HTML to this:

Code:

<a href="http://www.yahoo.com"><label>Yahoo</label></a>
						<b></b><a href="link1"><span>Link 1</span></a>

it puts the z-index of 3 behind the z-index of 2!

I thought I could just do the same thing you did for the z-index 2 to this one and have it appear on top of the previous z-index's but I don't know why it's not working?

**Paul O'B** · Sep 22, 2012 10:20

Originally Posted by Pamela1991

Thanks Paul! Talk about efficiency!

Should I be designing with IE7 in mind?

To shake things up even further, I'm trying to add a third link to the scene, this one within/on top of the headline class. I'm giving it a z-index of 3, but it's giving the entire div this third link instead of just the text of the link.

The anchors are set to take up the full space of the div so you can't have two links as one completely overlays the other.

Code:

.headline a {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

You would need to set a special case for one link so that it is smaller than the one underneath otherwise it will just cover it up completely.

**Pamela1991** · Sep 22, 2012 16:41

Originally Posted by Paul O'B

The anchors are set to take up the full space of the div so you can't have two links as one completely overlays the other.

Code:

.headline a {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

You would need to set a special case for one link so that it is smaller than the one underneath otherwise it will just cover it up completely.

Thanks Paul! I think I got it:

Code:

<!DOCTYPE HTML>
<html>
<head>
<title>Testing</title>
<meta charset="utf-8">
<link type="text/css" href="style.css" rel="stylesheet" media="all">
<title>Untitled Document</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html, body {
	background: #ccc;
	font: 13px/1.231 arial, helvetica, clean, sans-serif
}
body { text-align: center; }
#container {
	margin: 0 auto;
	width: 100%;
}
#header {
	background: #ccc;
	width: 100%;
	height: 100px;
}
#page {
	width: 100%;
	background: white;
	overflow: hidden;/*height: 1%;*/
	position:relative;
}
.headline {
	position: relative;
	width: 12.5%;
	float: left;
	border: 3px solid black;
	background: #eee;
	position:relative;
	z-index:2;
}
.headline label {
	position: absolute;
	top: 10;
	bottom: 0;
	left: 0;
	right: 10;
	z-index:3;
	cursor: pointer;
}

.head1 {width: 25%}
.headline b { margin-top: 100%;display:block;zoom:1.0}
.headline a {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
a.white-space-link{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:1;
}
span{
	position:relative;
	margin-top:50%;
	display:block;
}
</style>
</head>

<body>
<div id="container">
		<div id="header"> </div>
		<div id="page"> 
				<div class="headline head1">
						<a href="http://www.yahoo.com"><label>Yahoo</label></a>
						<b></b><a href="link1"><span>Link 1</span></a>
				</div>
				<div class="headline">
						<b></b><a href="link2"><span> Link 2</span></a>
				</div>
				<div class="headline">
						<b></b><a href="link3"><span> Link 3</span></a>
				</div>
				<a class="white-space-link" href="http://www.google.com"></a>
			</div>
</div>
</body>
</html>

The only anomaly I noticed was that I had to specify the cursor as a pointer (in .headline label), but I pinned this down to my use of "label" as when I changed it to a div/class, I didn't have to specify the pointer.

Thanks again, Paul, for your tremendous help!

**Paul O'B** · Sep 23, 2012 04:00

Originally Posted by Pamela1991

The only anomaly I noticed was that I had to specify the cursor as a pointer (in .headline label), but I pinned this down to my use of "label" as when I changed it to a div/class, I didn't have to specify the pointer.

Labels are special and should only be used to associate (or label) form controls. They should not be used outside of that context.
A span would have done the job although you would need to class it and differentiate the styles from the other span.

**Pamela1991** · Sep 23, 2012 14:51

Originally Posted by Paul O'B

Labels are special and should only be used to associate (or label) form controls. They should not be used outside of that context.
A span would have done the job although you would need to class it and differentiate the styles from the other span.

Thanks Paul! You've been enormously helpful!

User Tag List

Thread: Make Empty Part of Div a Link

Thread Tools

Display

Make Empty Part of Div a Link

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions