Ma div flottante efface le fond sous firefox !

[ollvin]

Bonjour à tous,

Vous pouvez voir mon problème à cette adresse.

J'ai un conteneur principal sous forme d'une div nommée "global", comportant une image de fond. J'inclus dans cette div deux div flottantes : le menu à gauche et le contenu de la page à droite.

Tout s'affiche bien dans IE et Netscape mais, sous Firefox, le fond disparaît à partir des parties flottantes (au-dessus, derrière le bandeau-titre, il s'affiche correctement). Résutat : mon contenu s'affiche sur un fond tout blanc. Quand j'enlève le float, le fond réapparaît... mais ma page ne s'affiche plus comme je veux. Le plus bizarre, c'est que le menu juste à côte, avec la même propriété, n'affecte rien du tout. J'ai essayer de passer le float de ma page en left ou de lui assigner un fond pour imiter les paramètres du menu mais ça ne change rien.

Avez-vous une idée du problème ?

Note : il y a aussi un autre petit bug d'affichage qui arrive, lui, à la fois dans Netscape et Firefox (pas dans IE). C'est qu'il y a une marge blanche en haut de la page (j'ai réglé mes marges à 0 pour la balise body dans la feuille de style externe et dans le corps de la page mais ça ne change rien). C'est moins grave mais c'est moche quand même.

Modifié 11 Février 2006 par ollvin

[drakulls]

salut,

as-yu précisé dans ton css background:transparent; pour ta div ?

[Morgan_R]

Salut,

Il me semble que comme tes deux éléments sont des float, ils sortent du flux et n'influençent pas la hauteur de ton div "global". Une solution possible serait de définir le contenu autrement qu'en flottant.

Modifié 11 Février 2006 par Morgan_R

[nb_nb]

Bonjour,

à premiere vue le probleme viendrait effectivement du positionnement flottant qui fait dotir tes div du flux (cf. reponse precedente).

Si c'est le cas, en plaçant un div, avec la proprieté clear à both, juste apres le div gauche et le div "central" devrait regler ton soucis.

[ollvin]

Désolé de ne pas avoir répondu plus tôt, je n'ai pas allumé mon pc ces derniers jours, j'étais malade.

La div avec la propriété clear:both a bien marché, merci.

En passant, j'avais déjà entendu parler de cette propriété mais je n'ai jamais vraiment compris de quoi il s'agissait... pourriez-vous m'éclairer sur le processus théorique ?

Sinon, il y a toujours ma marge en haut de page sur Firefox et Netscape... une idée ?

[Monique]

Bonjour,

La série d'articles sur Openweb t'aidera à comprendre les principes du positionnement des blocs, le 2ème traite des blocs flottants : Initiation au positionnement CSS : 2.position float

En résumé

Postionnement naturel, dans le flux

- les blocs s'affichent verticalement de haut en bas, horizontalement selon l'espace disponible

- on utlise les marges pour modifier la position entre des éléments

- le positionnement relatif laisse les éléments dans le flux, il permet de décaler un bloc par rapport à un autre (pas facile à utiliser, souvent source de chevauchement)

Positionnement absolu

- les blocs ne font pas partie du flux, leur positionnement ne dépend pas de celui des éléments qui l'entourent

- ces blocs peuvent être fixés

Positionnement float

- les blocs ne font pas partie du flux mais sont dépendants des autres éléments flottants

- le résultat n'est pas toujours facile à maîtriser quand il y a plusieurs éléments flottants

- les problèmes de débordements peuvent être résolus par l'utilisation de la propriété clear (on parle de bloc spacer)

A lire aussi :

- Comprendre le positionnement des balises en CSS

- Float, clear et contextes de formatage