need a valid solution to h2 & p tags inside an anchor, but with a background hover

Discussion in 'HTML & Website Design' started by wolfestone, Apr 12, 2010.

0
  1. #1
    Here is my code:

    
<a class="centBackItem" href="default.aspx">
        <img src="images/image1.jpg" alt="" width="141" height="102" />
        <h2><span>Button Title</span></h2>
        <p>button sub-text</p>
</a>
    Code (markup):
    In the css, the surrounding <a> tag is set to display block, and has a background image which changes on hover. I am looking to create the effect of a button with text and image inside it, but using markup rather than purely an image.

    Nesting the h2 and P inside the anchor tag isn't valid (xhtml transitional).

    Is there any way around this with valid markup?
     
    wolfestone, Apr 12, 2010 IP
  2. zerophean

    zerophean Peon

    Messages:
    91
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    On the W3C rules, actually paragraph <p> and heading <h1> - <h6> , can't implemented on anchor <a> tag, so your HTML structure is not valid.
    try this one

    
<a class="centBackItem" href="default.aspx">
  <span class="h2">Button Title</span>
  <span class="p">button sub-text</span>
</a>
    HTML:
    on your css :

    .centBackItem{ background:url(images/image1.jpg) no-repeat 0% 0%; display:block;}
.centBackItem:hover{ background:url(images/image2.jpg) no-repeat 0% 0%;}
span.h2{font-size:1em;font-weight:600;display:block}
span.p{display:block}
    Code (markup):
     
    Last edited: Apr 12, 2010
    zerophean, Apr 12, 2010 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    If it's a button, why does it need a heading tag? Or a paragraph for that matter - that doesn't sound very semantic... But without seeing your actual content on the page, it's hard to say one way or the other...

    I mean, if that's actual page content, why would the P need to be inside the anchor too? Methinks whatever it is you are attempting to do you are overthinking the solution - AND misunderstanding semantic markup.
     
    deathshadow, Apr 13, 2010 IP
  4. alfa_375

    alfa_375 Active Member

    Messages:
    445
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    60
    #4
    Posting code will be the best way to get help.
     
    alfa_375, Apr 13, 2010 IP
  5. wolfestone

    wolfestone Peon

    Messages:
    48
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thanks guys,

    The visual effect I'm going for is a colored box, 200 x 300 pixels. Inside this box is an image, a title, and a description. The whole box needs to work as a 'button', and include the background of the box changing color on hover. Clicking any part of the box, image, or text must allow the link to work.

    Semantically it seemed to make sense as those elements accurately fit their purpose within the box. I guess where semantics clashed with functionality was that the whole thing needed to act as a hotspot.

    Replacing the h2 and p tags with spans worked nicely, thanks.
     
    wolfestone, Apr 16, 2010 IP