Anchor outside div not validating

[Fister]

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

 

[Harlan Messinger]

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.

It looks more like you want the user to be taken to page.html when the
user clicks on 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?

You can use onclick inside the div tags, but then your page won't work
with Javascript turned off.

You can have three separate anchors that go to the same place, one
around the image and the other two inside the heading and text divs.

Or you can reassess whether your users *really need* to have so many
different things to click on to go to the same place, or whether one
will suffice.

 

[Sean]

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.

===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===

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

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

 

[Beauregard T. Shagnasty]

Make the header a link instead of its container. Changing color and text
can easily be done through css.

===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===

===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?

 

[Ben C]

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.

 

[Fister]

Hello Ben,

You could use span instead of div, and set

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

That crossed my mind too but I thought there might be a better solution.

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

Non-CSS browsers? That would be very old 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.

I was using a:hover but if I have several anchors I'll have to use JavaScript
to have them all change color when the mouse is above any one of them(?)

 

[Ben C]

Hello Ben,


That crossed my mind too but I thought there might be a better solution.

The fact that <a> is "inline" so can't contain headings and divs and
things is perhaps a bit of an anachronism these days. It's not clear to
me who that rule is helping.

There's nothing "logically" or "semantically" inline about an anchor as
far as I can see. It's just a hyperlink and why shouldn't you hyperlink
a whole lot of stuff at once?

Non-CSS browsers? That would be very old browsers?

Pretty much. Or browsers belonging to people who have turned CSS off.

I was using a:hover but if I have several anchors I'll have to use JavaScript
to have them all change color when the mouse is above any one of them(?).

What I meant to say was you can set the :hover colour change on
#container, not on a. Then the whole lot will light up when you hover on
any part of it.

I also meant to say when you hover on something you also hover on its
_ancestors_, not on its descendents.

Something like this:

<div id="container">
<h1><a href="foo">Heading</a></h1>
<div><a href="foo">Text</a></div>
</div>

#container:hover { background-color: yellow; color: magenta }

The problem here though is that bits of the whole ensemble that you
can't actually click on will still light up under hover.

And I think someone said :hover doesn't work in IE anyway.

 

[Sean]

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

Changing color through css is most definitely valid. I do it at my site
and it validates perfectly with W3C's xhtml validator and css validator.
Why would specifying this in css not be valid?

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

You're absolutely right. Block elements inside inline elements = bad. I
should have said:

<a href="page.html" title="">
<img src="image.jpg alt="" /></a>

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

It may not work in IE6 (it only supports a:hover), but it does in IE7.
This is just a basic example, and you can change it around to make sure
it works with IE6.

..container h2 a:hover {}

Ummm?

..container p:hover {}

And yes, I already know that won't work in IE6. But seriously, I look at
my site statistics and see less than .5% of my visitors still using IE6,
so I no longer make concessions for it. Of course statistics can vary
greatly from site to site, so if you still have people visiting your site
with IE6, then by all means design for it. I'm more than happy to be
done with limiting my site and hacking together conditional css to make
IE6 happy.

 

[Beauregard T. Shagnasty]

Changing color through css is most definitely valid. I do it at my
site and it validates perfectly with W3C's xhtml validator and css
validator. Why would specifying this in css not be valid?

You missed the point. Your <h2> inside the <a> is not valid. Sorry if my
wording confused you.

And yes, I already know that won't work in IE6. But seriously, I look
at my site statistics and see less than .5% of my visitors still
using IE6,

Less than a half-percent? Wow. Is this a site that only appeals to
high-tech state-of-the-art visitors?

so I no longer make concessions for it. Of course statistics can vary
greatly from site to site, so if you still have people visiting your
site with IE6, then by all means design for it. I'm more than happy
to be done with limiting my site and hacking together conditional css
to make IE6 happy.

My sites are still registering (last time I looked a few weeks ago)
around 30% for IE6. IE*5* is down 'round 0.5%.

 

[Sean]

Something like this:

<div id="container">
<h1><a href="foo">Heading</a></h1>
<div><a href="foo">Text</a></div>
</div>

#container:hover { background-color: yellow; color: magenta }

The problem here though is that bits of the whole ensemble that you
can't actually click on will still light up under hover.

And I think someone said :hover doesn't work in IE anyway.

The above wouldn't work in IE6 or prior, as it only supports hover on a
elements (a:hover).

 

[Sean]

You missed the point. Your <h2> inside the <a> is not valid. Sorry if my
wording confused you.

I see what you mean. I did correct my noobish mistake, though.

Less than a half-percent? Wow. Is this a site that only appeals to
high-tech state-of-the-art visitors?

My site fits into that category. Most of my articles are on Linux and
technology, so I don't have to worry too much about my readers using
older versions of browsers. In fact, even IE7 only accounts for about
10% on my site (I added a signature with my site and blog on it, btw). I
know this isn't the norm, but I've grown used to writing pages without
having to worry about IE6 or *gasp* IE5.

With that in mind, I will probably frequently offer examples which may
not work in IE6. Any web author should be testing this stuff on all
browsers (and browser versions) that his visitors are using.

I apologize in advance for any future ignorance regarding IE6's
limitations and/or bugs.

My sites are still registering (last time I looked a few weeks ago)
around 30% for IE6. IE*5* is down 'round 0.5%.

That seems about average.

 

[dorayme]

The fact that <a> is "inline" so can't contain headings and divs and
things is perhaps a bit of an anachronism these days. It's not clear to
me who that rule is helping.

There's nothing "logically" or "semantically" inline about an anchor as
far as I can see. It's just a hyperlink and why shouldn't you hyperlink
a whole lot of stuff at once?

Interesting. Perhaps it might be open to abuse, to encourage
designers to make huge chunks of their web page links, to be less
defined and therefore less useful to a user. If a user clicks on
"See an <a href="">enlargement</a> of this...", he knows fairly
well what he is about to buy into. But if the link could be a
whole tract of stuff with headings and paragraphs and whatever,
then there might need to be some other way to let the user know
what he is buying into if he clicks. Thus an actual loss of
meaning can be seen to be the danger. Just a thought for you.

 

[Beauregard T. Shagnasty]

My site fits into that category. Most of my articles are on Linux and
technology, so I don't have to worry too much about my readers using
older versions of browsers.

...or in fact, Windows browsers. A Linux site would explain your lack of
IE. Glad you cleared that up. (You should mention that when you talk
about your site's browser stats. <g>)

 

[richard]

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?

You get the error because you can not "anchor" a division.

you show <div><a><div></div></a></div>
the anchor is intended primarily for a link.
So that you would have <div><a>link</a></div>

I would not use "container" and "containers" as this could be
confusing. "container1" and "container2" would be more appropriate.
I generally go with something like "acontainer" and "bcontainer".