Re: [WSG] Definition List for Products/Items with Image
At 05:37 PM 4/4/2006, Richard Czeiger wrote: In your example, Chien, Perro, Inu are representations of the concept of 'dog' and therefore would fall into the category of signifiers (dd). True: a photograph is not a definition of a dog, however, a photograph of a dog is not the dog itself, but rather a repsentation. You guys crack me up! You seem to be saying that, of all these signifiers -- dog, chien, [doggy photo], etc. -- it's the one that is most like a dog, or mostly IS a dog, that deserves to go in the DT. What, you think the word dog is more like an actual dog than a photograph of a dog? Doggone it, the word dog is no more a dog than a potato chip. For proximity to the real thing, I'll put my money on the photograph of the dog which is at least a direct physical reflection of an actual dog. Words like dog and chien are just indirect reflections of dogs in the murky, ripply human pond. Until you figure out how to get an actual dog into a web page, all you have to work with is one representation or another. There is no real dog on the page, you know, so all your dictionary list is doing is defining one symbol with other symbols. You use DTs to say, Here are some things you may not understand that I'm about to explain with the following ddefinitions. In one dictionary list, dog will be the DT and chien will be the DD. In another, [fidophoto] will be the DT and My dog Binky will be the DD. It all has to do with what you intend to elucidate. So here I've got a collection of items: - photograph of a Zimbabwean mbira - the title Mbira Dzavadzimu - the caption Hand-crafted by Fradreck Mujuru, Harare, 2005 Does the title help define the photograph or does the photograph help define the title? Does seeing the photo of the musical instrument help explain its name, or does its name help explain the photo? Both, of course: they both contribute in different ways to our understanding of the whole. Whether I write: dtimg src=mbira.jpg //dt ddMbira Dzavadzimu/dd ddHand-crafted by Fradreck Mujuru, Harare, 2005/dd or: dtMbira Dzavadzimu/dt ddimg src=mbira.jpg //dd ddHand-crafted by Fradreck Mujuru, Harare, 2005/dd the communication is nearly identical, and the difference so obscure as to be practicably irrelevant to the glossary of musical instruments or the product catalog or the website portfolio we're presenting. Now, don't come whining to me that you can't put an image in a DT because an image isn't a term. Dang it, a photograph isn't a definition either. We're using a semantic structure to help make metaphorical sense of information, fer crying out loud. Don't be so gol-darned fiddly that you spend hours trying to figure out how to float one DD to the left and the DT and all the other DDs to the right! Put the gol-danged image in the DT, float it left, and you're done. Get on with your lives, now! Scoot! Your ornery ole Pa ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Definition List for Products/Items with Image
I had a quick go, and this is what I came up with (assuming a 100x100px image):dl dtProduct title/dt ddProduct description - this can be as long as you like/dd
ddimg src="" alt=product title/dd/dlstyle dl { position: relative; } dl dt { margin-left: 110px; font-weight: bold; }
dl dd { margin-left: 110px; } dl dd img { position: absolute; top: 0; left: 0; width: 100px; height: 100px; }
/styleAs others have said, I like this better than putting the image in the dt. This works in Firefox (Linux and Windows) and Konqueror, but breaks in IE 6 (it seems to be ignoring the absolute positioning of the image). Perhaps someone could expand on this to make it work in IE?
Daniel NitscheOn 4/4/06, Thierry Koblentz [EMAIL PROTECTED] wrote:
Richard Czeiger wrote: Hi Thierry, I guess the tricky bit is what goes in the blahblahblah. I'd love to be able to get rid of the classname but I think the dt that holds the image would have to be positioned somehow and I'm
pretty sure you can't work backwards up the cascade (more's the pity).No matter what the blahblah is, there is no need for using a class.td img {} would get to the image as .img {} does.
So what would you suggest?I'd put the image in the DT and float it (the DT), giving it the width ofthe wider image that could be used in there.Then I'd use auto margin on the image so they would appear centered in
relaltion to each others.Would that work for you?Regards,Thierry | www.TJKDesign.com**The discussion list for
http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help
**
Re: [WSG] Definition List for Products/Items with Image
Absolute positioning should position from the top/left of whatever
absolute element is containing it, usually this is the body.
However, if you specifiy an element as being absolute but don't feed it
a top/left, it will stay positioned wherever it is on the page (but
outside of the content flow)
Daniel Nitsche wrote:
I had a quick go, and this is what I came up with (assuming a 100x100px
image):
dl
dtProduct title/dt
ddProduct description - this can be as long as you like/dd
ddimg src=product-image.jpg alt=product title/dd
/dl
style
dl { position: relative; }
dl dt { margin-left: 110px; font-weight: bold; }
dl dd { margin-left: 110px; }
dl dd img { position: absolute; top: 0; left: 0; width: 100px;
height: 100px; }
/style
As others have said, I like this better than putting the image in the
dt. This works in Firefox (Linux and Windows) and Konqueror, but breaks
in IE 6 (it seems to be ignoring the absolute positioning of the
image). Perhaps someone could expand on this to make it work in IE?
Daniel Nitsche
On 4/4/06, *Thierry Koblentz* [EMAIL PROTECTED]
mailto:[EMAIL PROTECTED] wrote:
Richard Czeiger wrote:
Hi Thierry,
I guess the tricky bit is what goes in the blahblahblah.
I'd love to be able to get rid of the classname but I think the dt
that holds the image would have to be positioned somehow and I'm
pretty sure you can't work backwards up the cascade (more's the
pity).
No matter what the blahblah is, there is no need for using a class.
td img {} would get to the image as .img {} does.
So what would you suggest?
I'd put the image in the DT and float it (the DT), giving it the
width of
the wider image that could be used in there.
Then I'd use auto margin on the image so they would appear centered in
relaltion to each others.
Would that work for you?
Regards,
Thierry | www.TJKDesign.com http://www.TJKDesign.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Definition List for Products/Items with Image
At 11:13 PM 4/3/2006, Samuel Richardson wrote:
Absolute positioning should position from the top/left of whatever
absolute element is containing it, usually this is the body.
A parent can have either absolute or relative positioning to provide
positional context for an absolute child.
Daniel Nitsche wrote:
I had a quick go, and this is what I came up with (assuming a
100x100px image):
dl
dtProduct title/dt
ddProduct description - this can be as long as you like/dd
ddimg src=product-image.jpg alt=product title/dd
/dl
style
dl { position: relative; }
dl dt { margin-left: 110px; font-weight: bold; }
dl dd { margin-left: 110px; }
dl dd img { position: absolute; top: 0; left: 0; width: 100px;
height: 100px; }
/style
What happens when you add a second item to the list? I believe the
images will overlay one another at the top of the list because
they're all being absolutely positioned in the context of the DL. Oops!
And to think, all this fuss just to avoid placing the image in the DT...
Paul
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Definition List for Products/Items with Image
On Apr 4, 2006, at 2:58 PM, Daniel Nitsche wrote:
I had a quick go, and this is what I came up with (assuming a
100x100px
image):
dl
dtProduct title/dt
ddProduct description - this can be as long as you like/dd
ddimg src=product-image.jpg alt=product title/dd
/dl
style
dl { position: relative; }
dl dt { margin-left: 110px; font-weight: bold; }
dl dd { margin-left: 110px; }
dl dd img { position: absolute; top: 0; left: 0; width: 100px;
height:
100px; }
/style
As others have said, I like this better than putting the image in
the dt.
This works in Firefox (Linux and Windows) and Konqueror, but breaks
in IE 6
(it seems to be ignoring the absolute positioning of the image).
Perhaps
someone could expand on this to make it work in IE?
As a rule of thumb, whenever you use position:relative in IE win, you
should give the element 'layout' [1].
* html dl { position: relative; zoom:1 /* or other layout triggers */}
[1] http://www.satzansatz.de/cssd/onhavinglayout.html
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Definition List for Products/Items with Image
Daniel Nitsche wrote: As others have said, I like this better than putting the image in the dt. This works in Firefox (Linux and Windows) and Konqueror, but breaks in IE 6 (it seems to be ignoring the absolute positioning of the image). Perhaps someone could expand on this to make it work in IE? I missed the preference about the image not being in the DT (makes sense though). But in that case, going with position:absolute I'd use ULs rather than a DL so we have different box context. ul liTitle/li liImg/li liSome text/li /ul ul liTitle/li liImg/li liSome text/li /ul ul liTitle/li liImg/li liSome text/li /ul Each UL uses position:relative so the nested image is positionned in relation to that parent. It would need a min-height equals to the height of the images so the image doesn't spill over the next UL in case there is not enough content in there (and using height for IE will give that element layout). The whole thing could be a list too. Regards, Thierry | www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Definition List for Products/Items with Image
Last year I've done this http://www.bonsoir.cz/obchod/chateau-laroche, it should fit your needs. -- Jan Brasna :: www.alphanumeric.cz | www.janbrasna.com | www.wdnews.net ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Definition List for Products/Items with Image
Hi Micky, Not sure I follow.. The dt is the signified (the object itself) and the signifiers (dds) don't so much as 'define' it in the strict sense, but act as a representation of the concept. In your example, Chien, Perro, Inu are representations of the concept of 'dog' and therefore would fall into the category of signifiers (dd). True: a photograph is not a definition of a dog, however, a photograph of a dog is not the dog itself, but rather a repsentation. I definitely wouldn't put them all into the one dd. In regards to the quote issue, using your example, it might fall along the following lines: dtGreen/dt ddColor of the leaves/dd ddExample: blockquote cite=http://www.poetry.com/envy.html;Green is the color of my true love's hair/blockquote/dd R :o) - Original Message - From: Micky Mourelo [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Wednesday, April 05, 2006 10:21 AM Subject: Re: [WSG] Definition List for Products/Items with Image Richard: Did I just over-geek the whole scenario? Yes. That's what we are here for. A rough example might be: dog, chien, bow wow, image of a dog, etc... which are all signifiers for the one signified - the actual dog itself. They are all signifiers (dt) for the same signified (described in a dd, it is not the signified as you can only describe the thing that's signified) dtDog/dt dt lang=glCan/dt dt lang=frChien/dt ddpText desc/pimgobject blockquote p /dd Anyway IMHO this is not the case: Chien does not define Perro. Dog does not define Inu. A photograph of a dog is not the definition for that dog. The textual description, the photograph, sound file, etc. would be part of description. But, as I previously said, I'm not 100% sure that every item belonging to a definiton should go inside the same dd. Only 98% :oP sure. Consider a dictionary. dtgreen/dt dd pColor of the leaves/p blockquoteGreen is the color of my true love's hair/blockquote /dd dd pFroggy-like/p img src=kermit.jpg alt=It's not that easy bein' green /dd dd pMoney/p pUsed only in slang/p /dd The term is clearly the dt, each entry in its own dd as they provide different descriptions, but a quote, an example of the use of that term, an image, wouldn`t go in their own dd or it would be a mess, you would lose relationship as you would put a quote at the same level of relationship as a textual/visual depiction. See, that's my point, it depends on context.In case you are tagging a multilingual dictionary on an english centered page your example would be right, whereas all the other language names in the same dd would be wrong. It depends on what you want to express/mark. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Definition List for Products/Items with Image
Great work!The only (very minor) issue I can see, is the image is not vertically aligned when the product title wraps to two lines, but as you have written, you can adjust the width to suit.Also works in Firefox and Konqueror (Linux). Daniel NitscheOn 4/5/06, Richard Czeiger [EMAIL PROTECTED] wrote: Aha! Following on from my chat with Micky, I'vedecided the best place (semantically) for an image is in a dd. After playing around a little, I think I've got it! Check out the following address: www.grafx.com.au/wip/productList.html This works in PC FireFox, PC IE (with only one hack) and Mac Safari 2. The HTML about asclean as it's going to get. Also, resizing the text works like a charm... The positioning of the image (regardless of whether it's a dt or a dd) was inspired by Thierry - nice one, mate ;o) What do you think? R :o)
Re: [WSG] Definition List for Products/Items with Image
Hi Micky, I agree it's not a perfect fit and I'm cramming in the idea that the concept (signified) is the 'term' and therefore the dt and that the descriptions/defintions/representations of that concept (signfiers) are the dds. I don't think it's too far a strecth and until XHTML come up with a tag like an intangible concept (eg: concept /) I think it's a fairly easy translation from structuralism to semantic xhtml. True it's not perfect - but i think it's pretty darn close... I'm not sure I follow your dog = animal streetthug analogy. This seems like a perfect use of the DL. Wouldn't it then go: dtDog/dt ddQuadrapedal Mammal/dd ddSlang: Referring to a person familiarly in the context of a street gang/dd This is similar to Russ's explanation in the Punt example here: http://www.maxdesign.com.au/presentation/definition/ R :o) - Original Message - From: Micky Mourelo [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Wednesday, April 05, 2006 11:02 AM Subject: Re: [WSG] Definition List for Products/Items with Image Richard: Hi Micky, Not sure I follow.. The dt is the signified (the object itself) and the signifiers (dds) don't so much as 'define' it in the strict sense, but act as a representation of the concept. Nope, it is the other way round, the dt is the signifier, the signified is the dog itself, not even the description, so Chien, Can, Inu are signifiers, as well as Bitch or Fido. That's one of the reasons this analogy does not apply too well. The title of a book would be a signifier of the book itself, you would then try to describe the book trough a description. Title- dt, description-dd, signified-the real book. dtGreen/dt ddColor of the leaves/dd ddExample: blockquote cite=http://www.poetry.com/envy.html;Green is the color of my true love's hair/blockquote/dd The quote is related to the previous dd, not directly to the dt, otherwise it would be on the same level as the previous, AND following dds. And the following ones do not neccessarily have to go along with the example/quote/image. Consider the definiton of dog as an animal, or a streetgang person, putting the images depicting the animal and the gangster at the same level would be more than confusing, and so not semantic. The problem is of course more obvious when you have different definitions for a single term, how dou you relate them? If almost every single part of the description of a term gets its own dd, how can we tell apart which items are grouped and belong to one of the different definitions? BTW your css solution is great, I came up with the same for a newspaper some time ago, but it had/has one drawback, I had to ask the editors to restrict the dt to one line. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Definition List for Products/Items with Image
On 05/04/06, Richard Czeiger [EMAIL PROTECTED] wrote: This is similar to Russ's explanation in the Punt example here:http://www.maxdesign.com.au/presentation/definition/ And on that same page, a little further down, we have this example of a use for DLs: DT: TermDD: Descriptive imageDD: Description This seems to me to be very similar to what we're looking at here, with the term being the name of the product. Cheers, Seona.
RE: [WSG] Definition List for Products/Items with Image
I've been enjoying this disucssion, especially as this is
something Ihave to deal with a lot.
I like the solution from Richard, but I don't like having
the image absolutely positioned. It's similiar
toabsolutelypositioning a column, when the image isthe tallest
'column' (ie, there's very little text) then it overlaps thenext
entry.
I would look to adjust this with the following css which is
inspired by some of the negative margin any order column layouts floating
around.
Put the image width as a left padding on the dl (less
repetition of this value, no need to apply dt and dd left margins) and float the
image left with a negative left margin equal to it's width. This shifts
the image completely into its own left column. Then, to account for the dt
and dd left padding/margin (the space between the columns), make the image
position relative and move it left by that amount. This lets you mix units
for the column spacing and image width. This should work in IE6, firefox,
safari etc and IE5 with some width/padding adjustments.
body {font: 70%/1.5 Verdana,
sans-serif;}
dl {width: 300px;margin:
0;padding: 0 0 1.5em 100px; /* make padding left the width of the img
*/}
dt {margin: 1.5em 0 0 0;padding: 0 0
0.4em 1.5em;font-weight: bold;clear: left; /* start clear of
the last floated img */}
dd {margin: 0 0 0 0;padding: 0 0 0
1.5em;}
dd img {position: relative;top: -1.5em;
/* move top flush with top of dt, doesn't work when dt is multi line however
*/left: -1.5em; /* move left by amount of dt and dd padding-left
*/float: left;/* 'suck' the img to the left by the images
width */margin-left: -100px;/* just to leave some room for
border's on img etc.You'd normally just remove this and use the
correct width for the margin left */margin-right:
-10px;}
Regards,
Eric
Eric
Orton
Development
Consultant
Areeba
Solutions Pty LtdLevel 9/607 Bourke StreetMelbourne VIC 3000
Australiaph: +61 3 9629 3111fax:+61 3 9629
3122[EMAIL PROTECTED]http://www.areeba.com.au/
From: listdad@webstandardsgroup.org
[mailto:[EMAIL PROTECTED] On Behalf Of Daniel
NitscheSent: Wednesday, 5 April 2006 10:55 AMTo:
wsg@webstandardsgroup.orgSubject: Re: [WSG] Definition List for
Products/Items with Image
Great work!The only (very minor) issue I can see, is the
image is not vertically aligned when the product title wraps to two lines, but
as you have written, you can adjust the width to suit.Also works in
Firefox and Konqueror (Linux). Daniel Nitsche
On 4/5/06, Richard
Czeiger [EMAIL PROTECTED] wrote:
Aha!
Following on from my chat with
Micky, I'vedecided the
best place (semantically) for an image is in a dd.
After playing around a little,
I think I've got it!
Check out the following
address:
www.grafx.com.au/wip/productList.html
This works in PC FireFox, PC IE
(with only one hack) and Mac Safari 2.
The HTML about asclean as
it's going to get.
Also, resizing the text works
like a charm...
The positioning of the image
(regardless of whether it's a dt or a dd) was inspired by
Thierry - nice one, mate ;o)
What do you think?
R
:o)
--"This email is intended only for the use of the individual or entity named above and contains information that is confidential. No confidentiality is waived or lost by any mis-transmission. If you received this correspondence in error, please notify the sender and immediately delete it from your system. You must not disclose, copy or rely on any part of this correspondence if you are not the intended recipient. Any communication directed to clients via this message is subject to our Agreement and relevant Project Schedule. Any information that is transmitted via email which may offend may have been sent without knowledge or the consent of Areeba."--
Re: *****SPAM***** Re: [WSG] Definition List for Products/Items with Image
Just a follow up Had a surf around and remembered the Malarky article on eCommerce DLs http://www.stuffandnonsense.co.uk/archives/e-commerce_definition_lists.html It made me think about what would happen if we wanted to describe aspects of the dds as having defintions themselves. For example, in the version I put together (below), it has "Features" and "Web" which should have their own DL. I wasn't satisified with Malarky's use of li and span to mark it up - unordered lists seemed somehow wrong here... So here's the Malarky one (without styling) - instead as a more semantically formed product list. www.grafx.com.au/wip/eCommerceList.html This is getting sexy! :o) If only IE would support the "after" pseudo element! As an alternative to the colon, you can colour the secondary dt to make it stand out more. R - Original Message - From: Richard Czeiger To: wsg@webstandardsgroup.org Sent: Wednesday, April 05, 2006 10:25 AM Subject: *SPAM* Re: [WSG] Definition List for Products/Items with Image Aha! Following on from my chat with Micky, I'vedecided the best place (semantically) for an image is in a dd. After playing around a little, I think I've got it! Check out the following address: www.grafx.com.au/wip/productList.html This works in PC FireFox, PC IE (with only one hack) and Mac Safari 2. The HTML about asclean as it's going to get. Also, resizing the text works like a charm... The positioning of the image (regardless of whether it's a dt or a dd) was inspired by Thierry - nice one, mate ;o) What do you think? R :o)
Re: RE: [WSG] Definition List for Products/Items with Image
WOW! Eric, I love it!
:o)
It's so clean and minimising need
to restate the image width is exactly what I was after... :o)
Legend!
R
- Original Message -
From: Eric
Orton
To: wsg@webstandardsgroup.org
Sent: Wednesday, April 05, 2006 11:37 AM
Subject: [Norton AntiSpam] RE: [WSG] Definition List for
Products/Items with Image
I've been enjoying this disucssion, especially as this is
something Ihave to deal with a lot.
I like the solution from Richard, but I don't like having
the image absolutely positioned. It's similiar
toabsolutelypositioning a column, when the image isthe tallest
'column' (ie, there's very little text) then it overlaps thenext
entry.
I would look to adjust this with the following css which is
inspired by some of the negative margin any order column layouts floating
around.
Put the image width as a left padding on the dl (less
repetition of this value, no need to apply dt and dd left margins) and float the
image left with a negative left margin equal to it's width. This shifts
the image completely into its own left column. Then, to account for the dt
and dd left padding/margin (the space between the columns), make the image
position relative and move it left by that amount. This lets you mix units
for the column spacing and image width. This should work in IE6, firefox,
safari etc and IE5 with some width/padding adjustments.
body {font: 70%/1.5 Verdana,
sans-serif;}
dl {width: 300px;margin:
0;padding: 0 0 1.5em 100px; /* make padding left the width of the img
*/}
dt {margin: 1.5em 0 0 0;padding: 0 0
0.4em 1.5em;font-weight: bold;clear: left; /* start clear of
the last floated img */}
dd {margin: 0 0 0 0;padding: 0 0 0
1.5em;}
dd img {position: relative;top: -1.5em;
/* move top flush with top of dt, doesn't work when dt is multi line however
*/left: -1.5em; /* move left by amount of dt and dd padding-left
*/float: left;/* 'suck' the img to the left by the images
width */margin-left: -100px;/* just to leave some room for
border's on img etc.You'd normally just remove this and use the
correct width for the margin left */margin-right:
-10px;}
Regards,
Eric
Eric
Orton
Development
Consultant
Areeba
Solutions Pty LtdLevel 9/607 Bourke StreetMelbourne VIC 3000
Australiaph: +61 3 9629 3111fax:+61 3 9629
3122[EMAIL PROTECTED]http://www.areeba.com.au/
From: listdad@webstandardsgroup.org
[mailto:[EMAIL PROTECTED] On Behalf Of Daniel
NitscheSent: Wednesday, 5 April 2006 10:55 AMTo:
wsg@webstandardsgroup.orgSubject: Re: [WSG] Definition List for
Products/Items with Image
Great work!The only (very minor) issue I can see, is the
image is not vertically aligned when the product title wraps to two lines, but
as you have written, you can adjust the width to suit.Also works in
Firefox and Konqueror (Linux). Daniel Nitsche
On 4/5/06, Richard
Czeiger [EMAIL PROTECTED] wrote:
Aha!
Following on from my chat with
Micky, I'vedecided the
best place (semantically) for an image is in a dd.
After playing around a little,
I think I've got it!
Check out the following
address:
www.grafx.com.au/wip/productList.html
This works in PC FireFox, PC IE
(with only one hack) and Mac Safari 2.
The HTML about asclean as
it's going to get.
Also, resizing the text works
like a charm...
The positioning of the image
(regardless of whether it's a dt or a dd) was inspired by
Thierry - nice one, mate ;o)
What do you think?
R
:o)
--"This email is
intended only for the use of the individual or entity named above and contains
information that is confidential. No confidentiality is waived or lost by any
mis-transmission. If you received this correspondence in error, please notify
the sender and immediately delete it from your system. You must not disclose,
copy or rely on any part of this correspondence if you are not the intended
recipient. Any communication directed to clients via this message is subject to
our Agreement and relevant Project Schedule. Any information that is transmitted
via email which may offend may have been sent without knowledge or the consent
of
Areeba."--
Re: [WSG] Definition List for Products/Items with Image
Eric Orton wrote: I've been enjoying this disucssion, especially as this is something I have to deal with a lot. I like the solution from Richard, but I don't like having the image absolutely positioned. It's similiar to absolutely positioning a column, when the image is the tallest 'column' (ie, there's very little text) then it overlaps the next entry. Not if you apply a min-height like in the example I posted earlier: http://www.tjkdesign.com/lab/definition_list.asp Regards, Thierry | www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Definition List for Products/Items with Image
Richard: I always use a DL when dealing with scenarios like the one on juniperwebcraft (photo with title and desc) but I do not find right to have the image as a DT as I think the image is not what you are defining, but the title you have as a DD, so I put the image on its own DD or inside the desc text DD, and then position it on the left; it's a little bit trickier css wise but more semantic IMHO. But then, I have a diagnosed severe dlitis. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Definition List for Products/Items with Image
Richard Czeiger wrote:
Hi Paul and Micky :o)
I would think that the textual description of the product/item would
be the primary dt - at the top of the list.
If the image were a dt (and I think there's a case that can be made
for this) then it would be a secondary dt.
Micky, I'm not sure about putting the image in the dd used for the
description.
I think the image should be given it's own dd or dt.
My thinking on this one is based on the examples put forward by Russ
in his discussion on DLs
http://www.maxdesign.com.au/presentation/definition/
I'd be interested to see if he could come up with the cleanest CSS
using the following code - and yes, Russ, I'm throwing down the
gauntlet :o)
The original mock-up is here: www.grafx.com.au/wip/productList.gif
Remembering the aim is to come up with some CSS that is fairly
flexible in terms of the text length (multiple lines) and the
dimensions of the image. PS: of course, if you can figure out a way
to get rid of the class=image, that would be even better!
Richard,
If there are no other images than these, then why not using:
dt img {blahblahblah}
Regards,
Thierry | www.TJKDesign.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Definition List for Products/Items with Image
Richard Czeiger wrote:
Hi Thierry,
I guess the tricky bit is what goes in the blahblahblah.
I'd love to be able to get rid of the classname but I think the dt
that holds the image would have to be positioned somehow and I'm
pretty sure you can't work backwards up the cascade (more's the pity).
No matter what the blahblah is, there is no need for using a class.
td img {} would get to the image as .img {} does.
So what would you suggest?
I'd put the image in the DT and float it (the DT), giving it the width of
the wider image that could be used in there.
Then I'd use auto margin on the image so they would appear centered in
relaltion to each others.
Would that work for you?
Regards,
Thierry | www.TJKDesign.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Definition List for Products/Items with Image
Well, I tried that example, and it creates some problems with wraps in
FF. Here is what I came up with ...
html
head
style type=text/css
dt {float: left;}
dt img { float: left; }
dd {float: right; width: 150px; margin: -30px 0 10px 0;}
dl {width: 200px;}
/style
/head
body
dl
dtimg src= height=50px width=50px /Title/dt
ddmore text again aga inajhad ajkdhjakshdasj jkahdkjasdasjk adasdas
adsada adasd adadasfasfa asdad ad as ad/dd
dtimg src= height=50px width=50px /Title/dt
ddmore text again aga inajhad ajkdhjakshdasj jkahdkjasdasjk adasdas
adsada adasd adadasfasfa asdad ad as ad/dd
dtimg src= height=50px width=50px /Title/dt
ddmore text again aga inajhad ajkdhjakshdasj jkahdkjasdasjk adasdas
adsada adasd adadasfasfa asdad ad as ad/dd
/dl
/body
/html
On 4/2/06, Richard Czeiger [EMAIL PROTECTED] wrote:
OK Lachlan - following your example, let's stretch it to something
practical:
style
dl {width: 300px; }
dt img { float: left; }
/style
dl
dtimg width=100 height=100Title/dt
ddDescription lorem ipsum dolor sit emet. Description lorem ipsum dolor
sit emet. Description lorem ipsum dolor sit emet. Description lorem ipsum
dolor sit emet. Description lorem ipsum dolor sit emet. /dd
ddPrice, etc.../dd
/dl
Now the description goes under the image - not what we want at all!
So should we float the dds?
R
- Original Message -
From: Lachlan Hunt [EMAIL PROTECTED]
To: wsg@webstandardsgroup.org
Sent: Monday, April 03, 2006 1:50 PM
Subject: Re: [WSG] Definition List for Products/Items with Image
Richard Czeiger wrote:
There's a list of products/items that have the following characteristics:
Product Title
Product Image
Product Description
Possible Additional Information (let's say 'Price' or something)...
I'm thinking a Defintion List would be the way to go right?
Should the Image be a DT or a DD?
How would you style it to acheive the following layout?
www.grafx.com.au/wip/productList.gif
Maybe something like this:
dl
dtimg Title
ddDescription...
ddprice, etc...
/dl
dt img { float: left; }
--
Lachlan Hunt
http://lachy.id.au/
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
--
Dan Bowling
715 682 1401
http://www.northlander.org
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Definition List for Products/Items with Image
Also Dan, when you add another dd the -30 in the top margin makes it all
screwy...
R
- Original Message -
From: Dan Bowling [EMAIL PROTECTED]
To: wsg@webstandardsgroup.org
Sent: Monday, April 03, 2006 2:19 PM
Subject: Re: [WSG] Definition List for Products/Items with Image
Well, I tried that example, and it creates some problems with wraps in
FF. Here is what I came up with ...
html
head
style type=text/css
dt {float: left;}
dt img { float: left; }
dd {float: right; width: 150px; margin: -30px 0 10px 0;}
dl {width: 200px;}
/style
/head
body
dl
dtimg src= height=50px width=50px /Title/dt
ddmore text again aga inajhad ajkdhjakshdasj jkahdkjasdasjk adasdas
adsada adasd adadasfasfa asdad ad as ad/dd
dtimg src= height=50px width=50px /Title/dt
ddmore text again aga inajhad ajkdhjakshdasj jkahdkjasdasjk adasdas
adsada adasd adadasfasfa asdad ad as ad/dd
dtimg src= height=50px width=50px /Title/dt
ddmore text again aga inajhad ajkdhjakshdasj jkahdkjasdasjk adasdas
adsada adasd adadasfasfa asdad ad as ad/dd
/dl
/body
/html
On 4/2/06, Richard Czeiger [EMAIL PROTECTED] wrote:
OK Lachlan - following your example, let's stretch it to something
practical:
style
dl {width: 300px; }
dt img { float: left; }
/style
dl
dtimg width=100 height=100Title/dt
ddDescription lorem ipsum dolor sit emet. Description lorem ipsum
dolor
sit emet. Description lorem ipsum dolor sit emet. Description lorem ipsum
dolor sit emet. Description lorem ipsum dolor sit emet. /dd
ddPrice, etc.../dd
/dl
Now the description goes under the image - not what we want at all!
So should we float the dds?
R
- Original Message -
From: Lachlan Hunt [EMAIL PROTECTED]
To: wsg@webstandardsgroup.org
Sent: Monday, April 03, 2006 1:50 PM
Subject: Re: [WSG] Definition List for Products/Items with Image
Richard Czeiger wrote:
There's a list of products/items that have the following
characteristics:
Product Title
Product Image
Product Description
Possible Additional Information (let's say 'Price' or something)...
I'm thinking a Defintion List would be the way to go right?
Should the Image be a DT or a DD?
How would you style it to acheive the following layout?
www.grafx.com.au/wip/productList.gif
Maybe something like this:
dl
dtimg Title
ddDescription...
ddprice, etc...
/dl
dt img { float: left; }
--
Lachlan Hunt
http://lachy.id.au/
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
--
Dan Bowling
715 682 1401
http://www.northlander.org
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
