Retour à la ligne (clear)

Bonjour à tous
Je n'arrive pas à trouver la bonne formulation CSS pour traiter le cas suivant:

http://tests.osirisnet.net/migration/outils/diapos3.png

La structure du code HTML:

<article class="news">
    <header><h2> ... </h2><header>
    <figure>... la première image ... </figure>
    <p lang="fr"> le texte en français </p>
    <figure>... la deuxième image ... </figure>
    <p lang="en"> le texte en anglais</p>

Le CSS actuel:

.news figure {
	display:inline-table;
	font-weight:100;
	color:#202020;
	font-size:0.8em;
	float:left;
	margin:0 0.5em 0.125em 0;
	border-radius:0.5em;
	border:1px solid gray;
	padding:0.25em;
}
.news p ~ figure{clear:both;}

La dernière directive force bien la deuxième image à aller à la ligne, mais le deuxième paragraphe reste dans le flot, ce qui est tout à fait normal.
Ma question: comment styler ce contexte pour que la rupture affecte également le paragraphe, c'est à dire que le texte en anglais se mette à côté de la deuxième <figure>?

Merci de votre aide
Modifié par PapyJP (03 Jul 2016 - 15:29)

Bonjour !

Peut-être il y a une autre méthode mais moi sans modifier le HTML, je ne vois pas...

.news figure
	{
	font-weight : 100;
	color : #202020;
	font-size : 0.8em;
	overflow : hidden;
	}
.news figure img
	{
	border-radius : 0.5em;
	padding : 0.25em;
	margin : 0 0.5em 0.125em 0;
	border : 1px solid gray;
	float : left;
	}
.news figure
	{
	clear : both;
	}

<article class="news">
		<header><h2>Titre</h2><header>
		<figure><img src="une_image.jpg" alt="" /><figcaption lang="fr"> le texte en français </figcaption></figure>
		
		<figure><img src="une_autre_image.jpg" alt="" /><figcaption>Le texte en anglais</figcaption></figure>		
</article>

Zelena a écrit :
Bonjour !

Peut-être il y a une autre méthode mais moi sans modifier le HTML, je ne vois pas...

Moi non plus, et c'est pour ça que j'ai posé la question.
Il y a plusieurs centaines de pages en cause, je ne vais pas les modifier manuellement pour un point qui est tout de même secondaire.

Alors j'ai peut-être ce qu'il vous faut :

.news figure
	{
	display:inline-table;
	font-weight:100;
	color:#202020;
	font-size:0.8em;
	float:left;
	margin:0 0.5em 0.125em 0;
	border-radius:0.5em;
	border:1px solid gray;
	padding:0.25em;
	}
.news p::after
	{
	content : "";
	display : block;
	clear : both;
	}

Merci de ta réponse
En fait ce serait plutôt

.news p ~ figure::before{...}

car je ne veux pas aller à la ligne après tous les paragraphes, mais avant les <figure> qui sont précédées d'un paragraphe. Il y a en effet de nombreux cas où il y a plusieurs paragraphes entre les <figure> ou même une seule <figure> en tête d'article.
C'est ce que j'avais essayé de faire avant de commencer cette discussion, mais je n'étais pas arrivé à le faire fonctionner. Je vais réessayer.

Non, ça ne marche as: le ::before se met à l'intérieur de <figure>, ce qui est tout à fait normal mais ça ne fait pas mes affaires.
Une autre idée?
Edit: Si vous voulez regarder la page actuelle, elle se trouve à cette adresse: http://tests.osirisnet.net/news/n_07_04.htm?fr
Mais je ne garantis pas que l'environnement ne va pas changer dans les prochaines heures
Modifié par PapyJP (04 Jul 2016 - 10:11)

En fait je pense qu'il faudrait style .news p ~ figure ~ p, c'est à dire le paragrpahe qui suit immédiatement une figure qui elle même suit un paragraphe, mais je ne sais pas quelle propriété lui donner: si je mets un clear ou même simplement un float:left ça passe au dessous de <figure> et non à côté.
Modifié par PapyJP (04 Jul 2016 - 11:29)

PapyJP a écrit :
.news p ~ figure ~ p, c'est à dire le paragraphe qui suit immédiatement une figure

Une petite précision : ~ est pour tous les éléments qui suivent, et pas uniquement l'élément qui suit immédiatement l'élément précédent. Mais je ne pense pas que cela est une grande importance dans le cas présent.



Edit : pour tous ceux qui renouent avec les floats grâce à PapyJP, voici une très intéressante page :
http://alistapart.com/article/css-floats-101
Modifié par Zelena (04 Jul 2016 - 11:41)

Zelena a écrit :


Une petite précision : ~ est pour tous les éléments qui suivent, et pas uniquement l'élément qui suit immédiatement l'élément précédent. Mais je ne pense pas que cela est une grande importance dans le cas présent.



Edit : pour tous ceux qui renouent avec les floats grâce à PapyJP, voici une très intéressante page :
http://alistapart.com/article/css-floats-101

Tu as raison, c'est + et non pas ~ qu'il faut mettre.
Merci pour ce lien

Bonsoir !

Alors oui possible mais ce n'est pas élégant car cela fait intervenir Javascript...

Sélectionner toutes les figures, prendre l'élément précédent (si il existe) et lui appliquer la classe 'dernier' qui crée le fameux pseudo-élément :

.news .dernier::after
	{
	display : block;
	content : "";
	clear : both;
	}

Compliqué...

Bonjour, sinon une autre idée: utiliser la double-couche figure/image:

img {
  float: left;
  margin-right: 20px;
}
figure {
  margin: 0;
}
figure:before {
  content: '';
  display: block;
  clear: both;
  height: 20px;
}
figure + p {
  margin-top: 0;
}

un codepen pour le voir

par contre cela donne quelques limites sur le visuel, et pose la question de l'éventuel <figcaption> (y en a-t-il?)

Bonjour !

@kustolovic :

L'image sort de l'élément figure, celui-ci se met à avoir une hauteur variable... bref je n'ai pas tout compris mais c'est efficace.

Félicitations.

Zelena a écrit :

L'image sort de l'élément figure, celui-ci se met à avoir une hauteur variable... bref je n'ai pas tout compris mais c'est efficace.

Un élément flottant sort du flux et ne participera plus au dimensionnement de son parent.

ici le figure commence à la fin du p, et se termine à la fin de son enfant :before, qui lui se placera après l'image précédente, grâce au clear.

ça fonctionne mais c'est clairement de la bricole. Dans l'idéal il faudrait préférer donner un parent à chaque groupe figure + paragraphes.
Modifié par kustolovic (05 Jul 2016 - 09:55)