28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Ce que je sais est que j'ai encore beaucoup de choses à distiller...

Voilà ce que je cherche à faire

Nous avons 4 paragraphes, dont 2 contiennent une image.
Chaque paragraphe contenant une image doit flotter à côté du paragraphe de texte suivant.

J'y parviens grace à une balise <hr /> affectée d'un clear=both.

Car un clear sur les paragraphes flottants est sans effet.

Question 1 : Pourquoi le clear est-il sans effet ?

Question 2 : Dans la vraie vie, je ne veux pas de hr (ni de diddles animées ! lol).

J'ai réussi à m'en sortir en encadrant un des deux couples, paragraphe/image et paragraphe /texte, dans un div affecté d'un clear.

Mais j'ai le sentiment que la divite me démange.
Smiley lol

Exemple dans ce billet
Désolée pour l'indentation de la partie post générée en php, je ne me suis pas encore penchée sur la question ... d'où la page de test.

(Bon, et au passage, des photos de Strasbourg, capitale de nos administrateurs préférés, pour vous remercier de votre aide.)

Voilà, j'ai une solution qui me plaît à moitié et je voudrais comprendre ce qui se passe.

Car, dans l'état actuel de ma "comprenure", cela devrait marcher avec un clear (d'ailleurs, cela fonctionne sous IE).

Désolée si le sujet a fait couler beaucoup de topics, j'ai besoin d'une aide rapprochée ...
Smiley cligne

Merci d'avance.
Modifié par Vero (06 Oct 2006 - 16:28)
Hello Vero,

Désolé de répondre un peu tard. Smiley smile

Alors voilà, avec exactement le même code HTML (sauf qu'il faudra virer ces hr inutiles, hein !) :
p {
	overflow: hidden; /* layout nécessaire pour IE6 (pas pour IE7 qui créera un contexte de formatage bien comme il faut) */
	margin : 1em;
	border : 1px solid #ccc;
}
p.left, p.right {
	clear : both;
	overflow: visible;
	border: none;
}
.right img, .left img {
	margin-bottom: 1em;
	border : 1px solid purple;
	background : #fff;
}
p.left img {float: left;}
p.right img {float: right;}


Tu ne peux pas utiliser float et clear sur un même élément. J'ai donc résolu d'utiliser clear sur le paragraphe et float sur l'image. On perd en mise en page, mais avec un padding + border de derrière les fagots on peut toujours faire quelque chose de convenable, je pense.

Le contexte de formatage bloc obtenu avec le overflow sur les paragraphes « normaux » n'est nécessaire que si l'on veut que le bloc lui-même ne puisse pas passer sous le flottant. Si on se fiche de ce que fait le bloc lui-même et qu'on souhaite uniquement que le texte du paragraphe soit repoussé, on laissera faire la magie des flottants... le risque étant alors, par contre, d'avoir du texte qui reviendrait en dessous de l'image si celle-ci n'est pas suffisamment haute.

L'écart entre le texte et l'image peut aussi se faire via les marges sur les images, pas forcément les marges sur les paragraphes. Si on n'utilise pas de contexte de formatage bloc, c'est même la seule solution (à vue de nez...).
Sur le contexte de formatage bloc, la specification en anglais :
http://www.w3.org/TR/CSS21/visuren.html#block-formatting (cf. surtout le troisième paragraphe).

Enfin, il y a les subtilités d'IE et du HasLayout. IE6 n'établit pas de contexte de formatage avec la propriété overflow. IE7 le fait, mais notre ami IE « c'est moi que tout le monde utilise » 6, non. Du coup, on « simule » un contexte de formatage via l'attribution du layout. Dans une feuille de style pour IE6 (et inférieurs, à priori), on pourra annuler l'overflow, utiliser un height: 100%; ou zoom: 1; ou autre joyeuseté, et prier pour ne pas avoir déclenché d'effet secondaires désastreux. Smiley cligne
Bonjour,

Juste une reflexion, ton paragraphe qui contient l'image n'est plus dans le flux, donc on ne peut pas lui conférer la propriété d'arrêter le float, sorti de là ben j'ai posé une class au paragraphe de texte suivant le premier float incluant un clear: right;
A par des histoire de marge ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"
lang="fr">
<head>
	<meta http-equiv="Content-Type"
	content="text/html; charset=UTF-8" />
	<meta name="DC.title" content="Jus de citron : labo" />
		
	<title>Jus de citron : labo</title>
	<style type="text/css">
.left {
	clear : both;
	float : left;
	border : 1px solid #000;
	background : #ccc;

}


.right {

	float : right;
	border : 1px solid #000;
	background : #ccc;

}

.right img, .left img {
	border : 1px solid purple;
	margin : 10px;
	background : #fff;

}

.p_gauche {
       margin : 1em;	
       border : 1px solid #ccc;
	   clear : right;
}
.p_droit {
       margin : 1em;	
       border : 1px solid #ccc;

}
hr {

}
	</style>

</head>
<body>
<!-- Page -->

	<div id="page">
		<h1>Document de tests</h1>
		<h2>Enchaîner 4 blocs avec 2 flottants </h2>
		<div id="content">
			<p class="right"><img src="image1.gif" alt="didle contente" /></p>
			<p class="p_droit">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum</p>


			<p class="left"><img src="image2.gif" alt="didle fatigué" /></p>
			<p class="p_gauche">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum</p>
		</div>
		
			
	</div> <!-- end #page -->
</body>
</html>


Bonne soirée

<edit> j'ai essayé ici à quelques marges près de conserver la mise en page</edit>
Modifié par ghost (05 Oct 2006 - 01:53)
Salut,

Vero a écrit :

Mais j'ai le sentiment que la divite me démange. Smiley lol


Et ça c'est réellement un problème de perspective mal fixée.

. Si image "didle" et texte la suivant forment bien à chaque fois un tout. Et la question peut vraiment être posée si on considère que le choix du rendu à l'écran est lui même porteur d'une signification.
. Si on considère que l'élément <div>, + id ou class, apporte bien de la structure au document. jpv en parle très bien dans ce post :
http://forum.alsacreations.com/topic-6-18214-1-Le-point-sur-limbrication-des-div-.html#p138698

alors il y a complète légitimé à envisager un html tel que suit ( je raccourci le texte "lorem ipsum" pour la présentaton dans le post )

<div id="content">

    <div class="didle_et_texte">
        <p class="right"><img src="enchainement_fichiers/did1.gif" alt="didle contente"></p>
        <p>Lorem
             ipsum dolor sit amet, consectetuer adipiscing elit, sed ...
        </p>
    </div>

    <div class="didle_et_texte">
        <p class="left"><img src="enchainement_fichiers/did2.gif" alt="didle fatiguée"></p>
        <p>Lorem
             ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
             nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
             Ut wisi ...
        </p>
    </div>

</div><!-- end #content -->


Auquel cas les choses se règlent très facilement, tu t'en doutes bien, d'un point de vue css

.didle_et_texte {
clear:both;
overflow:hidden; /* Contexte de formatage */
zoom:1; /* Donne le haslayout pour IE, prévoir commentaire conditionnel pour préserver la validité de la feuille de style */
}

Modifié par clb56 (05 Oct 2006 - 10:04)
Merci à tous !

Au vue de la densité, j'ai de quoi faire !
Le temps de manger et de digérer, au sens propre et au sens figuré !
Smiley cligne Smiley biggrin
Bon, et bien, en sirotant mon café, j'ai relu 2 fois mpop en faisant un peu des essais pour digérer ...

A ce sujet, mpop :

a écrit :
Désolé de répondre un peu tard. smile


Franchement, cela valait le coup d'attendre !
Et je ne suis pas une fille pressée ...
Smiley cligne Smiley biggrin

J'espère que toi non plus, car : je demande un délai !
Smiley sweatdrop

On me l'a dit deux fois : on ne peut pas affecter un clear et un élément en float puisqu'il n'est plus dans le flux : c'est logique et je crois même l'avoir intuité dans un moment de sagesse avançée.
Voilà, c'est rentré donc, cela ne ressortira plus !
Smiley lol

Pour la suite du test de Ghost, le temps de finir mon café ...

Je vais pouvoir répondre à Christian :

Voilà, tu vois, j'en suis à peu près là dans ma dextérité à manipuler xhtml/ css !
Comme précisé dans mon post, c'est la solution que j'avais trouvée, toute seule comme une grande.
Mais elle ne me convient pas, car je n'ai justement pas de raisons de rajouter deux div de plus quant à la logique de contenu, il y en a bien assez dans mon template !

D'ailleurs, si je grimpe d'un étage dans ma logique d'apprentissage, je vais peut-être résoudre des problèmes en amont dans une logique d'économie et descendre d'un cran le nombre de div de structure générale ...

Jusqu'à présent, je ne m'en sortais toujours d'une manière ou d'une autre, sans trop me faire aider.
Mais l'heure a sonné pour moi d'évoluer un peu ...

Avoue que c'est louable comme démarche !
Smiley cligne Smiley smile
Plutôt d'accord avec l'approche de clb56. Juste une remarque :
.didle_et_texte {
	clear:both;
	overflow:hidden; /* Contexte de formatage */
	zoom:1; /* Donne le haslayout pour IE, prévoir commentaire conditionnel pour préserver la validité de la feuille de style */
}

Quel est l'intérêt du clear si les flottants sont contenus dans leur conteneur ? Est-ce un oubli ?

Par contre, je ne suis pas d'accord sur le fait que le couple image + paragraphe doit d'abord constituer un groupe logique avant que l'on ait le « droit » d'englober le tout dans une div. Une div regroupe, mais mis à part la possibilité d'ajouter une information de langue ce regroupement n'a pas d'autre impact que de servir à des supports de style (ou de comportement via DOM/Javascript). Ne pas abuser des div est une chose, mais vouloir absolument trouver un sens à chaque élément employé me semble étrange... et surtout c'est se prendre la tête pour pas grand chose.

Mettre un div enblogant ou pas n'est pas une question de sémantique, mais une question pratique. Pour ma part, je me pose généralement les questions suivantes :
1 - cette solution me permet-elle d'obtenir l'effet voulu ?
2 - cette solution a-t-elle des effets négatifs ou pervers ?
3 - est-ce une solution robuste ?
4 - le cas échéant, peut-elle être automatisée dans un CMS ?
mpop a écrit :
mais vouloir absolument trouver un sens à chaque élément employé me semble étrange... et surtout c'est se prendre la tête pour pas grand chose.


Tiens c'est tout moi ça... Smiley biggol

mpop a écrit :

Mettre un div enblogant ou pas n'est pas une question de sémantique, mais une question pratique.


j'aime pas les questions pratiques Smiley langue

... Et j'aime pas le mot sémantique non plus Smiley lol

... En fait finalement en dehors des zolies bordures arrondies à un seul div je me demande un peu ce que j'aime Smiley ravi
mpop a écrit :

Quel est l'intérêt du clear si les flottants sont contenus dans leur conteneur ? Est-ce un oubli ?


Oui quelque chose comme ça, trop vite écrit et aucun effort pour optimiser.
Modérateur
bonsoir,

sans reprendre les dire ou reflexion des autres , j'ai lu entre autre ... divite ... , lol , non je ne veut pas troller Smiley smile , vais l'eviter ...?

au vu de ton code initiale , je dirais paragraphite Smiley smile , non serieusement en glissant vers la spannite , ta question m'a interessé , l'overflow:hidden; mentionné par mpop m'a aussi interpellé , ... le sujet m'a semblait interessant , et comme toujours une premiere idée theorique mise en application ne reflete pas le resultat escompté.
J'ai fait une tentative de "glissage" coté semantique , là d'autres "plus averti(e)s" , me diront si je me suis vautré .

j'ai d'abord enlevé le div Smiley langue , et hop adieu divite ! , le hr aussi.
Voici une page test , ou j'utilise le overflow:auto; au lieu du hidden , associer a un display:inline-block pour IE (la ou m'as interpellé mpop).
J'en profite a l'occasion de proposé un exemple du defaut caché du !important , Une fois de plus j'espere passer le message sur l'utilité ! importante ! des commentaires conditionnels , quant il s'agit de ciblé IE ).
heu oui , la page de test , css incorporées et quelques commentaires ).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"
lang="fr">
<head>
	<meta http-equiv="Content-Type"
	content="text/html; charset=UTF-8" />
	<meta name="DC.title" content="Jus de citron : labo" />
		
	<title>Jus de citron : labo</title>
	<style type="text/css">

.left {

	float : left;
	border : 1px solid #000;
	background : #ccc;
	margin:1em  ;	

}


.right {
	float:right;
	border : 1px solid #000;
	background : #ccc;
	margin:1em  ;

}

.right img , .left img {
	border : 1px solid purple;
	margin : 10px;
	padding:10px;
	background : #fff;
}

p {
	margin : 1em;	
	overflow:auto;/*ff*/
	display:inline-block; /*IE*/
	border-bottom:groove 3px #8d8d8d;
	
}

p span {
	margin : 1em 0em;	
	border : 1px solid #ccc;

	display:block!important;/* ff n'interfere pas avec le span de 
l'image ou la propriete float prend le dessus , le !important est la pour opera*/  
	overflow:auto;/*ff*/
	display:inline-block; /*IE  ... idem pour le float dans IE */
	padding:0.2em;
}

#langue {
	border:0;
	display:inline!important;/* a cause de l'autre plus haut , 
en passant , les CC pour IE c'est mieux , on decouvre ici 
les effets secondaire de !important! */
	color:#777;
}

br {
vertical-align:top;
/* ou display:table;  pour appliquer la marge dans  ff */
margin:3px;

}
	</style>

</head>
<body>
<!-- Page -->

	<div id="page">
		<h1>Document de tests</h1>
		    <h2>Encha&#238;ner 2 blocs avec 2 flottants </h2>
		
			<p>
				<span class="right">
					<img src="http://labo.jusdecitron.net/images/did1.gif" alt="didle contente" />
				</span>

				<span>
Bonjour, tu parlais de divite et dans la presentation ou moi je voyais un peu de paragraphite , 
ou portionnite , selon le nom que l'on donne a la balise &lt;p&gt; (par exemple, pour moi 
div est egal a <i> zone/ section/ quartier/ block</i> , enfin <u lang="en-us">division</u>  ). 
Finalement en pensant economie ma premiere reflexion  a &eacute;t&egrave; pourquoi pas l'image 
en flottant dans le &lt;p&gt; en appliquant un padding , un margin et une couleur de fond  a l'image,
 et un "essai" de reflexion cot&eacute; 'semantique' , lol ! 
				<br />Bon , et bien , on perd les bordures , okay , j'enleve le div 
et le hr , je garde le &lt;p&gt; comme conteneur du texte et de l'image et je delimite , 
2 sous zones/contenus , au &lt;p&gt; avec 2 &lt;span&gt; .
				<br />
le rendu visuel sans style conserve bien l'image avec son texte , quand au css je retrouve a 
peu pr&eacute;s la mise en page initiale 
				</span>

			</p>
<!-- fin paragraphe -->			
			<p >
				<span class="left">
					<img src="http://labo.jusdecitron.net/images/did2.gif" alt="didle fatigué" />
				</span>

				<span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna 

aliquam erat volutpat.
				<br />
<strong>N'est ce pas la un glissement vers la spannite [smile]? , en fait le "surplus" de balises est du au rendu visuel voulu  , 

voili voilou [smile] .Semantiquement un span n'est pas forcement  neutre , il peut toujours servir de point d'ancrage , indication 

de lang="pas-fr" , etc ...il  n'interefere donc pas sur la signification du contenu  , plus encore il peut la completer ou 

marqu&eacute; l'emplacement d'un morceau de texte , reli&eacute; 2 portions de texte  ou texte/illustration pour info ou 

complementarité sans importance majeure de contenu,  hmm hmm , derapage de <span id="langue" title=" gros lourd m&ecirc;me pas 

maniac !"  >boulet faux tatasse </span> ?</strong>
				<br />
 nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie 

consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent 

luptatum
			</span>	

			</p>
<!-- fin paragraphe -->			
		
			
	</div>
 <!-- end #page -->
</body>
</html>


Bien entendu , ne pas prendre ce message de ma part comme un message tres "serieux" ou "je ne peut plus mettre mes chaussures" , Smiley smile .

<hs>Je ne sais pas etre "serieux" , et pour le sujet , simple amateur qui a trouver une façon de bricoler sans avoir a sortir la "caisse à outils" , et pour le rangement , ... je pousse le bouton et "la bricole" est rangé !.</hs>

sinon , spannite/divite/balisite .... d'autres methodes ou approches auraient pus sembler interessantes ?

++
J'ai lancé ce sujet, moi ?
Smiley lol

Non, non, mais vous pouvez continuer, vous êtes tous les bienvenus !

Pour ma part, je suis juste restée bloquée au deuxième post ...

Je n'ai pas encore eu le temps, à vrai dire de m'y pencher.
Car là, j'ai besoin de calme et de concentration pour tout vous dire (j'ai l'impression d'avoir le nez dans mes impasses !)

Donc, une fois que j'aurais compris tout ce qu'on a cherché à me dire, j'évaluerai à ma manière si le div simplificateur est préférable à la css tordue ... ou si le génie css peut venir à bout de l'ignorante divite ...

Je n'ai pas de problème urgent à résoudre, ma page se tient bien pour l'instant.
Je voudrais juste évoluer un peu et voir si je peux résoudre autrement des trucs qui me tracassent parfois ...

A priori, sans le vouloir, j'ai choisi un bon terrain de jeu !


Smiley ravi
Modifié par Vero (05 Oct 2006 - 23:50)
Salut,

bon comme on est vendredi il y a un vrai risque de dérapage, mais il y a quand même des choses que je ne peux pas laisser laisser passer.

Parler de divites dans le cadre indiqué par Vero c'est ne rien comprendre à l'éventuel sens de ce terme.

Si vous voulez apprendre à éviter la divite apprenez à penser méthodologiquement vos documents en no style et no div. Ceci devrait vous préserver des dérives et en même temps vous éviter de paniquer dès la présence de cette balise.

sinon et pour continuer sur le mode méchant que j'affectionne tant je trouve que les jeux de mots sur paragraphite spanite et tutti quanti sont quand même un peu puérils.

Sachant que, et pour le redire, il y a quand même quelque chose à penser un minimum dans toute cette affaire.
Modifié par clb56 (06 Oct 2006 - 11:48)
Modérateur
bonjour,
->clb56
a écrit :
... sont quand même un peu puérils


Le terme qu'il fallait relevé etait "balisite" Smiley smile , car divite ou autre ne veulent pas dire grand chose non plus, hors contexte , ça reste bien souvent dans le cadre tableu VS div , tout autant inconsistant.
Pourtant quand on parle de "divite" , ça mêne bien vers le sujet general: quelle balise choisir ?
...
je crois avoir dit clairement que je n'etait pas capable de voir "serieusement" les choses , amateur, sans formation et sans interet vitale , le web reste pour moi un gadget dont on peut se passer , en d'autre mots 'virtuel et parfois couteux ' , pour moi l'accessibilité d'un site commence par , l'acces a mére "electricité" , puis accessoire obligatoire un pc(ou autre media "electrique") avec ses outils de communication "physiques" et "virtuels" en etat de fonctionnement ..encore faut-il savoir s'en servir .. vous comprendrez qu'a partir de la , l'echauffement de certains topic , me font , ou sourire ou me fatigue selon mon humeur.

Cela ne veut pas dire , que je ne comprends pas l'enjeux economique que tout ceci peut avoir pour une majorité des utilisateurs de ce forum , et "mes sourire" ne sont en aucun cas un manque de respect , je tente au mieux d'en apprendre un peu et d'apporter un point de vue qui n'est pas "academique" et pour cause . ... bon pour ce vendredi ça ira Smiley smile ?

a écrit :
.. à penser méthodologiquement vos documents en no style et no div.

a propos , a tu regarder le code que je propose sans style Smiley smile .

Quelles sont les methodes a privilegiées ? (non ! serieux , la je derape encore et je pousse puerilement au troll , désolé pas besoin de repondre, on ne va pas trop pollué le topic de vero qui craignait se faire prendre par lune demangeaison de "divite aigue" ).
-> Vero
a écrit :
A priori, sans le vouloir, j'ai choisi un bon terrain de jeu !

ça en a tou l'air Smiley smile , enfin, que pour moi peut-etre ? Smiley decu

++
Modifié par gcyrillus (06 Oct 2006 - 16:03)
J'ai étudié toutes vos propositions.

@mpop
Raté !
Je tiens justement à la bordure du paragraphe de la photo, plus qu'à celle des paragraphes de texte que j'ai rajouté pour observer le comportement.
D'où le montage et le problème !

Mais ton laïus m'a permis de réviser, ou plus exactement de m'intéresser au contexte de formatage : il était temps !
Smiley cligne

@Ghost
L'utilisation du "clear : right" sur le deuxième paragraphe provoque un décalage du texte, mais pas de la photo ...
J'avais d'ailleurs testé cette solution : mais elle ne marche pas dans tous les cas.
En réduisant la taille du bloc, ce qui est le cas dans mon contexte réel, le premier texte étant plus long que la première photo, j'obtiens le résultat attendu.
Mais à l'inverse, si le texte est plus court, ce n'est pas terrible ...

@gcyrillus
Même en rendant à la balise p ses lettres de noblesse (on arrive au même résultat qu'avec les span ...) ta proposition ne tient pas la route, surtout lorsqu'on réduit la taille du bloc et/ou de la fenêtre ...
Smiley ohwell

Le code que tu nous présentes est compliqué à souhait ...

@clb56
Je crois que tu as gagné !

Dans le contexte de l'article qui m'amène à cette difficulté, j'ai bel et bien deux parties pouvant être considérées comme distinctes.

Le cas échéant (un article "continu" illustré par deux photos, par exemple), il serait tout à fait envisageable de séparer les 2 blocs "paragraphe photos + paragraphe texte" par un paragraphe de texte affecté d'un clear.

Comme quoi, tout dépend un peu du contexte.

De plus, il serait un peu lourd de créer une série de styles par article !

Conclusion : retour à la case départ côté stratégie, mais j'ai compris et appris quelque chose !

Résultat : concluant d'un point de vue apprentissage !

Merci pour votre participation, ce sujet peut-être considéré comme résolu.
Smiley biggrin
Vero a écrit :
Comme quoi, tout dépend un peu du contexte.

De plus, il serait un peu lourd de créer une série de styles par article !

Pour le coup, c'est le sujet qui m'intéresse le plus : comment industrialiser une solution à la fois accessible et souple, utilisable dans un CMS par un rédacteur pas spécialement formé à tous plein de choses ?
Un sacré casse-tête.

On se retrouve avec deux solutions-type très balisées (ce qui ne veut pas dire qu'elles utilisent beaucoup de balises, hein !) :
1 - à la Dotclear (mode d'édition wiki) : des possibilités de mise en page très limitées, axées avant tout sur le texte ;
2 - à la Typo3/FlexForms : on crée un type de contenu défini de manière très stricte... ici on aurait un type « bloc image flottante à gauche + paragraphe » et un type « bloc image flottante à droite + paragraphe ».

Pour ma part, j'estime que la solution la plus efficace serait alors de pouvoir insérer un type de contenu spécifique au sein du contenu général.

Mais on s'éloigne du sujet (déjà clos, d'ailleurs).