Jump to content

[Résolu] Comment centrer


Recommended Posts

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

5807_klV3UdYPtixtPcrXEJcs_t

5808_deq20nT3Hb0h4LKZSDDL_t

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 ;)
Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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 !
Link to comment
Share on other sites

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é ;)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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; }

Link to comment
Share on other sites

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,

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...