Figures en colonne de droite au fur et à mesure où elles apparaissent

Bonjour,

Je voudrais pouvoir afficher des figures les unes en-dessous des autres à droite de la page au fur et à mesure où elles apparaissent dans le code html:

<p>bout de texte</p>
<p><img src="figure 1" /> /* Cette première figure devrait s'afficher en haut à droite de la page */
<p>bout de texte</p>
<p>bout de texte</p>
<p><img src="figure 1" /> /* Cette deuxième figure figure devrait s'afficher à droite sous la première */
/* ainsi de suite */

Est-ce qu'il y a un moyen d'obtenir cela?
(La propriété "float: right" ne peut convenir car elle place la figure à droite au niveau, à la marge haute près, du paragraphe précédent. En outre, deux figures trop proches se chevauchent.)

Merci par avance de votre aide.

salut,
la propriété float convient parfaitement.

<p>
	<span>Texte</span>
	<img src="" alt="" />
</p>

p {clear:right;}
img {float:right;}

À moins de ne pas avoir bien compris...

Merci Zelalsan de ta réponse.

Malheureusement, ça ne semble pas résoudre mon problème car les figures restent affichées au niveau du paragraphe précédent et se chevauchent si elles sont trop près l'une de l'autre.

Ce dont j'ai besoin est de pouvoir afficher la première figure rencontrée en haut à droite. (Ce point n'est cependant pas primordial. Elle peut rester au niveau du paragraphe précédent.)

La seconde figure rencontrée doit s'afficher sous la première, sans chevauchement.
(Je ne peux connaître à l'avance la taille des paragraphes ni la taille des figures.)
J'ai essayé margin-bottom, mais le chevauchement persiste.
Modifié par cadbor (18 Oct 2013 - 18:45)

Oui, mais avec deux ou trois figures à droite dans le même pavé, chaque figure sous la précédente.

<div>
	<p>Texte</p>
	<figure>
		<img src="" alt="" />
		<img src="" alt="" />
		<img src="" alt="" />
	</figure>
</div>

bin alors la même chose en remplaçant dans le CSS span par p et img par figure.
Si ce n'est pas ça je dois mal comprendre. Peut être un schéma si tu peux.

Pour ce code html

<p>Texte associé à la première image.</p>
<p class="Figure"><img alt="" src="Figures/diamant.jpg" width="75%" /></p>
<p>Texte associé à la deuxième image.</p>
<p class="Figure"><img alt="" src="Figures/Fromage.jpg" width="75%" /><span
class="75%"></span></p>

et pour ce code css

div.Chapitre {
	width: 9cm;
	border: solid 0.5pt red;
}
div.Chapitre p  {
	clear: right;	
}
p.Figure {
	float: right;
	margin-right: -7cm;
	margin-bottom: 1cm;
	width: 6cm;
	border: solid 0.5pt blue;
	}

j'obtiens ce chevauchement, qui correspond logiquement au fonctionnement de float:right :

(J'espérais que margin-bottom agisse.)

Ce que je voudrais obtenir, c'est les deux figures à droite, la seconde en-dessous de la première :

En fait, le problème posé se résume à ces deux questions :
1) Est-il possible en css d'assurer un habillage vertical d'éléments flottants ?
2) Si oui, cet habillage peut-il opérer pour d'autres éléments flottants ?
Modifié par cadbor (19 Oct 2013 - 08:41)

C'est juste que tu ne peux pas obtenir ce que tu veux avec le code HTML que tu proposes. En reprenant mon HTML précédent, avec ce CSS ça devrait le faire

div {overflow: hidden;clear:right;}
p {overflow: hidden;}
figure {float:right;}

Au passage, on ne spécifie pas d'unités dans l'attribut "width" de la balise <img> et elles sont par défaut en pixels.
Je ne vois pas non plus l'intérêt de mettre des <img> dans des <p>, surtout que tu ne mets ni texte dans le <p> ni dans l'attribut alt. Le mieux serait d'utiliser les balises adéquates pour garder une sémantique.

Merci Zelalsan de ta réponse.

J'utilise des unités car le projet sur lequel je travaille concerne une future documentation papier dans laquelle les positions sont définies en cm, mm et points et pour laquelle la notion de pixel n'a pas de sens. (xhtml et css permettent aussi de réaliser des pdf avec une mise en page relativement sophistiquée.)
Concernant les images, j'ai mis un pourcentage pour limiter la taille des figures d'essai et les maintenir dans la zone à droite du texte.

Pour ce qui est des balises <p><img ... /></p>, je ne connaissais pas la balise <figure> dans la mesure où je travaillais en html 4.

Après quelques tâtonnements, j'ai pu obtenir quelque chose se rapprochant de ce que je voulais.

<p>Texte associé à la première image. Texte associé à la première image. Texte associé à la première image.</p>

<figure><img alt="" src="Figures/diamant.jpg" width="75%" />
<figcaption>Figure 1</figcaption></figure>

<p class="Avant_image">Texte associé à la deuxième image. Texte associé à la deuxième image. Texte associé à la deuxième image.</p>

<figure><img alt="" src="Figures/Fromage.jpg" width="75%" />
<figcaption>Figure 2</figcaption></figure>

<p class="Avant_image">Texte associé à la troisième image. Texte associé à la troisième image. Texte associé à la troisième image.</p>

<figure><img alt="" src="Figures/diamant.jpg" width="75%" />
<figcaption>Figure 3</figcaption></figure>

<p>Embrayer la prise de force.</p>

div.Chapitre {
	width: 9cm;
	border: solid 0.5pt red;
	/*overflow: hidden;*/
	/*clear: right;*/
}
div.Chapitre p  {
	overflow: hidden;
	/*clear: right;*/
}
div.Chapitre figure {
	float: right;
	margin-right: -7cm;
	width: 6cm;
	border: solid 0.5pt blue;
}
figcaption {
	text-align: center;
}

Dans la mesure où les figures sont placées en dehors du div Chapitre, la propriété clear: right n'est pas nécessaire ni dans le div ni dans les paragraphes.
De même, la propriété overflow: hidden dans le div n'apporte rien.
Elle est primordiale dans les paragraphes : sans elle, les figures se chevauchent.
(Je ne comprends d'ailleurs pas bien son fonctionnement dans ce cas précis. Je pensais qu'elle concerne seulement le texte débordant d'un conteneur "par le bas".)

Résultat obtenu :

Les figures ne se chevauchent plus mais au prix d'un espace important entre les textes.

L'autre approche est celle que tu préconises : texte d'abord et figures placées dans un seul bloc <figure></figure>. Cela évite d'avoir ces espacements disgracieux.

Merci donc de ton aide pertinente et efficace.

PS : Y a-t-il une possibilité de placer un élément flottant systématiquement en haut de page ?
Modifié par cadbor (19 Oct 2013 - 22:03)

cadbor a écrit :

Concernant les images, j'ai mis un pourcentage pour limiter la taille des figures d'essai et les maintenir dans la zone à droite du texte.

Non, tu n'as pas saisi ce que j'ai dit. Les unités peuvent être spécifiées dans les styles CSS mais pas dans l'attribut "width" d'une balise <img>

<img src="image.png" alt="" width="75%" />

est faux. Aucune unité n'est à spécifier dans cet attribut et elle est par défaut en pixels (tu n'as pas le choix). Si tu veux changer cela, tu dois passer par du CSS.

cadbor a écrit :

Pour ce qui est des balises <p><img ... /></p>, je ne connaissais pas la balise <figure> dans la mesure où je travaillais en html 4.

Je ne savais pas que tu bossais toujours en HTML4. Personnellement si je pouvais te conseiller je te suggèrerai vivement de passer au HTML5 on est en 2013 presque 14 ! .

cadbor a écrit :

Dans la mesure où les figures sont placées en dehors du div Chapitre, la propriété clear: right n'est pas nécessaire ni dans le div ni dans les paragraphes.

Je ne serais pas si confiant à ta place. Si le texte est court, les images se chevaucheront quand même. Mettre un clear quand tu en a fini avec les float t'éviteras pas mal de soucis aux quels tu ne t'attends pas.

cadbor a écrit :

De même, la propriété overflow: hidden dans le div n'apporte rien.

Tu penses bien que je ne l'ai pas ajoutée juste pour décorer. C'est pour empêcher un dépassement de flottants Plutôt rudimentaire d'ailleurs.

Ce que j'aurais voulu voir c'était plutôt un schéma de ce que tu souhaitais. Du coup je ne sais pas si c'est vraiment ça et si c'est surtout le meilleur moyen pour le faire.

Merci de tes commentaires détaillés.

En documentation technique, la structure de pensée habituelle est de rédiger le texte et de placer les figures au fur et à mesure des besoins, ce qui donne l'alternance classique texte - figure - texte - figure... qui se traduit généralement par la mise en page texte - figure sous le texte - texte - figure sous le texte...

Un client voudrait avoir le texte en partie gauche et les figures auxquelles fait référence le texte à droite.

Je voudrais donc obtenir ceci :

1) Dans le fichier xhtml :

texte faisant référence à la figure 1
figure 1

texte faisant référence à la figure 2
figure 2

texte faisant référence à la figure
figure 3

2) Mise en page correspondante :

figure 1 en haut de page à droite
figure 2 en-dessous de la figure 1 avec un espace réglable entre figure 1 et figure 2
figure 3 en-dessous de la figure 2 avec un espace réglable entre figure 2 et figure 3

pas d'espacement entre les textes dans la partie gauche de la page




Si cela n'est pas possible de façon satisfaisante, je proposerai la structure

texte faisant référence à la figure 1
texte faisant référence à la figure 2
texte faisant référence à la figure 3

Bloc figure contenant les figures 1, 2 et 3.

Cette structure html induit une autre structure de pensée et de travail pour le rédacteur ainsi que des procédures de vérification des documentations générées, notamment en ce qui concerne les coupures de page (texte faisant référence à une figure placée en fait en page suivante).
___________

Le choix de telle ou telle structure html n'est donc pas neutre, d'autant plus que le client aura à gérer une centaine de documentations traduites en une dizaine de langues.
Il ne sera peut-être pas disposé à faire vérifier chacune des quelque mille documentations, sans compter les évolutions au fil du temps, pour s'assurer qu'il n'y a pas de coupures de page gênantes.


PS : Le raisonnement et la pratique en matière de documentation réalisée en html - css ne sont pas les mêmes que pour des sites Internet.
Modifié par cadbor (20 Oct 2013 - 15:25)

Bonsoir,

Tu peux par exemple faire :

<section>
  <article>
     Les Textes
  </article>
  <aside>
     illustrations
  </aside>
</section>

En HTML, le choix de tel structure/balise , se base sur la cohérence et relation des contenu les uns par rapports aux autres. Si tu estimes que tes illustrations peuvent être reléguée plus loin dans le doc, comme des notes bas de pages , rien ne t'empêche de le faire.

A l’édition, il sera plus mal aisé de relier images et textes si elle ne sont pas liées.

En fait ta structure HTML dépend de l'organisation/valeurs que tu donne aux contenus, quand aux styles, la sémantique n'entre pas vraiment en ligne de compte mais peut nécessiter tel ou tel méthode de positionnement plutôt qu'une autre. (ex: http://codepen.io/anon/pen/ytwmE )

Tu peut aussi décider d'une mise en page web(html) et d'une mise en page 'print'(pdf) différente.
Dans le cas ou tes texte et uri des illustration sont stockées et récupéré a partir d'une base de données. Il te reste a créer alors 2 template: 1 html et 1 pdf pour l'affichage, et a gérer l’édition avec une zone texte et une zone upload ou des zones textes avec pour chacune la possibilité d'y joindre une image.
En fait la question serait, comment stocke tu ces données et comment comptes tu les édités?
Dans une BDD et injecté dans un template, ou directement dans une page HTML statique ?

++
Modifié par gc-nomade (20 Oct 2013 - 22:22)