Posted by Beauregard T. Shagnasty on 01/08/08 21:38

Sean wrote:

> Fister 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 and how do I make it valid?
>
> Make the header a link instead of its container. Changing color and text
> can easily be done through css.

Easily, yes. Valid? You have to stop and think. <g>

> ===example.html===
> <div id="containers">
> <div class="container">
> <!-- I'm assuming you want both the image and heading linked -->
> <a href="page.html" title="">
> <img src="image.jpg" alt="" />
> <h2>Heading</h2></a>
> <p>Text</p>
> </div>
> </div>
> ===end===

That is not valid HTML. You can't stick an <hx> inside an anchor, only
inline elements.

> ===example.css===
> .container h2:hover {
> color: orange;
> }
> ===end===

...and that hover won't work in IE.

> You can do the same with the text if you wish.

Ummm?

--
-bts
-Motorcycles defy gravity; cars just suck

[Back to original message]