Sent by Paul Novitski on 24 January 2007 22:10
At 1/24/2007 01:31 PM, Garth Jantzen wrote:
>I'm looking for a way to create a 'teaser box' you might call it, which
>would contain an image say, 80 x 80 floated to the left with a description
>floated to the right, both of which are wrapped in a box. The box is a link
>to my portfolio page. I want the background color to change on a mouseover.
>I currently have it set up as a definition list with a heading as dt image
>as dd, and the description as a dd. But because I want the whole box to be a
>link, is it semantic to wrap each 'teaser box' in an anchor tag? I want to
>use the <a> as a block element so IE users can see the hover. I would rather
>not use javascript to change the style. any thoughts on the semantics of my
>definition list?
The first answer is No -- you can't wrap a DT/DD pair in an
anchor. Try it and validate it to see. You can also consult the
documentation:
HTML 4.01 Specification
10 Lists
10.3 Definition lists: the DL, DT, and DD elements
http://www.w3.org/TR/html4/struct/lists.html#h-10.3
My guess is that what you're looking at is an unordered list in which
the LI is the container for your item data structure. If you want to
enclose everything inside the list item in an anchor you can only use
inline elements such as spans and images:
12.2 The A element
http://www.w3.org/TR/html4/struct/links.html#h-12.2
therefore:
<ul>
<li>
<a href="xxx">
<img src="xxx" alt="xxx" />
<span>Description</span>
</a>
</li>
...
</ul>
Then use CSS to format these elements to your heart's content.
Personally I don't quite understand why it's kosher to style an
inline element as a block when it's in a markup context that only
allows inline elements, but those more knowledgeable than myself have
said it's OK.
Regards,
Paul
__________________________
Juniper Webcraft Ltd.
http://juniperwebcraft.com
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
