[Résolu] Image float left et liste à puces

Bonjour,

Le problème des puces cachées par une image a été évoqué ici plusieurs fois. Une solution qui semble fonctionner est de remplacer outside par inside dans la propriété list-style-position. Le problème, c'est qu'en faisant ça, la puce est bien décalée après l'image, mais je me retrouve avec un saut de ligne juste après, comme ici. Une idée de solution ?

Merci pour votre aide.
Modifié par 2fray (10 Nov 2014 - 05:43)

Bonjour !

J'ai pas très bien compris ce que tu voulais faire, ni le problème de la puce... par contre pour le saut de ligne, c'est ton <p> qui est un bloc par défaut. il suffit de le passer en inline / inline-block. Par contre l’intérêt d'avoir un <p> qui contient un <a> qui contient un <span> qui contient un <em> dans un <li>... si tu n'avais que ton <a> avec une classe dans ton <li> tu n'aurais pas rencontré ce problème


Bon lundi !

Merci beaucoup pour ta réponse.

Je n'avais pas fait attention au code, qui était effectivement assez monstrueux, pour une raison que j'ignore. Or, "la simplicité est la sophistication suprême". Du coup, j'ai nettoyé toutes les pages que je pouvais, c'est-à-dire les articles. Pour le reste, ici, par exemple, qu'est-ce que je dois modifier dans le CSS pour que le lien s'affiche correctement à la suite de la puce, et pas une ligne plus bas ?

Merci encore.

Bonjour

Sans aller jusqu'au "monstrueux", c'est juste que des fois ça cause des comportements bizarres
Bah du coup, là le lien est bien aligné derrière la puce non ?


Modifié par _laurent (11 Nov 2014 - 15:33)

Bonjour,

Ca ne s'affiche pas correctement sur tous les navigateurs. C'est bon sur Safari, Chrome et Opera, mais sur Firefox et IE, il reste un décalage :



Comment je peux réparer ça ?

Encore merci.

Bonjour,

Un rapide coup d'oeil via JSFiddle me permet de constater que la déclaration suivante pose le problème sous Firefox :

ul, ol {
LIST-STYLE-POSITION:INSIDE;
}

Car quand je passe la propriété en Outside, le comportement redevient normal (cad le comportement attendu) par contre je ne vois pas comment le résoudre... A suivre...

Eurêka !

En modifiant comme suit, ça semble fonctionner.

UL, OL {
LIST-STYLE-POSITION:INSIDE;  // On garde le style inside
}

UL LI H4 {
DISPLAY:INLINE-BLOCK;  // On change le display des titres imbiqués.
}

En agissant sur le titre cela semble résoudre le problème. Tu confirme ?
Modifié par Greg_Lumiere (12 Nov 2014 - 09:25)

Salut,

Bah c'est exactement le meme problème qu'au début du sujet avec le <p>... la balise <h4> est une balise block par défaut... du coup le display:inline-block; fonctionne oui (cf ma première réponse...). Quand je suis passé il n'y avait pas de <h4> mais seulement un <a> (naturellement inline) donc ça fonctionnait.