Jump to content
Sign in to follow this  
cepillo

[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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


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

Share this post


Link to post
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)

Share this post


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

Share this post


Link to post
Share on other sites

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.

Share this post


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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites
Guest

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

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

Share this post


Link to post
Share on other sites

arf, effectivement

alors ça marche ou pas ?

Share this post


Link to post
Share on other sites
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; }

Share this post


Link to post
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,

Share this post


Link to post
Share on other sites

Bonjour Peha,

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

Merci de votre aide.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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

pa.

Share this post


Link to post
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
Sign in to follow this  

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More