Posted by Ben C on 01/08/08 21:53

On 2008-01-08, Fister <vil_ikke@have_spam.dk> wrote:
> Since anchors are inline elements and divs are block elements the validation
> doesn't permit me placing an anchor around a div like the following:
>
><div id="containers">
> <a href="page.html">
> <div class="container">
> <img alt="image" src="image.jpg" />
> <div class="heading">Heading</div>
> <div class="text">Text</div>
> </div>
> </a>
></div>
>
> I want for the heading and text to change color whenever the mouse is above
> the image, heading or text. I also want for the image, heading and text to
> be below eachother so that's why I'm using divs and not spans.
>
> Isn't this common code

Probably.

> and how do I make it valid?

You could use span instead of div, and set

.container, .heading, .text { display: block }

The caveat is that this won't look good on non-CSS browsers.

Or you could use several <a> elements-- one inside each of the block
elements.

<div class="heading"><a href="page.html">Heading</a></div>

etc.

How are you doing the colour change? If you use a:hover { color: green }
then it should all go green when you hover on any part of it, since when
you hover on something you also hover on its descendents.

[Back to original message]