Teaser CP, rendering in columns instead of rows [SOLVED]

[baklavoni]

Hi to all.

I was wondering is it possible to make Teaser CP to display articles in column mode, instead of rows mode (as it is by default).
Example of wanted layout can be seen http://www.kompas.ba (1) You can see that each teaser is nicely fitted in cell.
Right now, this layout is made manually... First I made table grid in html, and then i made hidden article with 12 teaser CP's, and with SHOW_CONTENT tag I displayed those teasers in html table.
I know, this is unpopular solution and it requires a lot of manual work.

If I make 3 column x 1 row table, and in there i put three teaser CP's, then height of displayed teaser on frontend depends on article name, and it can be very long one.
With this architecture I can make automatic update of frontend, but it is not very nice to see because of different heights...
Example here http://radiom.net/wcms/index.php?id=0,4131,0,0,1,0 (2)

So any idea how to achieve layout in example (1), by using simpler method?

Thanks in advance.

[update]

You can add an own template for your teaser (with formatting as you like) and float the container to the left, giving it a width of let's say 33%. They will be lined up nicely then ending up with a 3-column-like look.

[baklavoni]

You can add an own template for your teaser (with formatting as you like) and float the container to the left, giving it a width of let's say 33%. They will be lined up nicely then ending up with a 3-column-like look.

I really tried hard to get this working, and I made a lot of variants but I didn't manage to get 3 columns.
Best I got is one column with coloured region 33% width (and 350px height) in size, and all articles (title, image and summary) each below other (much more in height than 350px).
See here http://design.ba/cms/index.php?aid=36

I took teaser_block.tmpl as start.

Here is my template:

Code: Select all

<!--TEASER_HEAD_START//-->
<div style="margin:15px 0 15px 0;background-color:#E6E9F0;padding:7px;width:33%;height:350px; float:left;">
<!--TEASER_HEAD_END//-->

<!--TEASER_ENTRY_START//-->
	<div class="prio{PRIO}">
		<h3><a href="{ARTICLELINK}">{TITLE} &raquo;</a></h3>
		{IMAGE}[CAPTION]<p>{CAPTION}</p>[/CAPTION]
		<p>{DATE:d/m/y lang=EN}[SUBTITLE] <b>{SUBTITLE}.</b>[/SUBTITLE]
		{SUMMARY} <a href="{ARTICLELINK}">&raquo;</a></p>
	</div>
<!--TEASER_ENTRY_END//-->
<!--TEASER_SPACER_START//-->
	<hr style="margin:7px 0 7px 0;padding:0;height:0;border:0;border-bottom:1px dotted #CCCCCC;clear:both" />
<!--TEASER_SPACER_END//-->
<!--TEASER_FOOTER_START//-->
	<div style="clear:both;height:1px"></div>
</div>
<!--TEASER_FOOTER_END//-->
</div>

Can you please give me some example, so I can modify it to my needs?

[update]

Try this one:

Code: Select all

<!--TEASER_HEAD_START//-->
<div style="margin:15px 0 15px 0;background-color:#E6E9F0;padding:0px;clear:both;">
<!--TEASER_HEAD_END//-->

<!--TEASER_ENTRY_START//-->
	<div class="teaserposts" style="width:33%;float:left;margin:0 1em;">
   <div class="prio{PRIO}">
      <h3><a href="{ARTICLELINK}">{TITLE} &raquo;</a></h3>
      {IMAGE}[CAPTION]<p>{CAPTION}</p>[/CAPTION]
      <p>{DATE:d/m/y lang=EN}[SUBTITLE] <b>{SUBTITLE}.</b>[/SUBTITLE]
      {SUMMARY} <a href="{ARTICLELINK}">&raquo;</a></p>
   </div>
</div>
<!--TEASER_ENTRY_END//-->
<!--TEASER_SPACER_START//-->
   <hr style="margin:7px 0 7px 0;padding:0;height:0;border:0;border-bottom:1px dotted #CCCCCC;clear:both" />
<!--TEASER_SPACER_END//-->
<!--TEASER_FOOTER_START//-->
   <div style="clear:both;height:1px"></div>
</div>
<!--TEASER_FOOTER_END//-->

as a first quick step

[baklavoni]

Try this one:
as a first quick step

definitely a step forward..., but still only one column.
Also, one of major request for this template is - to have table look, you can see it on http://www.kompas.ba

I'm not so skilled with <div> but I will try to make it to my needs, and if I fail, I'll call for help...

Thank you!

EDIT:
after commenting this line

Code: Select all

<hr style="margin:7px 0 7px 0;padding:0;height:0;border:0;border-bottom:1px dotted #CCCCCC;clear:both" />

i got what I wanted.
Thanks again!!!

[update]

One clear too much. Good luck!