[Résolu] Problème de flottaison
[Résolu] Problème de flottaison
Hello
Je viens de me rendre compte que ça fait des années que je n'ai pas utilisé de flottants en CSS. Et là, il suffit que je fasse une mise en page avec pour que je tombe sur un problème, probablement basique, mais que je n'arrive pas à résoudre.
La page en question est là : http://gos-uk.fr/indev/site/test.html (enfin, c'est une page de démo juste pour montrer ce problème là).
L'idée est simple. Tout les éléments de gauche, la navigation, les boutons vers les réseaux sociaux et le bidule Facebook, sont en float:left. Le contenu, lui, est en positionnement normal (enfin, en relatif en fait). Et lorsque dans le cadre de contenu je veux utiliser un élément flottant, comme l'image dans la démo, il ne se met pas au bon niveau. L'image, par exemple, est descendue au niveau du bas de la navigation.
Et à vrai dire, je ne sais pas trop quoi faire. J'ai essayé de mettre des clear:left, clear:both un peu à plein d'endroits, sur différents éléments, de mettre des spacer aussi, pour tester, et rien n'arrive à arrêter ce comportement. Je ne crois pas l'avoir déjà rencontré avant, mais ça me semble assez basique comme situation, je suis sûr que la solution est probablement assez simple. Ça m'apprendra à ne pas utiliser de flottants pendant longtemps.
Quelqu'un a une idée ?
Merci !
Nico.
Je viens de me rendre compte que ça fait des années que je n'ai pas utilisé de flottants en CSS. Et là, il suffit que je fasse une mise en page avec pour que je tombe sur un problème, probablement basique, mais que je n'arrive pas à résoudre.
La page en question est là : http://gos-uk.fr/indev/site/test.html (enfin, c'est une page de démo juste pour montrer ce problème là).
L'idée est simple. Tout les éléments de gauche, la navigation, les boutons vers les réseaux sociaux et le bidule Facebook, sont en float:left. Le contenu, lui, est en positionnement normal (enfin, en relatif en fait). Et lorsque dans le cadre de contenu je veux utiliser un élément flottant, comme l'image dans la démo, il ne se met pas au bon niveau. L'image, par exemple, est descendue au niveau du bas de la navigation.
Et à vrai dire, je ne sais pas trop quoi faire. J'ai essayé de mettre des clear:left, clear:both un peu à plein d'endroits, sur différents éléments, de mettre des spacer aussi, pour tester, et rien n'arrive à arrêter ce comportement. Je ne crois pas l'avoir déjà rencontré avant, mais ça me semble assez basique comme situation, je suis sûr que la solution est probablement assez simple. Ça m'apprendra à ne pas utiliser de flottants pendant longtemps.
Quelqu'un a une idée ?
Merci !
Nico.
Dernière modification par Nicosmos le 16 janv. 2010, 19:05, modifié 1 fois.
Re: Problème de flottaison
Hello,
C'est le HTML 5 ? Je n'arrive pas à isoler ce qui coince, si ce n'est que ça scrolle bien avec les CSS désactivés… les effets du menu ?
Tant que les CSS3 Template Layouts ne seront pas utilisables, il faut utiliser un positionnement absolu, ce qui n'est pas évident vu que ce qui est à droite n'est pas tout dans un seul conteneur générique… mais ça devrait être possible (j'ai essayé mais je suis perdu dans ta feuille de style et ne suis arrivé à rien du tout )
Bonne chance !
Oh purée comme ça râme ! Je ne sais pas ce qui provoque ça… pas le « bidule facebook » en tous cas. (j'adore le choix du terme « bidule », parfait dans ce contexte… tu suivais le Vrai Journal lorsque ça existait encore ?)Nicosmos a écrit :La page en question est là : http://gos-uk.fr/indev/site/test.html (enfin, c'est une page de démo juste pour montrer ce problème là).
C'est le HTML 5 ? Je n'arrive pas à isoler ce qui coince, si ce n'est que ça scrolle bien avec les CSS désactivés… les effets du menu ?
C'est le problème des float. Ils ne sont pas vraiment prévus pour faire un positionnement de menus ! Tu sors tes éléments du flux, c'est normal qui se mettent à la suite…Nicosmos a écrit :L'idée est simple. Tout les éléments de gauche, la navigation, les boutons vers les réseaux sociaux et le bidule Facebook, sont en float:left. Le contenu, lui, est en positionnement normal (enfin, en relatif en fait). Et lorsque dans le cadre de contenu je veux utiliser un élément flottant, comme l'image dans la démo, il ne se met pas au bon niveau. L'image, par exemple, est descendue au niveau du bas de la navigation.
Tant que les CSS3 Template Layouts ne seront pas utilisables, il faut utiliser un positionnement absolu, ce qui n'est pas évident vu que ce qui est à droite n'est pas tout dans un seul conteneur générique… mais ça devrait être possible (j'ai essayé mais je suis perdu dans ta feuille de style et ne suis arrivé à rien du tout )
Bonne chance !
Re: Problème de flottaison
Salut,
Tu peux créer un contexte de formatage sur ton contenu en ajoutant la propriété css suivante :
Tu peux créer un contexte de formatage sur ton contenu en ajoutant la propriété css suivante :
Code : Tout sélectionner
overflow: auto;
Voir ma configuration
Re: Problème de flottaison
C'est étrange, j'ai pas ce problème ici. Ça tourne bien. Et plusieurs personnes ont vu le site sans problèmes apparents non plus. C'est avec quel navigateur, je n'ai pas testé sous grand chose d'autre qu'un Firefox 3.6 et un Chrome 4 ?calimo a écrit :Oh purée comme ça râme ! Je ne sais pas ce qui provoque ça… pas le « bidule facebook » en tous cas. (j'adore le choix du terme « bidule », parfait dans ce contexte… tu suivais le Vrai Journal lorsque ça existait encore ?)
C'est le HTML 5 ? Je n'arrive pas à isoler ce qui coince, si ce n'est que ça scrolle bien avec les CSS désactivés… les effets du menu ?
Pour le Vrai Journal, non, je ne crois pas. Ou si, j'ai peut-être entre-regardé en étant pas loin, et c'est une référence inconsciente. Mais j'en doute.
Oui, je sais, je n'utilise jamais de float habituellement four faire ça, mais du positionnement absolu. En fait, c'est ce que j'avais fait au début. Mais j'avais eu des problèmes avec les éléments qui ne voulaient pas se mettre en dessous du <header>, pour que le logo soit superposé. Et avec z-index, le menu perdait complètement le focus, impossible d'agir/cliquer dessus. Enfin, je re-re-re-testerais, voire si je trouve pas une solution.calimo a écrit :C'est le problème des float. Ils ne sont pas vraiment prévus pour faire un positionnement de menus ! Tu sors tes éléments du flux, c'est normal qui se mettent à la suite…
Tant que les CSS3 Template Layouts ne seront pas utilisables, il faut utiliser un positionnement absolu, ce qui n'est pas évident vu que ce qui est à droite n'est pas tout dans un seul conteneur générique… mais ça devrait être possible (j'ai essayé mais je suis perdu dans ta feuille de style et ne suis arrivé à rien du tout )
Par contre, ce comportement de float m'a surpris. Je ne pensais pas que la flottaison d'éléments dans un bloc pouvait interagir à ce point sur la flottaison d'éléments dans un autre bloc en parallèle. Ils n'ont pas de lien de parenté.
Quand aux Template Layouts, je les attends aussi depuis un moment, et je suis impatient de tester leurs possibilités.
Re: Problème de flottaison
Je t'ai répondu entre temps, as-tu vu ?
Au passage, ça ne ramait pas chez moi (FF 3.5.7 sous Ubuntu)
Au passage, ça ne ramait pas chez moi (FF 3.5.7 sous Ubuntu)
Voir ma configuration
Re: Problème de flottaison
Ah, message posté en même temps que le précédent.
Edit: Oui, j'ai vu
Edit2: Ça maarche ! Merci Je reste quand même perplexe quant au rapport entre overflow et les flottants. Ça n'a à priori rien à voir et ça fonctionne. Enfin, c'est l'essentiel.
Tiens, je ne connaissais pas du tout ça. Ça à l'air de correspondre à ce problème. Je m'en vais tester ça tout de suite. Merci !Asumbaa a écrit :Salut,
Tu peux créer un contexte de formatage sur ton contenu en ajoutant la propriété css suivante :Code : Tout sélectionner
overflow: auto;
Edit: Oui, j'ai vu
Edit2: Ça maarche ! Merci Je reste quand même perplexe quant au rapport entre overflow et les flottants. Ça n'a à priori rien à voir et ça fonctionne. Enfin, c'est l'essentiel.
Re: Problème de flottaison
Bien sûr que ça marche ! (j'avais testé avant, hein)Nicosmos a écrit :Edit2: Ça maarche ! Merci Je reste quand même perplexe quant au rapport entre overflow et les flottants. Ça n'a à priori rien à voir et ça fonctionne. Enfin, c'est l'essentiel.
Je suis d'accord que le coup de l'overflow semble bizarre au début. Mais c'est juste le moyen efficace pour créer ce fameux contexte de formatage.
Voir ma configuration
Re: Problème de flottaison
J'ai une question supplémentaire pour le même site. Mais je vais créer un nouveau sujet.
Re: Problème de flottaison
Je ne connaissais pas… c'est extrêmement intéressant, je me souviens d'avoir galéré avec çaAsumbaa a écrit :Tu peux créer un contexte de formatage
En tous cas, merci pour le truc !
Qui est en ligne ?
Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 13 invités