28172 sujets

CSS et mise en forme, CSS3

Liste CSS à côté d'une image

Bonjour,

Dans le contenu des billets sur mon site, les listes <ul> s'affichent correctement, sauf lorsqu'elles se trouvent à droite d'une image (l'image est positionnée en float: left) : dans ce dernier cas, les puces de la liste chevauchent l'image à cause du retrait à gauche de la liste. Sur IE6 et 7, c'est l'image qui chevauche les puces de la liste.

Un exemple est visible sur cette page.

Ce que je ne comprends pas, c'est que nulle part mes listes ne sont définies avec des marges négatives. Les puces devraient donc, logiquement, être alignées sur la gauche du texte. Voici le code CSS utilisé :
ul, ol { padding-bottom: 8px; }
	ul li, ol li { padding: 3px 0 0 6px; margin-left: 30px; }
	ul li { list-style: disc; }
		ul li ul li, ul ul li { list-style: circle; }
			ul li ul li ul li, ul ul li ul li, ul ul ul li { list-style: square; }
	ol li { list-style: upper-roman; }
		ol li ol li, ol ol li { list-style: decimal; }
		ol li ul li, ol ul li { list-style: disc; }
			ol li ol li ol li, ol ol li ol li, ol ol ol li { list-style: lower-alpha; }
			ol li ul li ul li, ol ul li ul li, ol ul ul li { list-style: circle; }


Merci de votre aide !
Modifié par Fix (15 Apr 2011 - 07:22)
Bonjour,

tu dois changer la position de la liste en "inside" qui par défaut est "outside"

ul li, ol li { padding: 3px 0 0 6px; margin-left: 30px;  
[b]list-style-position: inside;[/b]
}


Stéphane
Bonjour,

Par défaut la valeur de position de la liste est outside, tu dois la passer en inside.

ul, ol
{
    list-style: disc inside none;
}


edit : grillée ^^
Modifié par maosalia (15 Apr 2011 - 09:50)
Mais oui... mais non : cela modifie fortement l'aspect de toutes les listes. Ce qu'il me faudrait c'est :
1. OU le moyen de limiter ce "list-style-position" uniquement au cas où une liste se trouve à droite d'une image ;
2. OU comprendre pourquoi la liste n'est pas décalée vers la droite comme elle DEVRAIT normalement l'être : pourquoi le "margin-left: 30px" de ma liste reste-t-il sans effet lorsque la liste est à droite d'une image ? Y a-t-il moyen de corriger cela ?
Bonjour,

Je crois que le problème ne vient pas de tes listes, mais de ton image qui est en "float: left".

Dans ton cas de figure, le contenu à droite est simplement repoussé, mais pas son conteneur. Du coup, quand tes listes sont à coté de ton image, la marge de 30px est remplacée par la largeur de ton image.

A mon avis, tu trouvera la réponse dans cet article.

Edit:

Pense aussi à la fusion des marges, car tu appliques à la fois une marge à droite de ton image, et à gauche de tes listes. Je ne connais pas très bien le principe des fusions, je te laisse voir toi même.

En espérant t'avoir aidé.
Modifié par Anymah (15 Apr 2011 - 14:50)
Bonjour,

Le problème vient effectivement des éléments flottants. Les flottants repoussent le texte, mais pas les limites des blocs. Tu peux le voir si tu ajoutes une couleur de fond à tes paragraphes, LI, etc., et que tu rends ton élément flottant translucide avec un opacity:.25 pour voir ce qu'il se passe dessous.

Une solution possible, c'est d'utiliser un contexte de formatage (via une déclaration overflow:hidden par exemple) pour forcer tes éléments LI, voire OL ou UL, à adapter leur largeur à la présence des flottants.
Merci pour toutes ces réponses. Voici donc ce que j'ai essayé, après avoir lu attentivement les réponses et les liens qu'elles contenaient :
1. J'ai ajouté un "overflow: hidden" sur "ul li, ol li" -> le texte des listes est décalé vers la droite, mais les puces deviennent invisibles (Firefox 4.0) ;
2. J'ai ajouté un "overflow: hidden" sur "ul, ol" -> le teste ET les puces sont décalés à droite correctement...
MAIS, si la liste est plus longue que l'image, elle ne se poursuit pas SOUS l'image, mais à côté, laissant un grand espace vide sur la gauche...
3. J'ai donc tenté un "display: table" sur "ul, ol", ce qui donne exactement le même résultat qu'au numéro 2.

N'y a-t-il donc pas moyen de décaler les puces vers la droite à côté d'une image, tout en laissant la liste se poursuivre sous l'image si elle est plus haute que celle-ci ?

Un grand merci pour votre aide !
Bonjour,

Je me suis résolu à choisir la solution suivante :
ul { list-style-position: inside; }

Il semble néanmoins que cela provoque quelques effets secondaires sous Internet Explorer (testé avec les versions 6 et 7) : sur cette page, mes liens à droite (sous les titres "Nos conseils de lecture précédents" ou "Nos achats précédents") sont décalés vers la droite (la 1ère ligne de chaque lien n'est pas décalée vers la gauche comme les lignes suivantes). Autrement dit : tout se passe comme si la puce était encore là, alors qu'elle ne devrait pas être affichée ! (il y a un list-style-position: none; dans le code CSS à cet endroit).
J'ai tenté de jouer sur mes padding et margin, en vain Smiley decu

D'autre part, tout en bas de cette même page, les puces ont disparu ! (devant les liens "bd adulte", "documentaire" et "roman")... alors que cette fois, elles devraient être affichées Smiley smile

Quelqu'un peut-il m'expliquer ce qui cloche ? Merci d'avance !
Modifié par Fix (25 Apr 2011 - 16:08)
Je me demande si ça ne pourrait pas venir de mes padding et margin ; j'ai donc retiré l'indication de padding et margin... en vain (normalement avec mon reset CSS présent dans ma feuille de style, le padding et margin devraient être remis à zéro).

En outre, ce comportement est bien propre à IE 6 et 7 (j'ai pu tester que le rendu est correct avec IE8).

Une idée ? Merci d'avance pour votre aide !
Bon, j'ai résolu mon premier problème par un { list-style-position: outside; }

Reste mon deuxième problème : les puces des liens en bas de cette page ou de celle-ci (devant les tags "dès 3 ans", "dès 4 ans" etc.) ne s'affichent pas sous IE 6 et 7.

Quelqu'un comprendrait-il pourquoi ?

Merci d'avance pour votre aide !
Modifié par Fix (27 Apr 2011 - 10:24)
Sujet clos
Aller à