Re: [css-d] Is this a semantic use of the definition list?

2007-01-24 Thread Thierry Koblentz 
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?

Why not simply use an UL with each LI containing an anchor?
Use the background of that element to display your image and the necessary
padding to make sure your text doesn't overlap the image.
Note that you won't be able to use block level elements in there, nor links.
That way you get the mouseover effect on the whole box and do not have to
deal with floats. Unless you consider the image is not purely decorative and
should be part of the content.

---
Regards,
Thierry | www.TJKDesign.com

__
css-discuss [EMAIL PROTECTED]
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/

Re: [css-d] Is this a semantic use of the definition list?

2007-01-24 Thread Paul Novitski 
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 /
 spanDescription/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 PROTECTED]
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/