Table or...?

[lancebvs]

So I will be listing some products. Basically it will be just an image with text next to it. Is it best to create this in a table and just put the image and text in seperate columns or is better to use css? If css, then what is the best approach?

[Jake Arkinstall]

Well, I'd use:

<ul>
     <li>
         <img ... />
         <p>....text...</p>
     </li>
     <li>
         <img ... />
         <p>....text...</p>
     </li>
     <li>
         <img ... />
         <p>....text...</p>
     </li>
     <li>
         <img ... />
         <p>....text...</p>
     </li>
</ul>

Then in the CSS, make sure you use list-style-type: none; and just style it how you'd like.

[oddz]

Well without seeing exactly what your doing and the layout your trying to achieve I would go for a list.

<ul class="products">
	<li class="product">
		<p></p>
		<img src="" width="" height="" alt="">
	</li>
	<li class="product">
		<p></p>
		<img src="" width="" height="" alt="">
	</li>
</ul>

[lancebvs]

I will be doing something similar to this:

http://www.prosupexusa.com/polyester_strings.html


But my website will have an image next to the text.

[paul_wilkins]

<ul class="products">
	<li class="product">
		<p></p>
		<img src="" width="" height="" alt="">
	</li>
	<li class="product">
		<p></p>
		<img src="" width="" height="" alt="">
	</li>
</ul>

The product class is unnecessary and a waste, due to being able to use a css selector instead to target the same elements.

.products li

[oddz]

Yeah… but its more definitive.

.products .product

Also, if later a nested list needs to be added or something then you would need to revise the selector(s). By including the class you avoid the potential need for change. Plus if the entity is named I find it makes it much easier to read when wadding through lines of mark-up.

[paul_wilkins]

That's a common error that's performed by people beginning with css, and is often denoted by the term classitis.

See http://www.alistapart.com/articles/k...ewithoffspring which provides an almost exact replica of your troubled situation, and information on how you should deal with it.

CSS selectors are handy things. They make coding CSS easier, sure, but they can also help keep your markup clean. For example, here’s a chunk of code that doesn’t use selectors well:

<ul class="products">
  <li class="product">Item 1</li>
  <li class="product">Item 2</li>
  <li class="product">Item 3</li>
</ul>

This textbook class-itis leads to messy CSS:

[oddz]

Many of those advanced selectors aren't supported in older browsers. Many such as the nth-child aren't supported in most browsers yet.

Plus, it doesn't seem right to taget all list items when what you really mean is a product entity essentially.

With said, I don't hold the same beliefs for those reasons.

maybe in five to ten years time when those advanced selectors can be used all around I'll change my belief, but until then I find it much easier to name things what they are and directly target them without getting to carried away.

[paul_wilkins]

That is correct, and is why most of the article is about providing support to older browsers that don't support advanced selectors. Try having a closer read.

My purpose in bringing forth the article was to help demonstrate that css experts move as far away as they can from needlessly repeating vast numbers of class names.

[oddz]

Using javascript to do that is a hack. It seems no better then using tables for layout.

Don't get me wrong I understand the importance of progressive enhancement, but that to me just seems like unnecessary code bloat.

Furthermore, if your coding to a library like that when js is disabled your site will probably be shambles. That is unless you add more styles to account for that scenario on top of the styles that use those advanced selectors. Seems like more work then what it is really worth.

[paul_wilkins]

Yes it is a hack. It one that I don't use myself, but where the need is required, I would prefer to use that technique in preference to attempting to reinvent the wheel myself.

This is getting sidetracked from the initial point of the article. Using id attributes and class names where they are not required is a waste, and the abuse of them has been formalised under the terms divitis and classitis. Please learn about them and try not to abuse them.

[oddz]

I don't agree with that. I think creating unnecessary dependencies between CSS and Javascript is a waste. That approach seems far more ill-conceived then using class tags in a away to semantically differentiate key elements.

[paul_wilkins]

I get the feeling that there is a misunderstanding going on here.

My point of view is not that javascript must be used. My objection has nothing to do with javascript.

My objection is that the needless repetition of class names is a bad idea.
The following is bad code:

<ul class="products">
  <li class="product">Item 1</li>
  <li class="product">Item 2</li>
  <li class="product">Item 3</li>
</ul>

The reason why it's bad is that the product class is a waste of time and effort, and you will need to repeatedly add that same class name for every single list item.

The following is good code:

<ul class="products">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSS has been designed from the very beginning to enable you to easily target those elements, by using only a small selection of identifiers or class names.

.products {
     ...
}
.products li {
    ...
}

This forum really isn't the right venue for this discussion. The CSS Forum is a much better place to discuss the details of this, as well as to confirm from the experts that are there on the techniques that are most appropriate to apply.

[Jake Arkinstall]

Ok guys, enough's enough. Fairly new user asks a simple question and won't appreciate people arguing about something small like this .

It is incorrect to say that oddz' code is erroneous, both are correct - it's all down to personal practise.

Personally I'd give the list a class and only give a child listitem a class if it requires unique styling, such as the first item, perhaps.

[oddz]

Not really a argument just a a disagreement. With that said, I see both sides of the argument. The application of the class name though wasn't meant to be for styling purposes but semantic ones.

[Cyrus_vtn]

would agree with pmw57, waste of a class

[oddz]

deleted

[cooper.semantics]

I see both sides of the argument:

@Oddz
You are looking more towards the class design pattern - giving the document extra meaning. More of a microformats approach.

@Paul
You are correct for the majority of developers who do not know classes are used for the lack of vocabulary html provides us.

For example:

hAtom:
<h2 class="entry-title">Entry Title</h2>

Opposed to:
<h2>Entry Title</h2>

So in all actuality both of you guys are correct on your given points

[paul_wilkins]

I see both sides of the argument:

@Oddz
You are looking more towards the class design pattern - giving the document extra meaning. More of a microformats approach.

I used to be quite heavily involved in the microformats community when the hCard pattern was being developed, so if this was an actual recognised microformat pattern, I apologise. If so though, a reference to the documentation for the pattern then becomes invaluable.