Produits en grille -> pb, help ! [Résolu]

[bigo]

Bonjour,

 

Je suis entrain de modifier le template par défaut de prestashop en local et je bloque sur un point, je souhaite que l'affichage des produits soit en grille par défaut, j'ai modifier le code de la façon suivante cependant un problème d'affichage subsiste :

 

 

 

product-list.tpl :

 

 

{/foreach}

</ul>

<br clear="all" />

 

voici tout ce que j'ai modifier dans le tpl.

 

 

product_list.css :

 

 

#product_list li {

float: left;

width: 25%;

}

 

#product_list li a {

color: #4a4a4a;

text-decoration: none

}

#product_list li .product_title_link {

background:url(../img/arrow_right_2.png) no-repeat 100% 4px transparent;

padding-right: 8px;

}

 

#product_list a.product_img_link {

margin-left: 5px;

}

 

#product_list li h3 {

text-align: center;

font-size:13px;

color:#4a4a4a;

padding:5px 0 10px 0;

}

 

#product_list li .right_block {

text-align: center

}

 

#product_list li .price {

margin-bottom: 15px;

font-weight:bold;

font-size: 18px;

color:#3c9806

}

 

#product_list li span.availability {

color: #488C40;

}

 

 

Tout est parfait si ce n'est que sur certaines lignes (pas toutes) l'affichage ne se fait pas bien, voici un screenshot :

 

Sur certaines lignes j'ai mes 4 produits nickel et sur d'autre j'en ai qu'un, ou deux,

Ce serait top si quelqu'un pouvait m'aiguiller sur une solution, merci d'avance

Edited October 4, 2012 by bigo (see edit history)

[bigo]

je ne suis pas sur que les png s'affichent correctement, je met un .jpg

 

[Atch]

Bonjour,

 

Attibuez une hauteur (height) à votre li dans le css...

 

V++

 

Atch

[bigo]

Si simple... merci beaucoup !

[utaku]

Hello, super merci pour cette astuce

 

ça m'évite de payé un module

 

Par contre j'ai fait quelques modifications pour régler certaines choses, comme par exemple le nom au-dessus de l'image des produits

 

Voici le code a changer dans product-list.tpl

 

<div class="center_block">

<h3><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|escape:'htmlall':'UTF-8'|truncate:35:'...'}</a></h3>

<a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">

<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />

{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}

</a>

<p class="product_desc"><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}" >{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}</a></p>

 

j'ai donc simplement mis la ligne H3 en premiers

 

Par contre j'aimerais bien trouver comment faire pour centré correctement l'image dans le block, j'ai réussi avec le texte mais l'image non (j’ai juste rajouté un margin de 10px pour donner l'illusion )

 

Qui pourraient m’aider ? Le lien de mon site se trouve en signature

 

Merci d'avance

 

johan

[Atch]

Hello, super merci pour cette astuce

 

ça m'évite de payé un module

 

Par contre j'ai fait quelques modifications pour régler certaines choses, comme par exemple le nom au-dessus de l'image des produits

 

Voici le code a changer dans product-list.tpl

 

 

 

j'ai donc simplement mis la ligne H3 en premiers

 

Par contre j'aimerais bien trouver comment faire pour centré correctement l'image dans le block, j'ai réussi avec le texte mais l'image non (j’ai juste rajouté un margin de 10px pour donner l'illusion )

 

Qui pourraient m’aider ? Le lien de mon site se trouve en signature

 

Merci d'avance

 

johan

 

Salut Johan,

 

Pour centrer l'image il faut un margin : 0 auto ; et un width: largeur de l'image; pour permettre au "margin" de calculer le centrage du block...

 

 

 

#product_list a.product_img_link {


border: 1px solid #CCCCCC;
display: block;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 122px;
}

 

V++

 

Atch

[utaku]

Hello Atch,

 

Merci pour cette petite astuce, j'ai donc fait les modifications comme tu me la dit, mais je n'ai constatez aucun changement.

 

Toute fois j'ai laisser tes modifications, en rajoutant une autre dans cette partie la

 

#product_list a.product_img_link {

margin-left: 15px;

}

 

En fait je ne sais pas pourquoi mais j'ai 2 lignes avec #product_list a.product_img_link {

 

L'une contient ce que j'ai mis ici au dessus et l'autre contient celà

 

#product_list a.product_img_link {

overflow:hidden;

position:relative;

float: left;

display:block;

margin-right: 14px;

border: 1px solid #CCCCCC;

 

et voici l'entièreté du css, étrangement celà fonctionne maintenant

 

ul#product_list {

list-style-type: none

}

#product_list li {

margin-bottom: 14px;

padding: 12px 8px;

border: 1px solid #eee;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px

}

#product_list li a {

color: #374853;

text-decoration: none

}

 

#product_list li .left_block {

float:left;

/*padding-top:58px;

width:15px

}

#product_list li .left_block .compare label {display:none;}

 

#product_list li p.compare input {

vertical-align: text-bottom

}

 

#product_list li .center_block {

float: left;

padding:0 0px;

text-align: center;

/*width: 342px;/* 356 */

border-right:1px dotted #CCCCCC

}

#product_list a.product_img_link {

overflow:hidden;

position:relative;

float: left;

display:block;

margin-right: 14px;

border: 1px solid #CCCCCC;

}

#product_list a.product_img_link img {

display: block;

vertical-align: bottom;

margin: 0 auto;

width: 122px;

 

}

#product_list li span.new {

display: block;

position: absolute;

top: 15px;

right:-30px;

padding: 1px 4px;

width: 101px;

font-size:10px;

color: #fff;

text-align: center;

text-transform: uppercase;

-moz-transform: rotate(45deg);

-webkit-transform: rotate(45deg);

-o-transform:rotate(45deg);

-ms-transform: rotate(45deg);

background-color: #990000

}

#product_list li h3 {

padding:0 0 10px 0;

font-size:13px;

color:#000

height: 130px;

}

#product_list li a {

color: #000;

text-decoration: none;

}

 

#product_list li p.product_desc {

overflow: hidden;

padding:0;

line-height:16px;

}

#product_list li p.product_desc,

#product_list li p.product_desc a {

color:#666;

}

 

#product_list li .right_block {

position:relative;

float: left;

width: 145px;

text-align: right

}

#product_list li .discount, ul#product_list li .on_sale, ul#product_list li .online_only {

display: block;

font-weight: bold;

color: #990000;

text-transform: uppercase

}

#product_list li .discount {

position:absolute;

top:0;

right:0;

display: inline-block;

font-weight: bold;

padding: 1px 5px;

font-size: 10px;

color: #fff;

text-transform: uppercase;

background: none repeat scroll 0 0 #9B0000

}

#product_list li .online_only {

margin:0 0 10px 0

}

#product_list li .content_price {

margin:20px 0 10px 0;

}

#product_list li .price {

display: block;

margin-bottom: 15px;

font-weight:bold;

font-size: 18px;

color:#990000

}

#product_list li span.availability {

display:none;

color: #488C40

}

#product_list li .ajax_add_to_cart_button {

padding-left: 20px

}

#product_list li .ajax_add_to_cart_button span {

display: block;

position: absolute;

top: -1px;

left: -12px;

height: 26px;

width: 26px;

background: url(../img/icon/pict_add_cart.png) no-repeat 0 0 transparent

}

#product_list li .lnk_view {

display: block;

margin-top:15px;

padding:0 10px;

border:none;

font-weight:bold;

color:#0088CC;

background:url(../img/arrow_right_1.png) no-repeat 100% 4px transparent

}

#product_list li .lnk_view:hover {text-decoration:underline}

 

 

#product_list li {

float: left;

height:300px;

width: 29%;

text-align: center;

}

 

#product_list li a {

color: #4a4a4a;

text-decoration: none

}

#product_list li .product_title_link {

background:url(../img/arrow_right_2.png) no-repeat 100% 4px transparent;

padding-right: 8px;

}

 

#product_list a.product_img_link {

margin-left: 15px;

}

 

#product_list li h3 {

text-align: center;

font-size:13px;

color:#4a4a4a;

padding:5px 0 10px 0;

}

 

#product_list li .right_block {

text-align: center

 

}

 

#product_list li .price {

margin-bottom: 15px;

font-weight:bold;

font-size: 18px;

color:#3c9806

}

 

#product_list li span.availability {

color: #488C40;

}

 

 

Merci à toi,

 

johan