[résolu] Rupture d'habillage en flottant

Bonjour à tous,

Je reviens pour une nouvelle question de CSS (en esperant que personne de collera dessus... )

LE CONTEXTE

J'ai une mise en page à largeur fixe, sur 3 colonnes avec un positionnement en flottant des colonnes droites et gauches.
Le centre reçoit du contenu, sous la forme de plusieurs petits articles qui se succèdent verticalement, avec une mise en forme style 'magazine' : les photos qui illustrent les articles sont habillées par le texte, et sont calées soit à droite, soit à gauche. J'utilise naturellement un positionnement flottant pour ces images, et le résultat fonctionne à merveille.

LA QUESTION

Il arrive que certains articles du contenu aient très peu de texte. Conséquence en cas d'illustration habillée : le texte n'habille pas entièrement l'image (c'est normal).
L'autre conséquence, qui est genante cette fois : Lorsque je démarre un nouvel article à la suite du précédent, le nouveau titre et contenu viennent terminer d'habiller l'image du précédent article. Ce comportement est normal du point de vue de l'interprétation CSS, mais n'est évidemment pas souhaité.
En effet je voudrais rompre l'habillage de l'image flottante et démarrer mon nouvel article, en-dessous, à la suite.

La première solution que j'ai envisagé était de détourner une astuce proposée par Raphaël (dans son livre p.117) qui consiste à placer une ligne horizontale 'hr' à l'endroit de la séparation et de lui attribuer un clear:both (et eventuellement visibility:hidden). Ca a l'avantage d'être sémantiquement correct, mais ça ne fonctionne pas dans mon cas du fait de la mise en page globale qui utilise les flottants car le clear:both pousse ma ligne de séparation sous les colonnes droites et gauches (flottantes).

Du coup j'ai beau me creuser la tête je ne vois pas comment faire (sans abandonner mes objectifs bien sûr)...

Ya-t-il une ame experte et charitable pour répondre à mon souci ?

Merci d'avance...
Modifié par grrreg (12 Jan 2007 - 11:07)

Bonjour ...

Je crains que sans un exemple en ligne, un screenshot ou un morceau de code avec le visuel du bug ...
Nous ayons du mal à te renseigner

Salut.

Je pense que tu devrais trouver ton bonheur dans cet excellent article

grrreg a écrit :
La première solution que j'ai envisagé était de détourner une astuce proposée par Raphaël (dans son livre p.117) qui consiste à placer une ligne horizontale 'hr' à l'endroit de la séparation et de lui attribuer un clear:both (et eventuellement visibility:hidden). Ca a l'avantage d'être émantiquement correct, mais ça ne fonctionne pas dans mon cas du fait de la mise en page globale qui utilise les flottants car le clear:both pousse ma ligne de séparation sous les colonnes droites et gauches (flottantes).

Il faudra effectivement utiliser la propriété clear (clear: left ou clear: right suivant l'orientation des flottants... clear: both si on ne peut pas savoir à l'avance). Par contre, il serait plus logique de placer le clear sur les titres des nouveaux articles, non ? Ou sur la div contenant l'article, s'il y en a une.

Pour le problème de la gestion de clear qui fait descendre les éléments en dessous du niveau des menus flottants latéraux, cf. l'article suivant : Float, clear et contextes de formatage.

Edit : grilled.
Modifié par mpop (11 Jan 2007 - 13:39)

Merci Sopo et mpop.
Ca a l'air de correspondre. Je lirai l'article en fin de journée, et je reviendrai ici pour réagir, avec du code et du screenshot si je n'ai pas résolu le problème...

Alors je reviens donner de mes nouvelles, et au passage je marque le sujet comme résolu car à peu de choses près c'est le cas.
L'article que vous m'avez donné correspond exactement à mon problème, et il est vraiment excellent. Heureusement qu'il y a des personnes pour se pencher sur tous les cas de figuere. Je crois d'ailleurs que c'est un des modérateurs du forum qui en est l'auteur, non ?

En tout cas merci beaucoup.

Sinon pour mon cas voici ce qu'il en retourne :

Sous FF et OP ça fonctionne impeccablement, en outre il faut que je crée le 'contexte de formatage' du div conteneur avec l'attribut display:table-cell, car l' overflow:auto suggéré dans l'article a pour effet de tout centrer et réduire horizontalement de manière bizarre.

Sous IE avec une CSS en commentaire conditionnelle, ça fonctionne aussi avec un height:1%. En revanche ça a pour effet de m'annuler le bug IE des 3px pour les flottants (quie j'avais corrigé) !!! Du coup j'ai un peu mal au neurones à force d'essayer de comprendre le foutu fonctionnement d'IE6 et les correctifs qui se corrigent entre eux... Je vais prendre un jour de repos avant de replonger dans le code..

Pour terminer et répondre sur un détail à mpop : je suis d'accord, c'est plus logique de placer le clear sur les titres de mes articles, mais j'avais un peu simplifié le contexte, et dans mon cas j'ai parfois besoin de revenir à la ligne au sein d'un article, et de recommencer avec une image flottante habillée par du texte, aussi je pense que là je n'ai pas d'autre choix que d'utiliser une ligne horizontale masquée...

Merci encore !


Modifié par grrreg (12 Jan 2007 - 11:25)