Anchor outside div not validating

Discussion in 'HTML' started by Fister, Jan 8, 2008.

  1. Fister

    Fister Guest

    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
    Fister, Jan 8, 2008
    #1
    1. Advertising

  2. 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.


    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.
    Harlan Messinger, Jan 8, 2008
    #2
    1. Advertising

  3. Fister

    Sean Guest

    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:
    >
    > <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.
    Sean, Jan 8, 2008
    #3
  4. 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
    Beauregard T. Shagnasty, Jan 8, 2008
    #4
  5. Fister

    Ben C Guest

    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.
    Ben C, Jan 8, 2008
    #5
  6. Fister

    Fister Guest

    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(?)
    Fister, Jan 8, 2008
    #6
  7. Fister

    Ben C Guest

    On 2008-01-08, Fister <vil_ikke@have_spam.dk> wrote:
    > 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 <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?

    >> 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 <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(?).


    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.
    Ben C, Jan 8, 2008
    #7
  8. Fister

    Sean Guest

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

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

    >
    > 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>
    <h2><a href="page.html" title="">Heading</a></h2>

    >
    >> ===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, Jan 8, 2008
    #8
  9. 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. <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?


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

    <snippage>

    > 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
    Beauregard T. Shagnasty, Jan 8, 2008
    #9
  10. Fister

    Sean Guest

    On Tue, 08 Jan 2008 16:38:16 -0600, Ben C wrote:

    > 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).



    --
    Website: http://www.vaxius.net
    blog: http://blog.vaxius.net
    Sean, Jan 8, 2008
    #10
  11. Fister

    Sean Guest

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




    --
    Blog: http://blog.vaxius.net
    Website: http://www.vaxius.net
    Sean, Jan 8, 2008
    #11
  12. Fister

    dorayme Guest

    In article <>,
    Ben C <> wrote:

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

    --
    dorayme
    dorayme, Jan 9, 2008
    #12
  13. 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. <g>)

    --
    -bts
    -Motorcycles defy gravity; cars just suck
    Beauregard T. Shagnasty, Jan 9, 2008
    #13
  14. Fister

    richard Guest

    On Tue, 8 Jan 2008 19:23:08 +0000 (UTC), 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 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".
    richard, Jan 9, 2008
    #14
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Willem
    Replies:
    5
    Views:
    1,042
    David Dorward
    Oct 4, 2004
  2. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    741
  3. Krzysztof Poc

    outside type, outside function

    Krzysztof Poc, Feb 3, 2012, in forum: C++
    Replies:
    1
    Views:
    282
    Victor Bazarov
    Feb 7, 2012
  4. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    182
    David Dorward
    Jun 1, 2005
  5. mscir
    Replies:
    3
    Views:
    303
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page