Previous Message
Next Message

Making a div a link

Sent by Charles Wyke-Smith on 28 December 2004 22:10

Put a link inside the div and set the link's display property to block, so
it responds to being dimensioned instead of manifesting its inline behavior
of shrink-wrapping the link text. Set its width and height to 100%, or to
the same width and height as the div, and then the link fills the div and
the whole div is "hot". 

Here's a little demo. Note the link highlights as soon as the mouse enters
the div. HTH.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="" lang="en" xml:lang="en">
<title>Rollover div</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />

<style type="text/css">
body {font-family: verdana, arial, sans-serif; font-size:100%;}
div.button {width:120px; height:24px; top:0px; left: 0px; border: 1px #000
div.button a  {width:120px; height:24px; display:block; padding-top:2px;
font: bold .8em; text-align:center;}
div.button a:link {color: black; text-decoration:none;}
div.button a:hover {color:#F33; text-decoration:underline;}

<div class="button"><a href="#">Graphics</a></div>


-----Original Message-----
[EMAIL-REMOVED]] On Behalf Of George Smyth
Sent: Monday, December 27, 2004 7:33 AM
Subject: [css-d] Making a div a link

I am wondering if it is possible to make a <div> a link and have it

I have the following code:
<div class="OuterNavBox"><div class="InnerBox">
<a href="">nav1a</a></div></div>

I have the standard "a:hover" which changes the font color and background
when the mouse rolls over the link.  I can do the same thing with the outer
div (at least, in Firefox, it is not working with IE), but do not want to
because only the anchor is the link.  I can make the outer div the link by
placing the anchor around the whole thing, but that does not validate.

Is there a proper way to make the outer div the link?  I can do this with
JavaScript, but am wondering if there is a way to do this without using
JavaScript (not everyone has it turned on).

Cheers -

css-discuss [EMAIL-REMOVED]]
List wiki/FAQ --
Supported by --

css-discuss [EMAIL-REMOVED]]
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread:

Possibly related: