28173 sujets

CSS et mise en forme, CSS3

Problème d'imbrication de float

salut à tous,

je bloque sur une imbrication de float.

Je pars du code suivant, pas de gestion d'erreur, document valide xhtml 1.0 strict :


    <body>
        <div id="conteneur">
            <p id="p_float_left">
                Blablabla
            </p>
            <div id="div_float_right">
                <p>
                    blublublublublublu
                </p>
                <div id="div_float_right_sub_div_float_right">
                    <p>
                        blibli_1
                    </p>
                    <p>
                        blibli_2
                    </p>
                </div><!-- Fin #div_float_right_sub_div_float_right -->
            </div><!-- Fin #div_float_right -->
        </div><!-- Fin #conteneur -->
    </body>


Le <p> id="p_float_left" est en float à gauche et le <div> id="div_float_right" qui est lui même conteneur d'un certain nombre d'éléments de type et comportement block est en float à droite.

je fait donc une css comme suit :

#conteneur {
padding:10px;
background:#ccc;
border:1px solid #000;
overflow:hidden;
}

#p_float_left {
float:left;
background:red;
}

#div_float_right {
float:right;
padding:10px;
background:#fff;
}

#div_float_right_sub_div_float_right {
background:pink;
padding:5px;
}


Cela donne quelque chose comme ceci :
http://www.clb56.fr/test_css/test_float/test_float_cool.html

Tout cela fonctionne parfaitement mais comme on le voit la deuxième partie du <div id="div_float_right "> que j'ai représentée avec un fond rose (dans le code source elle a l'id "div_float_right_sub_div_float_right" a une largeur déterminée par la première partie, d'un contenu plus large, du même conteneur.

Je souhaiterais que cela ne soit pas le cas et que #div_float_right_sub_div_float_right ait sa largeur simplement déterminée par son contenu.

Or ce <div id="div_float_right_sub_div_float_right"> est lui même conteneur d'éléments qui resteront en comportement block et ne peut donc être mis en comportement inline.

J'ai donc fait le choix de le mettre en float: right;

Soit donc l'imbrication 

<div id="div_float_right">
 ...
     <div id="div_float_right_sub_div_float_right">
                    
     </div><!-- Fin #div_float_right_sub_div_float_right -->
</div><!-- Fin #div_float_right -->


Voici la modification de css qui en résulte

#conteneur {
padding:10px;
background:#ccc;
border:1px solid #000;
overflow:hidden;
}

#p_float_left {
float:left;
background:red;
}

#div_float_right {
float:right;
padding:10px;
background:#fff;
overflow:hidden;
}

#div_float_right_sub_div_float_right {
float:right;
background:pink;
padding:5px;
}


Le résultat est ceci :
http://www.clb56.fr/test_css/test_float/test_float_pas_cool.html


Le moins que l'on puisse dire c'est que ce n'est pas bon.

Et pourtant il me semble bien bien avoir fait ce qui devait l'être quant aux contextes de formatage.


Mais bon si quelqu'un a une idée ben ce serait bien.

<edit>
Enfin surtout une idée sur une erreur que j'aurai pu faire, ou sur un oubli manifeste d'une propriété à mettre en oeuvre.
</edit>
Modifié par clb56 (15 Dec 2006 - 23:54)
Modérateur
bonsoir ,


une des particularité du display:table est d'englober les flottants et d'accepter l'aggrandissement du conteneur quelque soit la taille imposé au depart .

La taille imposé permettrait donc de conferé le layout dans IE6 et inferieur ... hehe , IE7 est vraiment une plaie.

Alors peut-etre un petit pas en avant si tu n'avais pas deja exploré ces possibilités : 
<!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>
        <title>
             Test imbrication de float
        </title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <style type="text/css">
            #conteneur {
            padding:10px;
            background:#ccc;
            border:1px solid #000;
	display:table;/* englobage des flottants */
	width:100%;/* haslayout pour IE et width pour les autres (display:table table dimensionne en fonction de son contenu par defaut) */
            }

            #p_float_left {
            float:left;
            background:red;
            }

            #div_float_right {
            float:right;
            padding:10px;
            background:#fff;
	display:table;/* englobage dues flottants */

            }

            #div_float_right_sub_div_float_right {
            background:pink;
            padding:5px;
	display:table; /* prend les proportions de son contenu */
	width:1%;/* haslayout pour IE et min-width pour les autres (voir rêgle precedente) */
            }
        </style>
    </head>
    <body>
        <div id="conteneur">

            <p id="p_float_left">
                Blablabla
            </p>
            <div id="div_float_right">
                <p>
                    blublublublublublu
                </p>
                <div id="div_float_right_sub_div_float_right">
                    <p>
                        blibli_1
                    </p>

                    <p>
                        blibli_2
                    </p>
                </div><!-- Fin #div_float_right_sub_div_float_right -->
            </div><!-- Fin #div_float_right -->
        </div><!-- Fin #conteneur -->
    </body>
</html>


...

bonne soirée
clb56 a écrit :
Tiens ça marche très bien avec Opera...

Et ça marche aussi très bien avec Konqueror.
Je dirais donc : bug de Firefox (mauvaise gestion des flottants imbriqués ?).
Salut,
Merci gcyrillus pour m'avoir orienté vers des propriétés que j'utilise très peu effectivement pour des raisons d'absence d'implémentation généralisée.

mpop a écrit :

Je dirais donc : bug de Firefox


C'est également mon avis.

un display table sur le flottant parent (dans mon exemple #div_float_right) résoud effectivement le problème et n'en créé pas d'autre pour Opera, Ouf !!!!

Pour IE7 aussi bien qu'IE6 pas de solution en vue de mon coté.

<edit>

Je mets en lien la solution firefox, il y a aussi un commentaire conditionnel IE lt IE7 mais qui ne résoud rien au final.

http://www.clb56.fr/test_css/test_float/test_float_table.html

</edit>
Modifié par clb56 (16 Dec 2006 - 09:25)
clb56 a écrit :
Pour IE7 aussi bien qu'IE6 pas de solution en vue de mon coté.

Bonjour,
A mon avis il faut utiliser display:inline + zoom:1 (en mode standard, sinon inline suffit) pour obtenir un résultat semblable à display:inline-block (qui serait plus approprié que display:table, mais pas encore implémenté par FF)
Modifié par Alan (16 Dec 2006 - 10:13)
Salut Alan,

Alan a écrit :

A mon avis il faut utiliser display:inline + zoom:1


Sur quel élément ?

Je viens de tester et rien ne fonctionne en fait.

Ce qui ne me surprend pas car mettre en comportement inline un conteneur dont les enfants restent eux en comportement block, à mon avis c'est très chaud quand même.
Modifié par clb56 (16 Dec 2006 - 10:33)
Salut clb56

Sur #div_float_right_sub_div_float_right ça devrait fonctionner , mais pour l'alignement il faudrait utiliser text-align.
"clb56" a écrit :
car mettre en comportement inline

Le comportement serait en fait semblable à inline-block et non inline en dotant l'élément de layout
Modifié par Alan (16 Dec 2006 - 10:57)
Alan a écrit :

Salut clb56

Sur #div_float_right_sub_div_float_right ça devrait fonctionner


Hélas non, l'aberration sur la largeur du flottant parent, #div_float_right, subsiste.

concernant IE on en reste au même point que si on n'avait rien fait. J'ai fait une mise à jour du dernier document que j'ai mis en lien, cela illustre le mieux que j'ai pu obtenir concernant IE qui se résume à mettre en text-align:right; le flottant parent.
http://www.clb56.fr/test_css/test_float/test_float_table.html

Vous noterez que l'utilisation de la propriété zoom sur le conteneur global n'est ici plus du tout utile avec IE7 pour finaliser le contexte de formatage. bonne nouvelle donc.

Pour rester sur une note positive j'indique que le problème n'est perceptible que tant que le conteneur #div_float_right est repérable en tant que tel, dans mon cas avec un fond blanc, sinon le rendu est plutôt équivalent, comme ici :
http://www.clb56.fr/test_css/test_float/test_float_table_ok.html

Remarque :
Je dis cela parce qu'en fait par rapport à ce qui m'a fait repérer le problème (avec firefox) ce conteneur n'était pas repérable, c'est pour la présentation sur ce forum que je lui ai mis un fond blanc. Les autres conteneurs en float étaient contre eux parfaitement repérables en rendu visuel.
Modifié par clb56 (16 Dec 2006 - 15:17)
Modérateur
bonjour,

en passant , je met aussi en ligne l'essai proposé en display table (dont l'utilité est d'englober les flottants dans ce cas ).
http://gcyrillus.free.fr/essai/cldb56ibricfloat.html

display:table , a ma connaissance n'est pas implementé dans IE , ailleurs , il l'est a ce qu'il me semble. il s'agit d'une serie de regles amenant a reproduire le comportement d'un groupe de balise comme s'il s'agissait de balise de table (table , td tr , etc ...) En sortant l'une de ces regles css de son contexte dedié , oui il peut y avoir des difficulté d'interpretation . un display:table-caption sans parent en display:table; n'est pas tres logique.
Selon les navigateurs et sorties de leur contexte d'utilisation , ces regles peuvent avoir du mal a etre appliquées comme on l'entend soi même.

Sujet /bug interessant que tu nous sert la Smiley smile .

++
clb56 a écrit :

Hélas non, l'aberration sur la largeur du flottant parent, #div_float_right, subsiste.

As-tu bien pensé a annuler le float ? Car le but serait, pour IE, de remplacer le flottement par inline(-block)

D'après un essai que je viens d'effectuer, ça à l'air de bien fonctionner (testé sur IE 5.5,6,7). Voici la page
Modifié par Alan (16 Dec 2006 - 17:04)
Modérateur
En fait , mon approche et celle d'alan sont assez similaire , je me sert du width en lieu et place de du zoom:1; , qui a le même effet , c'est a dire conferé le layout dans IE , et puis le display table pour adapter au contenu .(sauf pour le conteneur principale ou je remplace l'overflow par un display ) .

Je revient , car j'esperait avoir un retour sur le comportement du code que je t'ai proposé dans IE7. (j'ai une version "beta" , installé en stand alone sur un win sp1 , qui n'a donc aucun interet ).

Dans mon premier post sur le sujet , j'emet une sorte de reserve sur le comportement de IE7 , en estimant qu'il ne comprends pas "display:table;" et qu'il applique le width de la bonne maniere.

Malgré cela , il semblerait que IE7 ai etait concu (pour le rendu css) dans le souci de conserver une retro-compatibilité avec ses predecesseurs. !? une sorte d'excuse ...

Dans ma version "beta et standalone" , le code mis que je propose me donne le même rendu dans : Firefox , Opera , IE6 , (+ version stand alone : IE7 , IE5.5 et IE 5.01 ). flock ... mais ne passe pas bien dans mozilla 1.73 ou le "div_float_right" prend place juste a la fin du texte du paragraphe .

Alors ? passe t-elle dans une version de IE7 derniere mouture ?.

++


la page tester sur : http://v03.browsershots.org/screenshots/521ccd7b63eff0774274a426419bc88a/
semble passé sur tout les navigateur ...

Quelqu'un connait un site pour tester l'affichage dans IE7 ?

bon plus .
Modifié par gcyrillus (17 Dec 2006 - 16:42)
Sujet clos
Aller à