PDA

View Full Version : "empty" div clickable?



guermantes
Jan 21st, 2009, 07:35 PM
Hi,

Is it possible through HTML and CSS to make an empty DIV clickable if it has dimensions and a background image and 'displays as block', or does it have to contain text or another object that serves as the basis for setting up the link?

Thanks!

coothead
Jan 21st, 2009, 07:56 PM
Hi there guermantes,

here is an example...


<!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">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
#container {
width:360px;
height:280px;
border:3px double #000;
background-image:url(http://www.coothead.co.uk/images/banana.jpg);
background-repeat:no-repeat;
margin:auto;
}
#container a {
height:280px;
display:block;
}
#container a span {
display:none; /* this is for the benefit of those who have CSS disabled */
}
</style>

</head>
<body>

<div id="container">
<a href="http://www.codingforums.com/"><span>codingforums.com</span></a>
</div>

</body>
</html>

coothead

guermantes
Jan 21st, 2009, 08:18 PM
Thanks coothead!

(Some people actually turn CSS off? Under what circumstances, cell phone browsing?)

coothead
Jan 21st, 2009, 08:33 PM
Hi there guermantes,

if CSS is disabled the link will disappear without text.

I cannot say who has it disabled on a permanent basis but I would suggest that it is safer, when coding, to allow for all contingencies. ;)

coothead

rk88
Dec 1st, 2011, 01:35 AM
Hi, i know this thread is a few years old but I could not figure out how to start a new thread, so sorry if this inconveniences anyone. Just had a question regarding Coothead's css above, is it possible to adjust the positioning of it too? I want the empty div to be in the center of the page and 300px by 300px, but it seems to not move from the top left corner, even after adding 'top:10px; left: 10px;' attributes. I'm quite new to building websites so any help with this would be appreciated, thanks !

coothead
Dec 1st, 2011, 02:58 AM
Hi there rk88,

and a warm welcome to these forums. ;)

Have a look at this example, it may suit your requirements....


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>centered link</title>

<style type="text/css">
html,body {
height:100%;
margin:0;
background-color:#f0f0f0;
}
#vertical {
float:left;
height:50%;
margin-top:-151px;
}
#link {
clear:both;
width:300px;
height:300px;
border:1px solid #434487;
margin:auto;
box-shadow:#333 10px 10px 20px;
}
#link a,#link span {
position:relative;
display:block;
width:100%;
height:100%;
}
#link span {
position:absolute;
top:0;
left:0;
background-image:url('http://www.coothead.co.uk/images/ball_shad.jpg');
}
</style>

</head>
<body>

<div id="vertical"></div>

<div id="link">
<a href="http://www.codingforums.com/" title="link to site">codingforums.com<span></span></a>
</div>

</body>
</html>

coothead