28173 sujets

CSS et mise en forme, CSS3

J'ai un menu à gauche et un cadre de texte doit prendre le reste de la largeur de page.

Mon menu a pour css:
.Menu{
  position: absolute;
  width:200px;
  left: 5px; 
}

Mon milieu:
.milieu {
  position:absolute;
  text-align:center;
  margin-left: 230px;
}


Sous FireFox, tout va très bien.
Sous IE6 et 7beta2, je me trouve avec "milieu qui sort de la zone écran". Je dois donc utiliser la scrollbar horizontale qui apparait pour voir la suite de mon texte.

Il semblerait que FireFox fasse:
Affichage menu->marge230px->WidthMilieu=100%-MarginLeft
et que IE fasse:
AffichageMenu->marge230px->WidthMilieu=100%(en oubliant la marge)

Ce qui expliquerait le débordement.

Existe-t-il un moyen de palier à ce bug ?

Merci pour votre aide !
Modifié par Cybergifle (13 May 2006 - 22:17)
Essaie ça:

.Menu{
width:200px;
float:left;
margin-left: 5px;
}

.milieu {
text-align:center;
margin-left: 230px;
}

Modifié par Yasashii (13 May 2006 - 22:04)
Tu parles de contenu qui sort de la fenêtre, mais tu ne donnes pas le balisage concerné : impossible de se faire une idée.

Sans contenu, avec des hauteurs et largeurs spécifiées, ton premier code fonctionne normalement (même si ce n'est pas la meilleure manière de positionner).

On peut avoir une page en ligne, le balisage, ou une image de ce que tu veux obtenir ?
neko a écrit :
(même si ce n'est pas la meilleure manière de positionner).


C'est quoi la meilleure manière ?
Modifié par Cybergifle (13 May 2006 - 22:35)
Et bien, tu peux par exemple laisser le premier élément (le menu ici) dans le flux et le positionner à l'aide des marges.

Petit rappel : "position: absolute" sans indiquer de valeurs à "top/right/bottom/left" (un ou deux de ceux là) ne fait rien - action nulle.

Par contre, on utilise souvent "position: relative" seul sur un élément, pour pouvoir positionner un enfant en absolu par la suite (car la position absolue à besoin d'une référence, d'un parent qui soit positionné ; sinon, cette position se règle par défaut).

Un lien toujours utile : Comprendre le positionnement des balises en CSS. Smiley smile
Modifié par Smiley neko (13 May 2006 - 22:35)
OK merci.

Juste une question:

Position relative ça sert à quoi ? car je pensais que c'était le type utilisé à partir du moment où on avait du Float mais il semblerait que non...
Modifié par Cybergifle (13 May 2006 - 23:52)
Administrateur
Cybergifle a écrit :
Position relative ça sert à quoi ? car je pensais que c'était le type utilisé à partir du moment où on avait du Float mais il semblerait que non...

Le positionnement relatif est une variante du positionnement en flux, qui permet notamment de créer un décalage.
Je t'invite fortement à revoir les principes de positionnements CSS, si jamais tu t'ennuyes ce week-end Smiley smile