Aller au contenu

CSS : menu et contenu


Fennec

Sujets conseillés

Salutations,

J'ai un problème sur http://raydium.cqfd-corp.org/ : Internet Explorer m'affiche le contenu (id=contenu) après le menu (class=menu_global), alors que la présentation souhaitée est celle donnée par Mozilla, c'est à dire le contenu à droite du menu (juste sous le bandeau jaune, class=topbanner).

J'ai fouillé un peu, fait quelques tests, mais je suis encore très loin d'être à l'aise avec CSS, donc je galère un peu.

La CSS associée : http://raydium.cqfd-corp.org/style.css

Lien vers le commentaire
Partager sur d’autres sites

J'ai utilisé un "position: absolute; left:5px; top: 60px;" pour ma classe "countenu", mais je ne sais pas si c'est une manière correcte de résoudre le problème.

Lien vers le commentaire
Partager sur d’autres sites

Merci pour ta réponse.

Le "gain" avec ta méthode est-il sensible ? Je viens d'essayer, mais étant donné que j'utilise en fait 3 menus (francais, anglais, validations W3C), il me fait 3 boites flottantes avec des largeurs différentes.

Lien vers le commentaire
Partager sur d’autres sites

Un élément positionné en absolu sort totalement du flux : il n'interagit plus avec rien. En conséquence, il passe glorieusement au travers de ton contenu, en écrivant pas dessus si jamais tu as mal compté tes dimensions.

Un élément positionné en float ne se comporte pas ainsi : il reste complètement à droite (ou à gauche) de son conteneur, mais le contenu de son parent "glisse" sur lui, l'entourant.

Si tu mets ta colonne de menu en float : left, avec une marge de la partie centrale égale à la largeur de cette colonne de menu, tu donnes l'illusion d'une colonne. La marge évite que le contenu de la partie centrale revienne sous la colonne une fois la finde celle-ci atteinte.

Dans ton cas, tu pourrais au choix :

- faire des 3 éléments dont tu parles des sous-parties d'un élément englobant, qui aurait le logo en haut comme fond, un padding-top de la taille du logo. En mettant l'élément parent en float : left.

- faire de chacun de ces éléments un flottant, en leur donnant la même largeur à tous, et mettre alors le logo en fond du parent, en background, top, left

Lien vers le commentaire
Partager sur d’autres sites

Posté (modifié)

C'est très clair, merci.

Edit: j'ai modifié la css selon le principe de MarvinLeRouge, et ca a marché du premier coup (Moz/FF, IE & Konqueror). Merci encore.

Modifié par Fennec
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...