[Résolu] Comment centrer

[cepillo]

Bonjour,

Comme vous l'avez déjà deviner, ma connaissance de la programmation est proche de 0. Mais Prestashop me permets quand même d'arriver à quelque chose.

Je ne sais pas comment centrer deux éléments :

-1- Le premier lorsque le site est en maintenance : cf. image maintenance
L'image n'est pas centré.

-2- J'ai ajouté un module d'assitance en direct par le biais de Skype. Je n'arrive pas à centrer l'image Skype dans le module en question. cf image skype.

Pouvez vous m'aider ? Merci beaucoup en tout cas de m'avoir lu.

A bientôt
Cepillo

[Patric]

Déplacé depuis Discussion générale

[Peha]

l'image est elle en backgroud d'un bloc ou est ce une image dans le contenu ?

[cepillo]

Bonsoir,
L'image est ajoutée lors de la mise en place du module Skype. Donc je serais tenté de dire qu'elle n'est pas en background. D'autant plus, qu'elle fait office de bouton (on clique et lien direct vers skype).
Merci de votre réponse.

[Peha]

Pour le savoir, je te conseille d'utiliser firbug, un plugin de firefox très utile pour travailler le design de ta boutique.

si c'est une image dans le contenu (c'est a dire affichée dans une balise ) il faut définir le parametre text-align:center;

si c'est le background d'un bloc, c'est le parametre background-position:center; qui sera efficasse.

[Guest]

C'est normal que l'image ne soit pas centrée, vu qu'elle utilise la class "block" par défaut ! ce qui aligne le texte à gauche... et si tu centres le block, ça l'fait pour tous les autres (sauf les block exclusifs) ! Le mieux encore c'est d'aller directement dans le fichier .tpl de ton module skype... et de rajouter un

juste après le (sauf si tu veux centrer le titre de skype aussi) !!!

<= ne pas oublier de fermer la balise

[Peha]

Bonjour

Je conseille pour ma part de rester dans le fichier css, car l'un des principe de base de cette technologie est la séparation stricte de la mis en forme et du contenu. Donc style=“text-align:center” n'a rien à faire dans la partie .tpl
De plus, l'effet sera exactement le même en écrivant dans le global.css

#nomduBlocSkype img {
text-align:center;
}

en remplaçant #nomduBlocSkype par le vrai nom du module skype. (que j'ai la flegme de chercher)

[Guest]

Si il faut remplacer le #nomdublockSkype, ça veut dire qu'il est obligé de modifier le fichier .tpl ! ça revient au même (et encore, il ne modifie qu'un seul fichier, tandis qu'avec ta manip, c'est 2 fichiers qu'il faut modifier) ! le BlockSkype.tpl qui se trouve dans la partie module (là où j'lui demande d'ajouter la balise

et le fichier global.css !

Après, c'est à lui de juger ce qui est le plus simple ! une manipulation ? ou 2 !

[cepillo]

Merci de vos réponses et d'avoir prêté attention à ma question,

Malgré votre aide précieuse, je n'arrive toujours pas. J'ai essayé vos deux méthodes sans succès.

[Guest]

Je viens de jeter un coup d'oeil sur ce module, effectivement, il y a une class particulière pour le block skype (autant pour moi) ! suffit de modifier celle-ci !

/* Block skype */
.skipe_block { width: 191px; margin-bottom: 1em; text-align: center; }

à la place de text-align:center; qui ne centre pas les choses, ajoute une marge du coté gauche, genre margin-left:1em; et tu modifies la taille de la marge jusqu'à ce qu'il soit centré

[Peha]

et en faisant :

.skipe_block img{
text-align:center;
}


???
je ne vois pas pkoi l'image de pourrait pas se centrer, à moins d'un conflit avec une autre règle css. Encore un fois Firebug devrait t'éclairer sur ce point.

au pire rajouter un !IMPORTANT pour forcer les choses si ça ne marche pas.
.skipe_block img{
text-align:center;!IMPORTANT
}

bien que je n'aime pas vraiment cette méthode.

[Guest]

c'est même mieux de faire text-align:center!important;

M'enfin... J'vais pas m'étaler parce que... pfiou !

[Peha]

arf, effectivement

alors ça marche ou pas ?

[Guest]

J'étais en train de me demander si un "clear:left;" ne serait pas le bienvenu !

/* Block skype */
.skipe_block { clear:left; width: 191px; margin-bottom: 1em; text-align: center; }

[cepillo]

Bonjour à vous deux,
J'ai mis du temps à consulter vos messages en raison d'un travail important en ce moment. J'ai une question. Dans quel fichier est ce que je dois apporter vos proposition ?
En effet, vous n'étiez pas tout à fait d'accord au début de ce fil ?

Merci encore de votre attention,

[Peha]

global.css

[cepillo]

Bonjour Peha,

J'ai essayé toutes vos propositions ... et sans succès. Rien ne bouge.
Je ne comprends vraiment pas.

Merci de votre aide.

[cepillo]

Erreur,

C'est résolu avec

/* Block skype */
.skype_block { clear:left; width: 191px; margin-bottom: 1em; text-align: center; }


Je n'avais pas vu qu'il y avait une erreur dans le code proposé : skipe au lieu de skype.

Merci de votre aide.

[Peha]

ok... n'oublie pas de mettre résolu dans le titre du post.

pa.