Problemes de centrages...

[tgw]

Bonjour,

 

je viens à vous car ma boutique est presque terminée mais il me reste quelques petits problèmes de centrages...

 

Toutes les modifications que j'ai tenté se sont vouées à l échec... et le concepteur de mon thème ne me répond pas ...

 

J'utilise la version de prestashop 1.4.6.2.

 

 

Image 1 :

 

 

J'aimerais centrer le prix et le choix de la couleur.

 

 

 

Image 2 :

 

J'aimerais centrer les titres, les images, les prix, les stocks ainsi que le cadre "nouveau"

 

 

 

 

Image 3 :

 

J'aimerais aussi centrer les images et leur titre ( j ai trouvé pour le descriptif et le prix )

 

 

(NE TENEZ PAS COMPTE DES CERCLES ROUGES)

 

 

 

Je vous remercie pas avance de bien vouloir m'aider

[Stéphane Chonez]

bonjour,

 

repérez l'élément parent de chaque bloc et appliquez un text-align:center;

par ex pour l'image 2 cela doit concerner quelque chose comme #product_list li de product_list.css

 

#product_list li {
...
  text-align:center;
...
}

[tgw]

Merveilleux, merci beaucoup pour ton aide.

 

J'ai tout centré

 

pour l'image 1 est il possible de centrer "Choisissez un coloris :" et les carrés de couleurs ?

[Stéphane Chonez]

bonjour,

 

toujours dans product_list.css repérez ceci #color_picker #color_to_pick_list et ajouter une largeur et un margin comme ceci

#color_picker #color_to_pick_list {
   ....
   margin: 0 auto;
   width: 20%;
...
}

attention à la valeur de la largeur car selon le nb de choix de couleurs celà peut varier.

[tgw]

#color_picker et #color_to_pick_list ce trouvaient dans product.css pour mon thème, j'ai juste ajusté la marge à 38px et tout est impeccable.

 

Merci beaucoup

[daniel3000]

Bonjour,

 

merci pour ces explications, mais je souhaiterais si possible une précision (vu dans la réponse de Stéphane Chonez):

"... margin: 0 auto;

width: 20%; }

attention à la valeur de la largeur car selon le nb de choix de couleurs celà peut varier. "

 

Si j'ai bien compris ce code, on joue sur la largeur de chaque élément et on lui donne des consignes de marge.

Mais la dernière phrase de Stéphane Chonez (soulignée) signifie-t-elle que, pour rester idéalement centré, il faudrait changer le % en fonction du nombre d'éléments à afficher, et que sinon on aura des décalages inévitables?

 

Merci par avance de bien vouloir me le confirmer,

car je suis dans le même cas que tgw pour son image 1 (centrer des éléments dont le nombre est variable à l'intérieur d'un autre élément fixe), et j'ai ce décalage "variable" en appliquant la méthode ci-dessus .

j'essaie donc de passer par le padding du bloc parent, sans succès pour le moment (mes positions varient en fonction du nombre d'images).

http://www.prestashop.com/forums/topic/160150-ding-ou-padding-centrer-les-images-sous-categories/

 

Cordialement. Daniel

[Stéphane Chonez]

bonjour,j'ai

 

p-e une solution qui permet d'automatiser la largeur du bloc selon le nb de couleurs....

 

dans le fichier product.tpl repérez :

 

{if isset($colors) && $colors}
 <!-- colors -->
 <div id="color_picker">
  <p>{l s='Pick a color:' js=1}</p>
  <div class="clear"></div>
  <ul id="color_to_pick_list" class="clearfix">
  {foreach from=$colors key='id_attribute' item='color'}
   <li><a id="color_{$id_attribute|intval}" class="color_pick" style="background: {$color.value};" onclick="updateColorSelect({$id_attribute|intval});$('#wrapResetImages').show('slow');" title="{$color.name}">{if file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}<img src="{$img_col_dir}{$id_attribute}.jpg" alt="{$color.name}" width="20" height="20" />{/if}</a></li>
  {/foreach}
  </ul>
  <div class="clear"></div>
 </div>
 {/if}

 

remplacer par

{if isset($colors) && $colors}
 <!-- colors -->
 <div id="color_picker">
  <p>{l s='Pick a color:' js=1}</p>
  <div class="clear"></div>
  <ul id="color_to_pick_list" class="clearfix" style="margin:0 auto; width:{$colors|@count*10}%;" >
  {foreach from=$colors key='id_attribute' item='color'}
   <li><a id="color_{$id_attribute|intval}" class="color_pick" style="background: {$color.value};" onclick="updateColorSelect({$id_attribute|intval});$('#wrapResetImages').show('slow');" title="{$color.name}">{if file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}<img src="{$img_col_dir}{$id_attribute}.jpg" alt="{$color.name}" width="20" height="20" />{/if}</a></li>
  {/foreach}
  </ul>
  <div class="clear"></div>
 </div>
 {/if}

à tester

 

à tester

[daniel3000]

Bonsoir,

 

je vais d'abord re-relire tout ça, et voir de mon coté comment je peux l'adapter pour les images des sous-catégories en page catégorie (même ^roblème de centrage).

 

Merci.

Daniel