[Résolu] Répartir des <p> et <div> dans un bloc

Bonjour

Dans le cadre de la rénovation dont vous n'avez pas fini d'entendre parler je suppose, je tombe sur le problème suivant:
Le code originel contient un code HTML en flot (pas de bloc) avec
- du texte au kilomètre
- des <span> et autres balises inline pour la présentation
- des <br> multiples et/ou des <p> (vides de texte) pour gérer l'espacement
- des <hr> pour séparer les portions de texte
- des <table style="float-left"> contenant des images pour illustrer le texte

J'ai décidé de réorganiser cela de la façon suivante:
- une <div> par "portion de texte" (ou <section> ou <article> selon le la signification de ces "portions"), avec un border-bottom pour remplacer le <hr>
- une <figure> pour les illustrations, sachant que certaines ont une légende.
- le texte est englobé dans des <p> ou parfois des <div>
- suppression des <br> et <p> superflus au bénéfice de directives de style

Je suis donc en train de développer un programme qui lit le HTML "à l'ancienne" et le met à la nouvelle structure.

En gros la structure générée par mon outil est du genre:

<article class="news">
	<header class="title">
		<h2>Titre de l'article</h2>
		<p>complément éventuel</p>
	</header>
	<figure>........</figure>
	<p lang="fr">Texte en français</p>
	<p lang="en">Text in English</p>
	<footer>
	<nav>liens vers des documents plus complets</nav>
	</footer>
</article>

Cela donne en général des résultats satisfaisants: http://tests.osirisnet.net/migration/outils/article1.png
mais moins satisfaisant dans certains cas: http://tests.osirisnet.net/migration/outils/article2.png

Question: comment styler mes nouveaux <p> et <div> pour que le texte soit un peu mieux réparti sans devoir le faire à la main? Il y a plusieurs centaines de pages, avec pour certaines plus de 10 articles, je n'ai pas envie de devoir les reprendre une par une à la main.

J'aimerais trouver un moyen de répartir un peu mieux les <p> quand leur contenu est petit et l'image est grande.

Merci de vos conseils
Modifié par PapyJP (27 Jun 2016 - 12:40)

Bonjour,

Si j'ai bien compris, tu parles d'une répartition verticale dans le but d'occuper les vides ?

Je pense immédiatement à align-content: space-between; dans Flexbox qui devrait faire des heureux dans ce contexte

Juste une remarque : trop de variations dans les espacements, ce n'est pas satisfaisant d'un point de vue esthétique non plus.

Idéalement, il faut que les textes remplissent la taille qu'on leur assigne. (C'est ce qu'on demande aux journalistes...)

Sinon, il y a la solution des "bouche-trous" ou des images.

PapyJP a écrit :
Ayant à ma disposition ton œuvre magistrale "Pratique du Design web", je pense que je vais y trouver toute l'information nécessaire.

"CSS3 pratique du design web" est principalement l'oeuvre de Hugo Giraudel (je n'aime pas m'approprier ce qui appartient à César).
Il traite de Flexbox en effet, entre autre.

PapyJP a écrit :
Ayant à ma disposition ton œuvre magistrale "Pratique du Design web", je pense que je vais y trouver toute l'information nécessaire.
Simplement est-ce que je peux considérer que le support des navigateurs, y compris IE9, est suffisant pour me lancer dans cette aventure?

Non, Flexbox est compatible uniquement à partir de IE10, soit seulement 97% de la population (désolé, je ne peux pas m'en empêcher à chaque fois ).
Ceci dit, il existe des Polyfills JS qui font très bien le boulot : du coup, au moins tu n'handicaperas *que* les anciens mauvais élèves.

EDIT : je crois que Zelena apporte une bien meilleure réponse que la mienne, au final.
Modifié par Raphael (27 Jun 2016 - 17:23)

Merci de vos réponses
Zelena a certainement raison, mais je récupère des pages qui sont ce qu'elles sont. Je ne peux jouer que sur la présentation, pas le contenu.
Je vais réfléchir plus avant: je peux d'une part diminuer la taille des "grandes images" et d'autre part jouer sur les espacements verticaux.
Le programme qui gère cela est en PHP, il "suffit" de faire un peu plus de code. J'ai fait pire dans ma vie professionnelle !

Grâce à vos réponses, et aux conseils que la nuit ne manque de prodiguer, j'ai trouvé une solution simple: l'auteur des pages originelles avait donné des paramètres width et height aux balises <img>
C'est le moyen qu'il utilisait pour que l'images ne soit pas trop grandes par rapport au texte.
Il a donc suffi de récupérer un de ces paramètres pour que ça rentre dans l'ordre.