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 à gaucheaggrave 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;
}
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.
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
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.
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).
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.
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.
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....
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.
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.
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";
}
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é.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Le CSS ça peut craindre -->Conférence CSS3.CREATE
Le CSS ça peut craindre -->Conférence CSS3.CREATE
Le CSS ça peut craindre -->Conférence CSS3.CREATE