SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Evangelist WebMachine's Avatar
    Join Date
    Jun 2007
    Location
    Ontario, Canada
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <div>'s inside of <a> - Is there an alternate?

    I am doing a page which displays thumbnails that have titles under each, and when the mouse hovers over a thumbnail, a larger version of the image shows up to the right with a caption describing the item and its price. I got the code from one of the css libraries. It works like a charm, but doesn't validate because of the block-level <div> inside the inline <a> element.

    HTML Code:
    <a class="thumbnail" href="#thumb">
    				<div class = "thumb last">
    				<img src = "images/orangeShirtThumb.jpg" width = "70" height = "70" alt = "Orange Kwasind Shirt" />
    				<p>Kwasind Shirt</p>
    				</div>
    			<span><img src = "images/orangeShirt.jpg" alt = "Orange Shirt" width = "300"/><br />Kwasind Shirt (orange) ... $12.00</span></a>
    The gallery works by using the visibility:hidden and visibility: visible along with absolute positioning on the <span> in the css . I have included a screen capture so you can see what I am describing.

    The only solution I can figure out is to change the <div> to a <span>, but does that work with all the browsers? I don't want to break the page just for the sake of it validating, but it really bugs me that it doesn't validate. Any suggestions?
    Attached Images Attached Images

  2. #2
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    Austin Texas
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Change the div to a span and set it to display: block. Give them both classes if one has positioning and the other doesn't.

  3. #3
    SitePoint Evangelist
    Join Date
    Sep 2006
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would do exactly what you have except make the image itself a link, then link the text too. That would, in my mind, be the proper way.

    Code:
    <div class = "thumb last">
       <a class="thumbnail" href="#thumb">
          <img src = "images/orangeShirtThumb.jpg" width = "70" height = "70" alt = "Orange Kwasind Shirt" />
       </a>
    
       <a class="thumbnail" href="#thumb">
          <p>Kwasind Shirt</p>
       </a>
    </div>
    
    <span>
      <a class="thumbnail" href="#thumb">
          <img src = "images/orangeShirt.jpg" alt = "Orange Shirt" width = "300"/>
      </a>
      <a class="thumbnail" href="#thumb">     
    <br />Kwasind Shirt (orange) ... $12.00</a>
    </span>

  4. #4
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vanishdesign View Post
    Change the div to a span and set it to display: block. Give them both classes if one has positioning and the other doesn't.
    This sounds like the best approach to me. You can swap out the div element for a semantically correct span and the behavior "should" be the same. We may need to tweak a little, but this is what I would try.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  5. #5
    SitePoint Evangelist WebMachine's Avatar
    Join Date
    Jun 2007
    Location
    Ontario, Canada
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your suggestions. I don't have time to try them until later today, but when I do, I will let you know how it goes.

  6. #6
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Sorry to break this to you but your paragraphs are also invalid. P elements are block level (alike DIV) and therefore cannot exist within an anchor. I would seriously suggest you re-think the way your trying to accomplish the task, you could quite easily apply the :hover state onto any parent element and have it achieve the goal upon rolling over the item (though IE6 would need some scripting assistance). rustybuddy's code is as invalid as your's is.

  7. #7
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by WebMachine View Post
    I am doing a page which displays thumbnails that have titles under each, and when the mouse hovers over a thumbnail, a larger version of the image shows up to the right with a caption describing the item and its price. I got the code from one of the css libraries. It works like a charm, but doesn't validate because of the block-level <div> inside the inline <a> element.

    HTML Code:
    <a class="thumbnail" href="#thumb">
    				<div class = "thumb last">
    				<img src = "images/orangeShirtThumb.jpg" width = "70" height = "70" alt = "Orange Kwasind Shirt" />
    				<p>Kwasind Shirt</p>
    				</div>
    			<span><img src = "images/orangeShirt.jpg" alt = "Orange Shirt" width = "300"/><br />Kwasind Shirt (orange) ... $12.00</span></a>
    The gallery works by using the visibility:hidden and visibility: visible along with absolute positioning on the <span> in the css . I have included a screen capture so you can see what I am describing.

    The only solution I can figure out is to change the <div> to a <span>, but does that work with all the browsers? I don't want to break the page just for the sake of it validating, but it really bugs me that it doesn't validate. Any suggestions?
    You really can't wrap an <a> around a code block like that! It can only contain inline elements, so that rules out <div> and <p>. As the <a> is not really a link, I think it would be better to get rid of it, and do the fancy stuff on the <div>. That way, you can use div.thumb:hover span {...} to show the image (it won't work on IE6 as is, but you can script that in).

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    The benefit of an anchor though is you can :focus on it as well.

    For this reason, I use anchors for stuff like this (and also, so I can avoid any unnecessary scripting for IE6 if I'm not already using it anyway).

  9. #9
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    967
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I would do it like RustBuddy accept put the <a> inside the paragraph and take the class off the link. If they are the same then they are not necessary. Just refer to them from the parent element.

  10. #10
    SitePoint Evangelist
    Join Date
    Sep 2006
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yup, exactly right. I posted my adjustments in haste.

    this should be a little better
    Code:
    <div class = "thumb last">
       <a class="thumbnail" href="#thumb">
          <img src = "images/orangeShirtThumb.jpg" width = "70" height = "70" alt = "Orange Kwasind Shirt" />
       </a>
    
          <p>
             <a class="thumbnail" href="#thumb">Kwasind Shirt</a>
          </p>
       
    </div>
    
    <span>
      <a class="thumbnail" href="#thumb">
          <img src = "images/orangeShirt.jpg" alt = "Orange Shirt" width = "300"/>
      </a>
          
    <br /> <a class="thumbnail" href="#thumb">Kwasind Shirt (orange) ... $12.00</a>
    </span>

  11. #11
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Paragraph is ALSO invalid markup inside the anchor folks - it too is a block level container. NOT that I see ANY reason to need an extra container around the the first image or the text under it, since you can style the parent ANCHOR.

    Code:
    <a class="thumbnail" href="#thumb">
    	<img src="images/orangeShirtThumb.jpg"
    		width="70" height="70"
    		alt="Orange Kwasind Shirt"
    	/>
    	Kwasind Shirt
    	<span>
    		<img src="images/orangeShirt.jpg"
    			alt="Orange Shirt"
    			width="300"
    		/>
    		Kwasind Shirt (orange) ... $12.00
    	</span>
    </a>
    Should be ALL that is needed there. Set the anchor to display:block and everything you were doing to the DIV do it on the anchor, set both nested images to display:block, set text-align to center, position the span for your hover effect. You shouldn't need ANY block-level containers in that... It's an excellent example of a paragraph around non-paragraph content.

    I would also advise AGAINST using visibility:hidden to hide them - since you're absolute positioning them anyways just set them to left:-999em and then set it to left:0; on hover. Visibility:hidden much like display:none can cause screen reader and search engine issues (allegedly, I've seen no real proof of it, but better safe than sorry).

  12. #12
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I can vouch for JAWS not reading out display: none and visibility: hidden elements. Dunno about current Window-Eyes, old versions also ignored display: none. They are aware of stylesheets, and figure if something was meant not to be displayed, it will not be copied to the virtual buffer.

  13. #13
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    I can vouch for Windows Eyes and a couple of less well known screen readers that also do the same (at least in my copies).

  14. #14
    SitePoint Evangelist WebMachine's Avatar
    Join Date
    Jun 2007
    Location
    Ontario, Canada
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, it's going to take me a few hours to digest all this information and your suggestions. Thanks for all of them ... much food for thought. I am going to try to fix it tonight, but I am very nervous that as soon as I start to fiddle around with the code (which does work well) the page will break and I will be back to square one. Keep your fingers crossed.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •