Textpattern CMS

#1 2008-09-20 12:34:35

Gallex

Member

Registered: 2006-10-08

Posts: 1,308

product page with 2 colums

i have a product page and i want to display products in 2 columns like this:

1 2
3 4
5 6
…

problem is: then 1 is longer than 2, the 3 stucks behind 1
take a look

i tryed pseudo class :after but it didn’t help.

i think the solution would be to get 1 and 2, 3 and 4, and so on into one div, but i can’t to think out how?

my product page:

<txp:if_section name=“teraviljatooted”>
<txp:article form=“tooted” limit=“999” />
</txp:if_section>

and form tooted:

<div class=“kuulutus”>
<txp:if_article_list>
<txp:upm_article_image type=“popup” limit=“1” />
<h6><txp:title /></h6>
<txp:body />
<p><a href=“http://www.eestimahe.ee/tellimine”>Telli >></a></p>
</txp:if_article_list>
</div>

can you help me or maybe you have better solution?

#2 2008-09-20 13:06:36

els

Moderator

From: The Netherlands

Registered: 2004-06-06

Posts: 7,458

Re: product page with 2 colums

Maybe you could use zem_nth to insert a div/br/whatever with clear:both;/clear:left; after every 2nd article?

Last edited by els (2008-09-20 13:09:02)

#3 2008-09-20 16:03:47

masa

Member

From: Asturias, Spain

Registered: 2005-11-25

Posts: 1,091

Re: product page with 2 colums

Els is right, that should work.

However have you considered simply giving them a specific height? IMHO it makes the design look neater if they’re all the same.

#4 2008-09-21 08:59:31

Gallex

Member

Registered: 2006-10-08

Posts: 1,308

Re: product page with 2 colums

masa wrote:

Els is right, that should work.
However have you considered simply giving them a specific height? IMHO it makes the design look neater if they’re all the same.

yeah, but i’m afraid that some products descriptions can be double as long as those on my page

#5 2008-09-21 09:30:43

Gallex

Member

Registered: 2006-10-08

Posts: 1,308

Re: product page with 2 colums

Els wrote:

Maybe you could use zem_nth to insert a div/br/whatever with clear:both;/clear:left; after every 2nd article?

i installed it and i’m almost there…but this big gap between 2 and 3 appears now :(
take a look

my article form:

<div class=“kuulutus”>
<txp:if_article_list>
<txp:upm_article_image type=“popup” limit=“1” />
<h6><txp:title /></h6>
<txp:body />
<p class=“telli”><a href=“http://www.eestimahe.ee/tellimine”>Telli >></a></p>
</txp:if_article_list>
</div>
<txp:zem_nth step=2 of=2><div style=“clear:both;”></div></txp:zem_nth>

#6 2008-09-21 11:27:34

masa

Member

From: Asturias, Spain

Registered: 2005-11-25

Posts: 1,091

Re: product page with 2 colums

It happens because your sidebar is floated. The clearing element cancels all floats and causes the product containers to drop below the bottom of the sidebar.

I’ve come across this a few times, but I’m not sure what the most elegant solution is. I think you should be able to wrap pairs of product containers in a div instead of inserting a clearing element. You could also position the sidebar absolutely instead of floating it, but personally I try to avoid absolute positioning.

Perhaps someone else will have a better idea.

#7 2008-09-21 11:48:34

els

Moderator

From: The Netherlands

Registered: 2004-06-06

Posts: 7,458

Re: product page with 2 colums

You can do something like this, the only problem is that probably at the end of the list you’ll end up with an empty div. You’d have to test it though.

<txp:if_first_article><div class="row"></txp:if_first_article>
<div class="kuulutus">
<txp:upm_article_image type="popup" limit="1" />
<h6><txp:title /></h6>
<txp:body />
<p class="telli"><a href="http://www.eestimahe.ee/tellimine">Telli >></a></p>
</div>
<txp:zem_nth step=2 of=2></div><div class="row"></txp:zem_nth>
<txp:if_last_article></div></txp:if_last_article>

CSS: .row {float: left;}

Edit: it might be something smd_if can solve.

Last edited by els (2008-09-21 11:51:56)

#8 2008-09-21 12:57:32

Gallex

Member

Registered: 2006-10-08

Posts: 1,308

Re: product page with 2 colums

Els wrote:

You can do something like this, the only problem is that probably at the end of the list you’ll end up with an empty div. You’d have to test it though.

yes, it ended up with an empty div but that’s not problem at all – it works and this is the main!
how? it’s just beyond my mind :) thank you els!

masa: I’ve come across this a few times, but I’m not sure what the most elegant solution is. I think you should be able to wrap pairs of product containers in a div instead of inserting a clearing element.

masa: yes, it came into my head at thirst place too, but how to get those pairs of products into one container div…?
it seems me the most elegant way to solve this. can anyone work out this?

#9 2008-09-21 13:13:26

masa

Member

From: Asturias, Spain

Registered: 2005-11-25

Posts: 1,091

Re: product page with 2 colums

Gallex wrote:

masa: yes, it came into my head at thirst place too, but how to get those pairs of products into one container div…?
it seems me the most elegant way to solve this. can anyone work out this?

That’s what Els’ code does… or did I misunderstand you?

#10 2008-09-22 12:26:26

Gallex

Member

Registered: 2006-10-08

Posts: 1,308

Re: product page with 2 colums

masa wrote:

That’s what Els’ code does…

of course! sorry, sorry :)