How to align products pictures in three column display

kokirk

2012-05-04 05:38

Hi everyone,

I found if the length and height of #products li h2 and #products li h3 are different in three column display mode, the products pictures will not be aligned well.
How can I solve this problem ??

For example, www.gondo.com.tw/align.jpg

Thank you !

» Quick.Cart v5.x

Kirk Ko

treewood (OpenSolution)

2012-05-04 07:41

1. move product name and pages tree under images?
2. delete pages tree from products list?

kokirk

2012-05-04 10:25

To treewood,

I prefer:
1. move product name and pages tree under images?

But if possible, please also teach me how to delete pages tree from products list.

Thank you

Kirk Ko

treewood (OpenSolution)

2012-05-07 07:35

go to manual:
http://opensolution.org/Quick.Cart/docs/?id=en-design#1

pages tree in products list is available in #products li h3. hide it in styles and problem solved

boboo

2012-05-07 09:41

It is possible,
but it takes a bit of time.
http://www.kimla.de/bilder/qc/same_height.jpg

qc-plugins.kimla.de

kokirk

2012-05-09 10:38

Dear boboo,

Could you teach me how you did that ??

Kirk Ko

boboo

2012-05-13 08:27

To hide the pagesTree in css in like to "sweep this under the carpet".
Setting a bigger static height for h3 doesn't solve the problem too.
You have to set the height dynamic, depending on length (height) of the h3 on every sub/page.
With php - no chance. So we have to help us with js.
In the pages_default.tpl add a class in the mentioned h3 element.
<h3>$aData[sPages]</h3> change to:
<h3 class="heightH3">$aData[sPages]</h3>
Now, we can recognize this h3-element, even if there are another h3 on the page.
Create function equalHeightH3() in common.js
function equalHeightH3(){
// we search all h3 elements
var allElems=document.getElementsByTagName('h3');
var iMaxH=0,iMaxTemp=0;
// now we search the highest h3 with class="heightH3"
for(var i=0;i<allElems.length;i++){
var thisElem=allElems[i];
if(thisElem.className&&thisElem.className.search(/heightH3/)!=-1){
iMaxTemp=thisElem.getBoundingClientRect().bottom-thisElem.getBoundingClientRect().top;
if(iMaxTemp>iMaxH)
iMaxH=iMaxTemp;
}
}
//now we set this biggest height to all h3 with class="heightH3"
for(var i=0;i<allElems.length;i++){
var thisElem=allElems[i];
if(thisElem.className&&thisElem.className.search(/heightH3/)!=-1)
thisElem.style.height=iMaxH+'px';
}
} // end of function equalHeightH3

Now we have to call this funcion loading the page with products:
In pages_default.tpl direct under:

put:
<script type="text/javascript">


Thats all.
The same procedure is to do with li element, if you want to get the same height of products containers. It helps then to set the position of basket-button and price.