Here’s an example of what I’m going for and what html I’ve been using. I’m not sure what css I should use for this, though it’s likely obvious. Or is the whole ordered list thing a fool’s errand?
In your case I to would use a table for this purpose.
It’s not hard to mount a case that displaying product info, product images, add to cart buttons and quantity text boxes in rows for each product is tabular data.
I would use a table, personally
thanks! I like the ol, mainly it looks better in context with the number, and it’s a quick way of seeing what’s in the cart. the main trick is that I don’t know how to style it so the list number is on the left of the image and the rest of the content is on the right if i’m floating the image left. So maybe i’ll just abandon the ordered part. I just thought that since it is a list of things in order, that setting it as ol made sense even if i hid the number
I am curious about something semantically in this mark up.
the header should relate to the image , right? So shouldnt the mark up be:
<li>
<h2>product name</h2>
<img>
<p></p>
</li>
?
so floating the header to the right; giving it a width of the LI width-width of (image+image margin or padding) should do it.
^ja I tend to use lists to list products and tend to use tables once someone gets into their shopping carts… but ours are like way more complicated than the one posted above
complicated shopping carts are definitely tabular data
yep agree :agree:
Off Topic:
Oh gawd bd where’d you get that sig that’s so freaking awesome I’ll have to add it when October is done… freaking awesome… like sharks with lasers shooting out of their eyes
I normally use a UL tag for product lists, this then gives me the flexibility to easily display lists as single “column” or multiple “column” lists, either by default or triggering a CSS style for a certain page type.
The image should have a null alt attribute, since the H2 and the alt have the same text. So this way is fine. I assume the img and p will be side by side like in post 1, and the h on top…
While I would semantically prefer the header before the image, floats demand they come first IF they are to sit alongside the header as well.
As for the alt text I’ve tried it both ways but usually in my case the image is clickable to the product page so I can’t have alt=“” there… and I tried it alt=“” on the example I gave above and I had a few people tell me they preferred knowing there were two (if repetitive) ways to get to the same product.
I’ve been keeping it “” for icons though.
for a shopping cart list, a definition list would most likely be a good choice.
after all, it’s presenting a term (the product) and it’s definition.
i don’t discriminate: if a list goes, than all kinds of lists go 
i think rguy84 is confusing the use of dl for forms with this use case. indeed, why on earth would you use a dl for forms? but for a shopping list, a definition list may not be such a bad choice.
and in post no. 5 I agreed with you.
The bottom line is there is no rule embedded in stone saying what elements you must or must not use to display content - there are only guide lines. Essentially everyone can use what they like.
The only rock solid rule I use is that my html must pass the w3c validator - at least for commercial work.
I suggested a table, but I was ignored. Why on earth would you use a definition list for a shopping cart? I would argue that is less appropriate than a list… if a table is out, this really should be made with divs, either as OP image in post 1, or my ASCII drawing.
The only alternative I would consider to a <table> for your purpose would be a <dl>
And <dl> would not be appropriate at all…
My first preference for the OPs’ markup is still a <table>, since it can be argued it is tabular data, but if for some reason <table> was not an option then I would use the heading as the <dt> and put the image and <p> in the <dd>
tisk tisk
Semantically speaking you should never use H1-6 in this way. Think of h’s like structuring an outline. The image should have a null alt attribute, since the H2 and the alt have the same text. So this way is fine. I assume the img and p will be side by side like in post 1, and the h on top…
<li>
-----------------------------
\\ header \\
------------------------------
\\ \\\\ \\
\\ img \\\\ para \\
\\ \\\\ \\
--------------------------------
</li>
the main trick is that I don’t know how to style it so the list number is on the left of the image and the rest of the content is on the right if i’m floating the image left.
Not tested:
<ol>
<li>
<img src="moonboots.png" alt="moon boots">
<h2> Moon boots</h2>
<p>platinum moon boots size 57</p>
</li>
<li>
<img src="japanese.png" alt="manga hair">
<h2>Manga Hair</h2>
<p>Comes in blue, purple, white and other strange colours</p>
</li>
<li>
<img src="cats.png" alt="LOLCAT calendar">
<h2>LOLCAT Calendar</h2>
<p>Calendar comes with... LOLCATS</p>
</li>
<li>
<img src="sharks.png" alt="laser sharks">
<h2>Sharks with lasers shooting out of their eyes</h2>
<p>f*cking awesome!</p>
</li>
</ol>
ol {
list-style: decimal;
margin: 0;
padding-left: 2em; /*whatever, makes room for bulletz*/
}
li's are already blocks cool thanx
ol li {
overflow: hidden;
}
li img {
float: left;
width and height unless set in HTML (which you should always do anyway);
}
li h2 {
h2 styles, bad*ss fontz, whatever;
}
li p {
whatever man;
}
Not sure what else to add in there… you can’t say the image has to match the height of the paragraph cause people have different fonts and people can text enlarge and all that… so it’ll not necessarily be awesome but whatever
anyway numbers should appear for most browsers… lessee, IE was special as usual…
no haslayout on the ol
well haslayout on the li though
but setting overflow sets haslayout in IE7 so that’s cool
set something for IE6 like height=“heightofImage” or something for IE6 haslayout.
I’ll agree if the info displayed is indeed more intricate than a header, a paragraph, and an image… even sites that use web standards use tables for shopping stuff.
However I’ll argue that if it’s JUST these three things, you could go either way.
If you choose tables, write them correctly and accessibly: use th’s for headers and use the “scope” attribute on both headers and td’s acting like headers.
Nah, a list would be fine (our ecommerce site is switching from a nasty template to a nice one with lists for products) however be careful about ol’s. Does it really matter what order the products are listed in? Does it break and make no sense if they are in some different order? A ul might be better depending.
Are the numbers supposed to appear? You might find trouble cross-browser, but see.
li’s are blocks, so you don’t have to do much for them. You could use overflow: hidden to make sure the image is entirely wrapped in the li even if the text of the p isn’t long enough. This also means the next li doesn’t have to clear anything. Trigger Haslayout in IE6 for this.
You can float the image left, leave the h2 and p alone and maybe give the image some right margin to push the inline text in the h2’s and p’s away (remember the actual blocks of h2s/p’s are sliding UNDER the image, except in IE if you trigger Haslayout by setting dimensions or something on them).
If this is more a random-ish sequence and not really a list (think of a grocery list or a web site menu… they are not complete if you don’t have everything, and you’d put bullets next to them if they were listed in plain text to you on paper, so you’d not call them a sequence), then you could consider just a row of divs instead of li’s.
I do have an example of that:
Example (this is a dummy page representing a future page, so nothing there works… it is for code only). Each brand name is in a div, and the images are wrapped in p’s mostly just to avoid the whole “inline sitting loose next to a block” even though it’s legal and even though the IE bugs are taken care of if the image is turned into block context by getting floated… meh.
* edit duh I see now that it’s a Shopping cart so yes, a list is absolutely appropriate and the only issue is, is the order in which they’ve added the items important? If so, keep the ol. If not, switch to ul.