ghettocooler.net

Link multiple block elements January 23, 2006 2 comments

There’s really no way to put a link around a bunch of block level elements, is there?

To achieve something like:

<div>

<a href=”#”>

<h2>poop</h2>

<h3>poop</h3>

<h4>poop</h4>

</a>

</div>

You need to write:

<div>

<h2><a href=”#”>poop</a></h2>

<h3><a href=”#”>poop</a></h3>

<h4><a href=”#”>poop</a></h4>

</div>

Which is fine, except when you want to treat that entire div as it’s own link.

Sure, you can give the illusion that all of your block level elements share a single link with some simple css:

div:hover h2 a,div:hover h3 a, div:hover h4 a {color:#000;}

Get it? When you hover over the div, all of it’s contained block level elements will appear to be in a hover state as well. This of course creates new problems, the biggest being, the space around your headings appears to be clickable, when it’s not.

Is there a better way to accomplish this?

upate:

The method mentioned above is currently in use on the right side of emerica’s home page. The :hover pseudo selector in Internet Explorer is only supported on anchor tags, so the method doesn’t work for the majority of users.

2 comments:

1. joe d #

   How about you use Flash? Or dreamweaver’s image map automation.

2. Bill #

   hehe, dreamweavers img map, I like that! Flash of course would be nice too.