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!
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.
<!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.
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?
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)?
<div class="headline2">
<div class="dummy"></div>
<div class="headline"><a href="http://www.hello.com">Link 1</a>
</div>
</div>
Thanks!
I meant do something like this:
<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)?
<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?
Thanks Paul! That makes a lot of sense.
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.
<!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:
<!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.
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.
<!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;
}
[COLOR="#FF0000"][B].headline label {
float: left;
z-index:3;
}[/B][/COLOR]
.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>
[COLOR="#FF0000"][B]<a href="http://www.yahoo.com"><label>Yahoo</label></a>[/B][/COLOR]
</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:
<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?
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.
.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:
<!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!
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!