[Résolu] Problème de flottaison

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
Nicosmos
Iguane
Messages : 633
Inscription : 20 août 2005, 14:17

[Résolu] Problème de flottaison

Message par Nicosmos »

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.
Dernière modification par Nicosmos le 16 janv. 2010, 19:05, modifié 1 fois.
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Re: Problème de flottaison

Message par calimo »

Hello,
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à).
Oh purée comme ça râme ! :shock: 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 ? :|
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.
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 :wink: )

Bonne chance !
Asumbaa
Tyrannosaurus Rex
Messages : 2411
Inscription : 08 déc. 2004, 20:07

Re: Problème de flottaison

Message par Asumbaa »

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;
Nicosmos
Iguane
Messages : 633
Inscription : 20 août 2005, 14:17

Re: Problème de flottaison

Message par Nicosmos »

calimo a écrit :Oh purée comme ça râme ! :shock: 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 ? :|
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 ? :?
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. :)
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 :wink: )
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. :?

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. :)
Asumbaa
Tyrannosaurus Rex
Messages : 2411
Inscription : 08 déc. 2004, 20:07

Re: Problème de flottaison

Message par Asumbaa »

Je t'ai répondu entre temps, as-tu vu ? :wink:
Au passage, ça ne ramait pas chez moi (FF 3.5.7 sous Ubuntu)
Nicosmos
Iguane
Messages : 633
Inscription : 20 août 2005, 14:17

Re: Problème de flottaison

Message par Nicosmos »

Ah, message posté en même temps que le précédent. :)
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;
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 ! :)

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. :)
Asumbaa
Tyrannosaurus Rex
Messages : 2411
Inscription : 08 déc. 2004, 20:07

Re: Problème de flottaison

Message par Asumbaa »

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. :)
Bien sûr que ça marche ! :wink: (j'avais testé avant, hein)
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.
Nicosmos
Iguane
Messages : 633
Inscription : 20 août 2005, 14:17

Re: Problème de flottaison

Message par Nicosmos »

J'ai une question supplémentaire pour le même site. Mais je vais créer un nouveau sujet. :)
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Re: Problème de flottaison

Message par calimo »

Asumbaa a écrit :Tu peux créer un contexte de formatage
Je ne connaissais pas… c'est extrêmement intéressant, je me souviens d'avoir galéré avec ça :?
En tous cas, merci pour le truc ! :D
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Ahrefs [Bot] et 4 invités