Jump to content
VB2095

Problème centrage boutons sur Carrousel

Recommended Posts

Salut à tous, 

Je me permet d'ouvrir un topic car je n'ai pas trouvé ailleurs de solution... je rencontre un problème pour centrer des boutons sur mon carrousel. En effet ceux ci ne veulent pas se centrer même après différents essais (margin: 0 auto, text-align center ...etc).  

 

Voici les boutons (oui je sais c'est deux femmes pour femme homme) 4696cc33b9ea9ed85da7d30335776f0b.jpg

Comment faire pour qu'ils soient centrés sur n'importe quelle taille d'écran ? 

 

Merci :) 

Share this post


Link to post
Share on other sites

Bonjour

Comme vous nous fournissez une JPEG, la meilleure solution c'est de le faire avec un logiciel de retouche d'images type Photoshop.

Si toutefois vous ajoutez l'url du site on pourra commencer à regarder pour du CSS...

  • Like 1

Share this post


Link to post
Share on other sites

Y a plusieurs choses qui ne vont pas.

Commentez ou retirez les règles suivantes :

Ligne 5525 - width:90% sur .carousel-inner

Ligne 5558 - left:10vw sur les items du carousel

Ligne 8633 : left:90px et max-width:500px sur les captions

Ensuite sur ces mêmes captions vous ajoutez un width:100% et un text-align:center;

Pour finir, depuis l'éditeur HTML vous supprimez la div avec le style inline "text-align:right;"

 

 

 

Share this post


Link to post
Share on other sites

Ce n'est pas l'effet que je veux, en effet si ces règles sont mises c'est pour avoir le carousel qui soit de la même taille que le container. 

Non je cherche a faire cette effet là 5699c7242b245e31757e44fdab834ddf.jpg 

 

Pour moi le carousel est en effet bien placé, ce sont les boutons que j'ai mis par dessus (en html) qui ne le sont pas

Share this post


Link to post
Share on other sites

Je comprends, mais les méthodes que vous avez utilisées sont complètement boiteuses.

On emploie une propriété comme "left" sur un élément qui n'est pas positionné en absolu et le "max-width" sur le caption rend le centrage plus compliqué parce que lui est en absolu justement.

Revenez à du full-width, centrez le caption et après renseignez-vous sur les techniques de centrage, il y en a des bien plus simples que la vôtre.

Share this post


Link to post
Share on other sites
il y a 7 minutes, BeComWeb a dit :

Je comprends, mais les méthodes que vous avez utilisées sont complètement boiteuses.

On emploie une propriété comme "left" sur un élément qui n'est pas positionné en absolu et le "max-width" sur le caption rend le centrage plus compliqué parce que lui est en absolu justement.

Revenez à du full-width, centrez le caption et après renseignez-vous sur les techniques de centrage, il y en a des bien plus simples que la vôtre.

Le left était déjà là lorsque j'ai mis le carousel ... En gros ce que j'ai fait c'est simplement du bricolage par dessus la merde original du carousel 

Edited by VB2095 (see edit history)

Share this post


Link to post
Share on other sites

Je ne sais pas, je n'ai aucun moyen de le savoir.

Dès lors que vous vous lancez à modifier du code que vous n'avez pas écrit il faut avoir le bagage pour le comprendre et l'adapter correctement, ce qui veut dire aussi "remplacer" et pas simplement "ajouter".

Je vous ai donné mes recommandations, à vous de voir si vous voulez les suivre ou partir sur une autre piste. C'est du CSS, il y a toujours plusieurs façons de faire pour une même situation.

Share this post


Link to post
Share on other sites

Je comprends. 

Le carousel de base de prestashop est vraiment pas terrible, j'ai réussis a faire ce que je souhaitais faire avec Awesome slider qui lui n'utilise pas de code bancale. 

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

×
×
  • Create New...

Important Information

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