28172 sujets

CSS et mise en forme, CSS3

Centrer une liste UL dans un Table

Bonjour,
Je me permets de laisser un message car cela fait plus de 2h que je teste et parcours le web pour trouver une solution mais en vain.

J'ai téléchargé un plugin sur Woocommerce qui permet d'afficher mes tailles de vêtements mais je n'arrive pas à centrer le tout dans ma cellule. J'ai bien vu qu'il s'agissait de UL LI et d'un tableau mais je bloque.

Vous trouverez en PJ le résultat que je souhaiterais (j'ai triché avec un margin...).

Voici le lien de mon produit : http://www.marilynfeltz.com/wordpress/produit/cape-rita-noire-a-motifs-art-deco-or/

Merci pour votre aide,
Jonathan
Pourquoi tu veux mettre une table? Mets un div à la place de la table, "margin: auto;" pour ton ul dans le div (si tu veux que le top/bottom ne soit pas centré tu précises la margin top que tu souhaites).
Autre version:
Tu mets un div à la place de la table, tu places l'élèment à l'intérieur en absolute, et tu set les propriétés top/bottom/left/right
Pour centrer la liste des tailles tu peux mettre un margin: auto sur la table:
#simple-product-form table { margin: 0 auto; }

J'ai rajouté l'id du formulaire pour éviter de mettre le souk ailleurs.
Je viens d'ajouter ton code mais ça n'a pas marché et quand je regarde mon code source, je ne vois pas d'ID simple-product-form

Merci pour ton aide
C'est ce que je vois avec l'URL que tu as donné dans ton 1er poste :
<form action="http://www.marilynfeltz.com/wordpress/produit/cape-rita-noire-a-motifs-art-deco-or/"
id="simple-product-form"  class="variations_form cart" method="post" enctype='multipart/form-data'
data-product_id="17690" data-product_url="http://www.marilynfeltz.com/wordpress/produit/cape-rita-noire-a-motifs-art-deco-or/"
data-product_variations="......" >
      <table class="variations" cellspacing="0">

Ctrl-U pour afficher le code source de la page et Ctrl-F pour rechercher un motif ou F12 pour ouvrir l'inspecteur de code.
Cela se passe vers la ligne n°653
La valeur de l'attribut data-product vaut le détour Smiley lol
Codé par un stagiaire qui n'a pas lu le manuel de PHP certainement
Ton site ressemble à une usine à gaz côté backend
Dans le fichier woocommerce.css, modifier la ligne n°804 comme ceci :
.woocommerce .summary table.variations, .woocommerce .summary table.variations-table {
    border: none;
    margin: 0 auto;
}

Il vaut mieux mettre "border: none" plutôt que "border-width: 0"
Et regarde le code source de ta page, il y a des trucs qui sont en rouge comme un carton au foot
C'est un thème avec un visual bulder et des plugins par dessus donc le code n'est pas très beau en effet... Je vais faire le ménage quand j'aurai terminé de tout mettre en place.

Est-ce possible d'ajouter le code dans le CSS dans mon style.css (thème enfant) car si Woocommerce se met à jour, je vais perdre les modifs. J'ai déjà mis ton code mais ça n'a rien fait.

Merci d'avance
Apparemment tu as un panneau dans Wordpress pour personnaliser ton thème.
Je vois ceci dans le header de ta page :
<!-- Custom CSS Styling -->
<style type="text/css">
....

Essaie de rajouter la règle pour le margin à cet endroit.
Bonsoir,
Je me permets de revenir vers vous car je ne parviens toujours pas à faire ce que je veux avec ce code Smiley confused

Merci d'avance pour votre aide
Jonathan
Sujet clos
Aller à