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:
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:
>
>
On Tue, 08 Jan 2008 19:23:08 +0000, 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:
>
>
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:
>>
>>
On 2008-01-08, 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:
>
>
>
> 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 elements-- one inside each of the block
elements.
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.
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 elements-- one inside each of the block
> elements.
>
>
>
> 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(?).
On 2008-01-08, 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 fact that 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?
>> The caveat is that this won't look good on non-CSS browsers.
>
> Non-CSS browsers? That would be very old browsers?
Pretty much. Or browsers belonging to people who have turned CSS off.
>> Or you could use several elements-- one inside each of the block
>> elements.
>>
>>
>>
>> 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(?).
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:
#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.
On Tue, 08 Jan 2008 21:38:43 +0000, Beauregard T. Shagnasty wrote:
>> 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.
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?
>>
>>
>> 
>> Heading
>
> That is not valid HTML. You can't stick an
> inline elements.
You're absolutely right. Block elements inside inline elements = bad. I
should have said:
>
>> ===example.css===
>> .container h2:hover {
>> color: orange;
>> }
>> ===end===
>
> ..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 {}
>> You can do the same with the text if you wish.
>
> 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.
Sean wrote:
> On Tue, 08 Jan 2008 21:38:43 +0000, Beauregard T. Shagnasty wrote:
>
>>> 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.
>
> 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 inside the 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%.
--
-bts
-Motorcycles defy gravity; cars just suck
On Tue, 08 Jan 2008 16:38:16 -0600, Ben C wrote:
> Something like this:
>
>
Beauregard T. Shagnasty wrote:
>> 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
Sean wrote:
> Beauregard T. Shagnasty wrote:
>> 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.
...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.
--
-bts
-Motorcycles defy gravity; cars just suck
Post removed (X-No-Archive: yes)