Puces Dans Description Produit

[tolosa 0]

Bonjour,

 

dans le back office, à la description d'un produit, les puces sont en retrait par rapport au texte.

Dans le front office, à la fiche produit, les puces ne sont plus en retrait, voire même décalées sur la gauche par rapport à la zone de texte.

 

Cela n'est pas essentiel pour le fonctionnement mais est il possible de le corriger?

[Simon développeur PEEL 0]

Bonjour,

 

Une classe CSS défini dans le fichier de style de votre boutique doit s'appliquer sur votre liste. Vous pouvez voir quels sont les styles appliqués sur un élément HTML avec firebug par exemple (module de firefox), ou un outil équivalent intégré selon le navigateur.

[tolosa 0]

Cette anomalie d'affichage se produit sur un site peel shopping 7.0 d'origine.

En revanche, dans onglet d'une fiche produit , les puces sont alignées correctement.

[Simon développeur PEEL 0]

Bonjour,

Ce n'est une anomalie, mais une application d'une régle CSS générique sur PEEL. Il faut trouver cette règle et la modifier, ou en créer une nouvelle qui sera prioritaire sur la règle plus général.

[tolosa 0]

Bonsoir, je suis désolé de revenir sur ce sujet mais je ne parviens pas à trouver ce qu'il faut modifier pour que la mise en forme du texte des pages produits du front office soit similaire à celle de la "description affichage dans les fiches produits" dans le back office (décalage des puces inexistant)

 

De plus, lorsque je visualise mon site depuis un smartphone, les dimensions du texte des pages produits et de la zone "contenu accueil du site" accessible par la gestion du contenu HTML on des dimensions anormales.

 

Quelqu'un peut il m'aider à résoudre ceci?

 

Bonne réception

[Simon développeur PEEL 0]

Bonjour,

 

Avez-vous un lien vers le produit en question ?

[Simon développeur PEEL 0]

Bonjour,

 

Suite au votre message privé, il faut modifier les classe CSS div.fp_image_grande et .affiche_critere_stock :

div.fp_image_grande {
  float: left;
  margin-bottom: 20px;
  margin-right: 20px;
  text-align: center;
  vertical-align: top;
}

et

.affiche_critere_stock {
  background-color: #F2F1EE;
  border: 1px solid #9E9D9C;
  color: #000000;
  float: right;
  margin-top: 10px;
  padding: 4px;
  width: 400px;
}

[tolosa 0]

Bonsoir, je souhaitais que les puces soient décalées vers la droite comme pour l'exemple ci dessous, idem que lorsque l'on met en forme le texte dans le back office.

• test1
• test2
• test2

Cependant, grâce à votre modification de code, les puces ne sont plus masquées par les photos.

 

Merci

[Simon développeur PEEL 0]

Bonjour,

 

Vous pouvez ajouter la règle

.description {
    float: left;
}

dans le fichier screen.css

[tolosa 0]

Bonsoir,

 

la mise en forme devient en effet correcte avec ces lignes mais le bloc de texte n'est plus situé à droite des images mais en dessous.

[Simon développeur PEEL 0]

Bonjour,

 

J'ai fait un test avec firebug sur firefox (sur PC) sans voir de problème. Quel navigateur utilisez-vous ?

[tolosa 0]

Bonjour,

firefox 19.0.2 sur pc avec adblock plus 2.2.3

[Gilles Boussin 0]

Bonjour,

 

Je vous invite à utiliser Firebug pour vos modification CSS. Si vous avez un bloc float qui se met en dessous d'un autre au lieu d'à côté, il s'agit la plupart du temps d'une somme de largeur trop importante par rapport au container parent, ou à un clear à retirer.

 

Gilles