[TYPO3] tt_products - product list horizontally

[Christopher]

Hi,

On 3/15/06, racco <raczek at open.infi.pl> wrote:
> hello!
>
> I have extended tt_products so that I have a few more specific detalils
> of my products.
>
> I would like to display products horizontally so that each product's
> feature is next to other product's one - it is easier in my opinion to
> compare products like that.
>
> But I do not know how to do; if I use tables there is a problem because
> of the fact that in one row of table but in neighbouring I want to have
> the same feature of all products. You can not just extract a fragment of
> HTML that could be repeated by tt_products engine to produce valid
> output described above.
> What I did was to put in table cell another table for one product, but
> it is not elegant, beacuse it may happen that long feature of one
> product will cause disorder in the whole table (features will no loger
> be in one row, one will be higher, other lower).
>
> As long as I cant produce this using one row I know I will have to cope
> such problems.
>
> So my question for you is: have you ever encountered sth like this?
> Maybe some solutions, hits, ideas? Maybe not using tables, divs instead
> (but how exactly).
>
> I will appretiate any supporting replay, thx
> racco

I don't know what's avaialable in tt_products in the way of
templating, but perhaps this will get you started (you should of
course move the styles out of the markup!):

<ul style="width:450px; float:left; clear:both; border:2px solid #090;
padding:10px 0 0 10px;">
  <li style="width:110px; margin:0 10px 10px 0; padding:15px;
float:left; background:#090;">Lorem</li>
  <li style="width:110px; margin:0 10px 10px 0; padding:15px;
float:left; background:#090;">Ipsum</li>
  <li style="width:110px; margin:0 10px 10px 0; padding:15px;
float:left; background:#090;">Dolor</li>
  <li style="width:110px; margin:0 10px 10px 0; padding:15px;
float:left; background:#090;">Sit</li>
  <li style="width:110px; margin:0 10px 10px 0; padding:15px;
float:left; background:#090;">Amet</li>
  <li style="width:110px; margin:0 10px 10px 0; padding:15px;
float:left; background:#090;">Consectetur</li>
  <li style="width:110px; margin:0 10px 10px 0; padding:15px;
float:left; background:#090;">Adispicing</li>
</ul>

-Christopher