I'm creating a small "appetizer" section on a web page. You probably know it from news websites or web2.0-like signup graphics:
I need a combination of an image, headline, paragraph text and a link all to be clickable. All of this nested in a div, that changes background-color on hover and is clickable. So instead of adding an a-element to each inline text/image, I want the empty space in the div to be clickable too. Here is the markup I imagine: div (wrapper div -- probably with rounded corners) h3 (heading) img (image for this article -- could go inside h3 if that would be better) p (appetizer text) p > a (read more) What's the most ideal way of doing this? Here are the different strategies I can come up with -- but what would be the most ideal. Criteria: * accessible * slim markup * easy to implement and maintain * not necessarily cross-browser compatible, as long as the fallback works (but must work as intended in IE7 and FF2) * must validate xhtml (1.0 transitional) *A-element around the div* One idea -- wrapping an A element around the div is a no-go: Validation breaks as no block-level elements are allowed inside inline elements. *A-elements on each line of text* And I dont like wrapping an A element around text inside each element. This way, not possible to click the whitespace inside the div. Also, it would add redundancy: Same link target (maybe also title text). Why add the same things lots of times? It also leads me to bloated HTML, which I don't like. There must be a better way? *Javascript enhanced div* What about adding a tiny javascript that adds an onclick to each div and sets location.href to the href value of the embedded a-element. This would definitely keep html slim and be a progressive enhancement. Text-based browsers would still be able to use the a element. My concerns: Adding onclick to the div: I heard from a colleague this won't work in IE? However, my own experiment (that I include attached) works in both IE7 and IE6. *Purely image with combined text and photo* This is a no-go for me: Text must be text to be accessible. Furthermore it's not easy enough to maintain and creating new images every time text is updated is simply too much for the website I have in mind here. So I'm asking for your advice here. What do you prefer? Which alternatives do you see? Any working examples on the net? -- ___________________________________________________________ Jesper Rønn-Jensen / Capgemini Denmark Tel. +45 3977 8220 / Mob. +45 2373 6220 / Fax +45 7011 2201 www.dk.capgemini.com / Blog http://justaddwater.dk/ [EMAIL PROTECTED] (Private e-mail and Google Talk IM) ___________________________________________________________
______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
