[Résolu] Positionnement CSS complexe (entourer du texte par du texte).

Bonjour à tous,
C'est ma première demande, et je vous avoue avoir cherché un moment sans vraiment trouver la solution de ce que je voudrai parvenir à faire.

Il s'agit d'un positionnement moins classique que tous les cas basiques : entourer complètement (au moins sur trois bord) un bloc de texte par un autre bloc de texte, sans superposition.
Voici l'exemple :


J'ai trouvé des solutions qui ne sont pas satisfaisantes. La plus courante :
- Définir un bloc 1 pour les trois premières lignes
- Définir un bloc 2 (jaune) et 3 (vert) pour les deux blocs suivant.
Or, comme le texte continue du bloc 1 (vert) au bloc 3 (vert) ce n'est donc pas efficace.
J'avoue bloquer...si jamais vous pouviez m'aider, je vous en remercie vraiment !
Modifié par sourcelab (27 Dec 2008 - 17:52)

tu peux pour ça utiliser le positionnement grâce aux flottants:

<!-- BLOC DROIT -->
<div id="blocdroit">
	<p>Trium quisque amicorum causa numquam acerbius insectarique fiunt enim sunt vera ut precari honeste amicorum ab commodis ab ut multa prorsus detrahunt quibus quam se vera supplicare quae ut patiuntur.</p>
</div>


<!-- TEXTE GAUCHE -->
<p id="gauche">Ton texte ici</p>

Il et suffit de remplacer ton texte, et voici le css:

div#blocdroit {
	float: right;
	background-color: #fbf200;
	border: 1px solid #000;
	width: 200px;
}

p#gauche {
	background-color: #31d200;
}

le premier bloc (#blocdroit) va flotter à droite et donc il sera entouré par le paragraphe (#gauche) qui va prendre toute la place restante: donc celle autour du bloc #blocdroit..

pour plus d'informations, voir la faq: http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS

Merci Exavin !
Mais ça, hélas, je le sais depuis un moment...mon souci est justement que ce n'est pas ce que je cherche : je voudrai que le bloc droit, dans ton exemple, soit "en partie relatif" (gauche/droite) et "en partie absolu" (haut/bas).
Là, il flotte à droite, mais en haut à droite. Ce que je voudrai, c'est qu'il flotte, mais (en haut-x lignes de textes). Si je défini un padding/margin, ce n'est pas suffisant puisque ce positionnement absolu empêche dès lors l'affichage du texte en dessus. Le truc agaçant, c'est que c'est juste l'affichage du texte, qui est bloqué, pas l'adaptation de la cellule. Je voudrai forcer le texte

Donc je suis obligé de définir une position absolue en hauteur mais pas par les padding/margin....d'où mon problème persistant...
Modifié par sourcelab (27 Dec 2008 - 12:34)

tu veux réaliser l'exemple que je t'ai montré mais avec la possibilité d'inscrire du texte au-dessus du bloc situé à droite ?

exactement !
Or, en mettant une margin-top, ça passe pour la cellule, mais pas pour le texte !

Par exemple :

div#blocdroit {

	float: right;
        margin-top:70px;
	background-color: #fbf200;

	border: 1px solid #000;

	width: 300px;

}



p#gauche {

	background-color: #31d200;

}

et

!-- BLOC DROIT -->

<div id="blocdroit">

	<p>Trium quisque amicorum causa numquam acerbius insectarique fiunt enim sunt vera ut precari honeste amicorum ab commodis ab ut multa prorsus detrahunt quibus quam se vera supplicare quae ut patiuntur.</p>

</div>





<!-- TEXTE GAUCHE -->

<p id="gauche">Ton texte iciTrium quisque amicorum causa numquam acerbius insectarique fiunt enim sunt vera ut precari honeste amicorum ab commodis ab ut multa prorsus detrahunt quibus quam se vera supplicare quae ut patiunturTrium quisque amicorum causa numquam acerbius insectarique fiunt enim sunt vera ut precari honeste amicorum ab commodis ab ut multa prorsus detrahunt quibus quam se vera supplicare quae ut patiunturTrium quisque amicorum causa numquam acerbius insectarique fiunt enim sunt vera ut precari honeste amicorum ab commodis ab ut multa prorsus detrahunt quibus quam se vera supplicare quae ut patiunturTrium quisque amicorum causa numquam acerbius insectarique fiunt enim sunt vera ut precari honeste amicorum ab commodis ab ut multa prorsus detrahunt quibus quam se vera supplicare quae ut patiunturTrium quisque amicorum causa numquam acerbius insectarique fiunt enim sunt vera ut precari honeste amicorum ab commodis ab ut multa prorsus detrahunt quibus quam se vera supplicare quae ut patiunturTrium quisque amicorum causa numquam acerbius insectarique fiunt enim sunt vera ut precari honeste amicorum ab commodis ab ut multa prorsus detrahunt quibus quam se vera supplicare quae ut patiuntur</p>

</html>

Modifié par sourcelab (27 Dec 2008 - 12:36)

Non, je pensais avoir trouvé, mais ça ne marche pas.
A mon avis, limite des CSS, très clairement....
Modifié par sourcelab (27 Dec 2008 - 14:01)

Salut,

une "solution" avait été proposée par yakou32 dans ce post. Le problème est qu'en cas d'augmentation de la taille du texte les marges peuvent grignoter le contenu.

Bonjour,

Ce qui est montré sur l'image se réalise simplement en plaçant le bloc flottant à l'intérieur du flot de texte. Par contre ce n'est pas terrible niveau accessibilité, car on coupe un contenu logique (flot de texte) en y insérant un contenu qui peut être différent, et dans tous les cas gênera la lecture linéaire.

Notons que c'est jouable ainsi si le flottant doit être entouré par le texte sur trois bords: au dessus, en dessous, et soit à gauche soit à droite. Si on souhaite que le texte se place à la fois à gauche et à droite... eh bien c'est simplement impossible, les navigateurs web n'ayant pas cette capacité, à l'inverse des logiciels de PAO et de certains traitements de texte.

Par ailleurs en termes de design je trouve l'effet assez peu heureux, pour ne pas dire gentiment inutile. Placer le flottant en début de contenu et le faire flotter à droite est largement suffisant, et fait passer un message plus clair sur la nature des différents contenus.

Bref, ça peut se faire, mais je ne le ferais pas.
Modifié par Florent V. (27 Dec 2008 - 13:29)

Oup-là !
Je n'avais pas vu vos réponses...je regarde ça attentivement, merci vraiment.
Pour Heyoan, peut-être ce n'est pas très heureux....mais c'est ce que quantité de magazines font....
Par exemple : lemonde.fr
<modération : attention aux liens trop longs qui déforment le forum. />
Regardez la boite "Sur le même sujet".
Bien sûr, eux, ne sont "pas forts" : ils ont fait d'abord une div avec le début du texte, puis ont fait deux div. Moi, je voulais atteindre ça seulement avec deux div et pas trois (je vais regarder vos exemple). Pourquoi je veux ça ? Parce que dans le cas que je cite, de l'article, ils ont une manip qui leur permet d'arrêter le texte (et donc, limiter la div) à un point. et ça me complique les choses, ça.
Modifié par Heyoan (27 Dec 2008 - 14:12)

Oui, c'est exactement ça : http://7ou.fr/bas-a-droite-spacer.html
Bravo et merci pour cette astuce, voilà qui est super.
Excusez-moi pour le lien, je serai attentif promis, pour les prochaines occasion.

Si tu considères que ce sujet est [Résolu] merci de l'indiquer en éditant ton premier post et en modifiant le titre.

Dans le cas de l'article du monde.fr, la structure est la suivante:

Premier paragraphe du contenu.

Encart flottant à gauche.

Deuxième paragraphe du contenu.

Troisième paragraphe du contenu.

...

Bref, de l'ultra-classique, on fait ça par exemple pour placer des images d'illustration dans les articles. Rien de bien compliqué.

Par contre, comme je le signalais plus tôt, ça pose un problème d'accessibilité car le contenu est coupé et la lecture linéaire n'est pas très cohérente. Mais comme la coupure se fait entre le paragraphe d'introduction et le corps de l'article, ça reste plutôt correct.

Maintenant si tu n'as pas organisé tes contenus et leur gestion pour avoir séparément des textes introductifs et le corps de texte -- ce qui te permettrait de faire facilement ce que fait lemonde.fr --, il te reste des solutions techniques:

1. en PHP ou autre langage serveur, parser ton corps de texte pour le séparer en plusieurs morceaux, et ensuite afficher morceau 1, encart, morceau 2 par exemple;
2. faire la même chose à l'affichage de la page, en JavaScript (manipulation du DOM).

Mais l'instruction «place-moi tel contenu au milieu de tel autre» ne peut pas être gérée en CSS.

Florent V. je suis entièrement d'accord : c'est de l'ultra-classique, la solution "à défaut" qu'on trouve partout, mais qui n'est pas satisfaisante pour la raison que j'ai indiquée : elle nécessite "en amont" de disposer d'un premier paragraphe de contenu dissocié/réassocié artificiellement à la suite des paragraphes et, "en aval", elle risque de poser le problème d'accessibilité que tu soulèves.

Mais, au bout du compte, quel est l'intérêt d'une telle boite et d'une telle manipulation ? Elle est liée au contenu de ces boites. Je m'explique.
Ce problème s'est posé pour moi dans le cadre du développement d'un CMS (wordpress) pour de l'édition (revue/magazine). Les articles sont constituée de matières telles que le "commentaire de traduction". Du coup, dans le petit encart flottant se situe la phrase commentée, que le texte paragraphe commente.
C'est tellement spécifique à ce type d'article-là, que c'est pour éviter d'avoir à remanier la mise en page générale de tous les articles publiés par cette édition que j'ai choisi cette solution.
Voilà.
Encore merci à toi et à tous, pour votre aide.