Partage

Pb d'affichage d'une liste après image en float

Sujet résolu
17 mai 2017 à 11:23:16

Bonjour, 

On affiche des articles qui contiennent une illustration en float sur le côté gauche et du texte qui "entoure" l'image.

Pb : quand le texte contient une liste située en face de l'image, elle perd son indentation à cause du float.

Pour l'instant je comprends pourquoi la liste se met en float (normal) ce qui supprime les espaces, mais j'aimerais bien trouver une solution de contournement...

En plus le "margin-left: -20px;" qui me sert à aligner les lignes d'un élément à gauche aggrave encore les choses parce que la puce du premier élément de liste se retrouve carrément sous l'image...

Ou alors il faut oublier les espacements et insérer des éléments qui ont une largeur définie. Mais je trouve ça assez moche ;)

Html : 

<div class="conteneur">
    <img class="illustration" src="">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
    totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae 
    dicta sunt explicabo. 
    <ul>
        <li>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
            totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae 
            dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, 
            sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam 
            est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius 
            modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</li>
        <li>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
            totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae 
            dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,</li>
            <ul>
                <li>Lien niveau 2</li>
                <li>Lien niveau 2</li>
                    <ul>
                        <li>Lien niveau 3</li>
                        <li>Lien niveau 3</li>
                    </ul>	
            </ul>	
    </ul>
</div>



CSS :

div.conteneur {
	margin: auto;
	max-width: 500px;
}
img.illustration {
	float: left;
	height: 200px;
    width: 200px;
}
ul {
	margin-left: 12px;
	list-style-type: none;
}
ul li {
    margin-left: 20px;
}

ul li::before {
    content: "\205E";
    margin-left: -20px;
    padding-right: 14px;
}

Merci pour votre aide !


-
Edité par 0Fanny0 17 mai 2017 à 11:40:56

17 mai 2017 à 12:26:18

Un truc comme ça ?

JsFiddle

Il est souvent nécessaire d'enfermer certains éléments pour les placer comme on veut.

De plus si se sont des articles, autant utiliser la balise <article> pour se faire correctement ;)

Mon portfolio / Nouveau projet -->Expedition wars/  Le CSS ça peut craindre -->Conférence CSS3.CREATE
17 mai 2017 à 12:30:16

Et oui, bien sûr :) mais l'idée serait justement de garder le texte qui "entoure" l'image.
17 mai 2017 à 13:18:39

C'est possible d'avoir l'image? ou en tt cas ses dimensions.

-
Edité par ShaWaTK 17 mai 2017 à 13:19:01

17 mai 2017 à 13:22:59

Comme ça ? :

jsFiddle

En fait j'ai juste supprimer la <div class="content"> qui était en float:left aussi ^^

ainsi plus de soucis ;)

Mon portfolio / Nouveau projet -->Expedition wars/  Le CSS ça peut craindre -->Conférence CSS3.CREATE
17 mai 2017 à 14:36:51

ShaWaTK a écrit:

C'est possible d'avoir l'image? ou en tt cas ses dimensions.

> Peu importe l'image, le problème se pose quand la liste commence avant la fin de l'image et que le texte vient se coller contre (comme c'est le cas dans l'exemple que j'ai donné, avec une image 200x200), sans tenir compte des divers margin/padding.

stefde3 a écrit:

En fait j'ai juste supprimer la <div class="content"> qui était en float:left aussi ^^

> J'ai pas bien compris, dans l'exemple je vois toujours la div, et je pense que le pb ne se pose pas parce que l'image est plus petite et la liste commence en-dessous.

-
Edité par 0Fanny0 17 mai 2017 à 14:38:29

17 mai 2017 à 15:23:31

en fait j'ai mis l'image en prévision du responsive.

avec un width:100% (ShaWaTK va me tuer sur ce coup-là mais avec les images on peut :P) et j'ai ajouté un max-width de 200px. donc en gros ton image se redimensionnera automatiquement si tu réduis la page mais la photo même en agrandissant ne dépassera jamais un width de 200px maximum.

Tu confond div class="conteneur" que tu avais mis avec la div class="content" que moi j'avais mis dans mon premier exemple :)

Mon portfolio / Nouveau projet -->Expedition wars/  Le CSS ça peut craindre -->Conférence CSS3.CREATE
17 mai 2017 à 15:29:43

@0Fanny0 oups oui, je n'avais pas vu.

Tu veux quoi exactement, que la liste soit bien indentée mais que le texte continue quand même sous l'image?

Sinon, l'utilisation de la propriété overflow: hidden; dans la balise <ul> devrait donner la bonne indentation. Par contre, aucun texte de la liste n'ira sous l'image.

-
Edité par ShaWaTK 17 mai 2017 à 15:42:03

18 mai 2017 à 9:06:51

1. L'objectif est de garder l'espacement gauche des éléments de liste contre l'image.

2. Et deuxièmement de trouver un moyen, quand un élément de liste fait plusieurs lignes, d'aligner ces lignes à gauche au même niveau, et que les suivantes ne reviennent pas au niveau de la puce. J'avais trouvé un contournement avec la margin négatif mais ça aggrave le 1er point.

3. Et de garder le texte qui entoure l'image bien sûr.

Le responsive ce n'est pas le sujet là, le pb se pose quelle que soit la taille de l'image, si des éléments de la liste sont "en face", leur espacement gauche passe à la trappe (sous l'image).

18 mai 2017 à 12:45:03

Est-ce que ça correspond à ce que tu souhaites?

div.conteneur {
	margin: auto;
	max-width: 500px;
}
img.illustration {
	float: left;
	height: 200px;
	width: 200px;
}
ul {
	list-style-type: none;
}
ul li {
	position: relative;
	left: 10px;
	margin-left: 20px;
}

ul li::before {
	position: relative;
	right: 10px;
	content: "\205E";
}

EDIT: j'ai même mieux, le ::before est pas utile en fait.

div.conteneur {
	margin: auto;
	max-width: 500px;
}
img.illustration {
	float: left;
	height: 200px;
	width: 200px;
}
ul {
	list-style: "\205E" outside none; /* outside dit justement à la liste que le texte ne doit pas reprendre en-dessous de la puce */
}
ul li {
	position: relative;
	left: 20px;
	padding-left: 10px; /* gère l'espacement entre le contenu de la liste et la puce. */
}


Attention quand même à la hauteur de l'image, les listes dans les listes ne vont pas trop aimer si l'image vient flotter à côté d'eux.

-
Edité par ShaWaTK 18 mai 2017 à 13:04:43

22 mai 2017 à 12:01:49

Solution 1 : c'est presque ça, sauf qu'à cause du left le texte n'est plus correctement justifié à droite... on dirait bien qu'il n'y a pas de solution. Damn.

Solution 2 : pour l'instant (je suis sur Chrome) la list-style est détectée comme une propriété invalide.. On dirait que ça passe uniquement sur firefox (https://developer.mozilla.org/fr/docs/Web/CSS/list-style-type#Compatibilité_des_navigateurs)

-
Edité par 0Fanny0 22 mai 2017 à 12:16:30

22 mai 2017 à 12:24:41

Le premier code css (celui avec li:before) marche très bien non?

Pour la solution 1: tu parles de l'indentation en début de paragraphe de list? suffit de faire un margin avec une valeur négative.

Et oui, la solution 2 tu peux laisser tombé :(

EDIT: je viens de remarquer que la puce ne fait pas la même taille suivant les navigateurs, donc le margin-left: -3px, marche bien pour firefox mais pas pour chrome, et c'est l'inverse pour margin-left: -5px; grrrr....

-
Edité par ShaWaTK 22 mai 2017 à 12:34:33

22 mai 2017 à 12:40:24

Non, ce que je veux dire, pour la solution avec le ::before, c'est que si on décale le bloc de texte avec un 'left', il est décalé aussi à droite, donc il n'est plus "justifié", autrement dit aligné correctement à droite.
22 mai 2017 à 12:48:21

Si, avec un text-align: justify; tout est justifié et aligné à droite comme à gauche (sauf au niveau de la puce bien sur).
22 mai 2017 à 12:55:52

Non, pas avec le texte, avant ou après, qui n'a pas de décalage à droite (pas de left). 

C'est plutôt logique, d'ailleurs, le 'left' décale tout le bloc par rapport à sa position de référence, ce n'est pas qu'une indentation...

Alors c'est plutôt moche (je trouve) mais j'ai compensé avec un padding-right sur le <li>

Si rien de nouveau à l'usage je mettrai ça en résolu.

-
Edité par 0Fanny0 22 mai 2017 à 13:05:50

22 mai 2017 à 13:15:35

Faut équilibrer avec les marges ! Après, si tu veux pas définir de taille aux éléments (absolue ou relative), pas les déplacer avec position, tu te mets un sacré challenge. Sinon,tu pourrais définir la puce avec une image en background avec css, mais ça alourdi le site.
22 mai 2017 à 15:32:51

Alors c'est plutôt moche (je trouve) mais j'ai compensé avec un padding-right sur le <li>

Si rien de nouveau à l'usage je mettrai ça en résolu.

22 mai 2017 à 16:53:06

Bon, j'ai réfléchis au truc et essayé de prendre le problème sous un autre angle. Si on peut pas vraiment toucher au css, on peut toucher au html.

Je pense avoir réussi.

J'ai ajouté une balise <span class='list'></span>, sans aucun contenu au début de chaque liste, ce qui donne:

<li><span class='list'></span>Ton texte</li>

Puis, j'ai défini cette balise en position absolue, ce qui change rien en gros, mais ça permet après de définir le pseudo-élément en position relative uniquement par rapport à la balise span qui ne peut plus bouger. Ce qui donne:

div.conteneur {
	margin: auto;
	max-width: 500px;
	text-align: justify;
}
img.illustration {
	float: left;
	height: 200px;
	width: 200px;
	margin-right: 20px;
}
ul {
	list-style: none;
}	
ul li .list {
	position: absolute;
}
ul li .list:before {
	position: relative;
	right: 4px;
	content: "\205E";
}




-
Edité par ShaWaTK 22 mai 2017 à 16:54:27

23 mai 2017 à 9:38:07

Je suis impressionnée mais malheureusement je ne peux pas toucher au html... Il s'agit là de centaines d'articles, contenant ou non des listes, positionnées de façons diverses, et dont le contenu est généré avec un éditeur intégré dans le site.

Mais sait-on jamais, ta dernière solution pourrait peut-être tomber sous le coude de quelqu'un qui galère sur le même sujet.

Merci encore pour ton aide, j'ai utilisé ta proposition précédente avec un padding-right retrouver l'alignement même si c'est un peu bricolé, niveau visuel ça semble être la possibilité la plus propre. Merci !

Pb d'affichage d'une liste après image en float

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown