Discussion :

[nicolas2603]

Bonjour,

Je me pose une question à laquelle je me trouve bête de ne pas trouver la réponse. Il est question d'image encadrée.
Dans un code regroupant une image, un paragraphe et une liste, pour faire un peu de mise en page il suffit de mettre un float:left sur l'image, et le reste se positionne autour. On est d'accord.
Mais pour la liste, qui dispose d'un margin-left:20px; pour laisser la place aux puces d'apparaître, la marge débute tout à gauche, sans prendre en compte la taille de l'image. Je me retrouve donc avec des puces collées à l'image, alors qu'elles sont sensées avoir un retrait.
Existe-t-il un solution pour ce genre de problème ?
Merci d'avance.

[Ecared]

Bonjour,

Pourrais tu mettre ton code ainsi qu'une image du résultat que tu obtiens ce sera plus simple pour essayer de t'aider

[nicolas2603]

Voici le visuel pour l'instant.


Et voici les éléments de code.
Partie PHP :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<div class="image-only"><img src="img_01.jpg"></div>
<p>Exsistit autem hoc loco quaedam quaestio subdifficilis, num quando amici novi, digni amicitia, veteribus sint anteponendi, ut equis vetulis teneros anteponere solemus. Indigna homine dubitatio! Non enim debent esse amicitiarum sicut aliarum rerum satietates; veterrima quaeque, ut ea vina, quae vetustatem ferunt, esse debet suavissima; verumque illud est, quod dicitur, multos modios salis simul edendos esse, ut amicitiae munus expletum sit.</p>
<ul>
     <li>Quibus occurrere bene pertinax miles explicatis</li>
     <li>Dein Syria per speciosam interpatet diffusa</li>
     <li>Ob haec et huius modi multa, quae cernebantur in</li>
     <li>Sed maximum est in amicitia parem esse inferiori.</li>
     <li>Equitis Romani autem esse filium criminis loco</li>
     li>Mensarum enim voragines et varias voluptatum</li>
     <li>Saepissime igitur mihi de amicitia cogitanti</li>
     <li>Quod si rectum statuerimus vel concedere amicis</li>
</ul>

Code CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
*{box-sizing: border-box;margin:0}
.image-only{float:left;margin-bottom:20px;margin-right:20px;position:relative;text-align:center;width:240px}
.image-only img{max-width:100%}
p{font-size:12px;margin-bottom:10px;word-wrap:break-word}
ul{list-style:outside none none}
ul{font-size:12px;list-style-image:url("../li.png");margin-left:20px;padding:5px 0;word-wrap:break-word}
ul li{margin-bottom:5px}

L'objectif étant que les puces de la liste soient alignées sur le texte, comme c'est le cas en temps normal sans le conteneur d'image.

[Ecared]

Pour avoir ce résultat il faut que tu entoures ton <p> et ton <ul> d'une classe que tu mettras aussi en float:left. Il faudra en suite préciser une width à ta class .image-only et ta nouvelle class de sorte que l'addition de tes 2 width ne soit pas plus grande que la résolution d'écran sur laquelle tu destines ton site. Et ensuite tu n'auras plus qu'à ajuster ton margin-left de ton <ul> pour l'aligner correctement à ton <p>

[nicolas2603]

Oui, mais si je fais ça, et c'est ce que j'avais fait au début, alors mon image n'est plus encadrée !
Je me retrouve avec une configuration de mise en forme en deux colonnes.

[Invité]

Bonjour,

j'ai déjà eu à répondre à ce problème (dans cette discussion).

Il faut ajouter aux listes :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

ul { display:inline-block; }

Plus précisément (en fonction de ton besoin) :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

ul { display:inline-block; list-style:inside none square; margin-left:0; }

[Ecared]

Par curiosité si jreaux62 à trouver la solution à ton problème pourrais tu me montrer le rendu final car je n'arrive vraiment pas à visualiser ce que tu veux faire.

[Invité]

J'ai mis à jour mon précédent message (avec un lien).

[Ecared]

Nickel merci

[nicolas2603]

Bonjour,

Merci pour cette solution, qui répond déjà en bonne partie à ce que je cherche, et permet de m'affranchir d'une <div> autour du texte suivant l'image.
En revanche elle ne donne pas en totalité le rendu que je souhaite obtenir. S'il est toutefois possible de l'obtenir.
La liste est bien calée comme elle le doit, et le texte après la liste se repositionne correctement à gauche.
Mais est-il envisageable que les éléments de la liste se recalent à gauche lorsqu'ils en ont la place (à partir de la 8ème ligne environ) ?



Mes excuses à Ecared, j'avais mal interprété ta solution proposée. J'ai pensé dans un premier temps que tu me disais de créer un conteneur autour du <p> et <li>, lequel serait en flottant. Là effectivement j'aurai eu un visuel en deux colonnes.
Au final ta solution m'aurait donné le même visuel à ce stade, sauf que je ne peux pas me permettre de déterminer une largeur au paragraphe et liste, puisque la solution doit être générique et applicable à plusieurs pages. Et sur les autres pages il ne s'agit pas forcément des même dimensions.

[nicolas2603]

Je viens de remarquer quelque chose, avec cette solution lorsqu'une ligne de la liste est trop longue et doit faire un retour à la ligne, c'est tout le bloc <ul> qui se place en dessous de l'image.
C'est normal ?

[JujuPomme]

Yop,

Oui, puisque ta propriété est inline-block.

Tu peux te tourner vers d'autres propriétés CSS, tel que word-wrap : ellipsis pour afficher des ... lorsque le texte est trop long. Une combinaison parmi tant d'autres...

[nicolas2603]

Bon, et bien j'ai solutionné mon problème d'une autre manière, sans le display:inline-block; utilisant le style list-style-position: inside sur ma liste, et en supprimant le margin-left.
Du coup le visuel est correct !

Merci.