I'm building a new market for a friend and using QuickCart v6.5. I am trying things with the CSS to manage to have a product list similar to this: http://lasocietedesplantes.com/?p=productsList&iCategory=1
I understood that this website also used QuickCart and maybe an older version of it. I looked at the source code, but not so sure of what I see.
The website I am working on: http://lessemencesdubatteux.ca/?verdures,6
I found this topic: http://opensolution.org/forum/?iTopic=10788 I managed to put my products in a list. But I am still searching to put it like I want, in my objective.
Okay, I managed to do what I needed to. If you ever need to do something relatively similar, here is my code. It is not so clean, because I played with the "margins" and "paddings" but it appear the way I wished to.
It's in Style.css of my template. I used the custom template "Outdoor". Maybe it can influence some datas, I am not so sure.
/*#products .list li{float:left;}*/ #products .list li{position:relative;clear:none;width:100%;margin-left:10px;padding:5px 10px;text-align:left;} /*Ligne ajoutée, pour créer la liste de produits*/
#products li .photo{font-size:0px;line-height:0px;} /*Disposition de la photo dans la liste*/
#products li .photo img{border:2px solid #dcc7a7;padding:1px;}
#products li .photo a:hover img{border-color:#f0efcd;}
#products li h2{padding:5px 0 5px 0;font-weight:bold;font-size:1.083em;}
#products li h2 a{text-decoration:none;}
#products li h2 a:hover{text-decoration:underline;}
#products li h3{padding:5px 0 9px;text-align:left;font-weight:normal;font-size:0.917em;}
#products li h3, #products li h3 a{color:#764830;}
#products li h3 a:hover{color:#d01c02;}
#products li h3 em{padding:0 5px;}
#products li div.description a{color:#764830;}
#products li div.description a:hover{color:#d01c02;}
#products li .price, #products li .noPrice{position:absolute; bottom:40px ;right:20px; margin:0px 0 5px 0;background-color:inherit;color:#d01c02;font-weight:bold;text-decoration:none;} /*Position du prix*/
#products li .price em{background:inherit;color:#764830;font-style:normal;padding-right:5px;}
#products li .price strong{font-size:1.167em;}
#products li .noPrice strong{font-size:1.083em;}
#products li .price span{padding-left:4px;font-size:1.083em;color:#764830;}
#products li .basket{font-size:0.917em;font-weight:bold;padding-left:3px;}
#products li .basket a{display:block;padding:5px 32px 5px 7px;color:#fff;background:url('img/button_cart.png') no-repeat right center;text-decoration:none;}
#products{clear:both;margin-top:10px;}
#products .list li{clear:none;width:700px;margin-left:0px; margin-right:10px; padding:20px 0; border-top:1px solid #cabfa5;text-align:left;} /*Width ajustée aussi pour la liste. !!!Watcher les marges et les paddings pour que ça fitte avec #list Products li. d'en haut. */
#products li.i1{clear:both;margin-left:0;}
#products li h3{text-align:center;}
#products li div.description{position:absolute; top:30px; left:200px; margin:20px 0 0;text-align:justify;} /*Modifications pour créer l'effet de liste*/
#products li .basket{position:absolute; right:20px; bottom:10px; width:150px;margin:10px auto 0;} /*Où se retrouve le bouton "Ajouter au panier" */
