internet explorer / mozilla

**Bibouda** · 10/01/2006, 14h09

Bonjour , pourquoi ce code fonctionne parfaitement sous mozilla firefox et ne fonctionne pas sous IE ( le menu est décalé à droite en plein dans la page ) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
#menu {
height: 510px;
border: 1px solid black;
border-top-color: #fff;
width: 150px;
position: absolute;
}
 
#page {
margin-left: 149px;
height: 510px;
width: 705px;
background: #fff;
border: 1px solid black;
border-top-color: #fff;
}

merci

PS : ces 2 div sont contenus dans un div faisant 855px de large pour 510 de haut .

**glloq8** · 10/01/2006, 14h44

ils sont en float:left ??

**Bibouda** · 10/01/2006, 15h21

non , le div qui contient ces 2 div est celui ci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
#container {
height: 510px;
width: 855px;
border: none;
margin-left: auto;
margin-right: auto;
}

donc avec mozilla le menu se met parfaitement à gauche et le div page se met juste à coté , l'affichage est nikel , mais sous IE , le div menu empiète carrément sur le div page...
Aucun n'est en float left , le menu a une position absolue et une largeur de 150px , il se met naturellement à gauche , et pour le div page j'ai mis une marge de 150px pour qu'il se mette juste à coté . En fait au début j'avais mis un float right dans le div page et çà marchait avec IE et mozilla mais j'avais une petite imperfection de 1px ou 2 qui m'énervait grandement , les 2 div faisaient 854px de large au lieu de 855 et çà faisait con avec le reste de la page...

**SpaceFrog** · 10/01/2006, 15h28

un classique à cause du boxtype ...

http://www.positioniseverything.net/explorer/expandingboxbug.html

**Bibouda** · 10/01/2006, 19h28

désolé j'ai pas le niveau en anglais necessaire pour comprendre l'article et corriger mon soucis

**goran kajfes** · 11/01/2006, 00h32

Salut!

Envoyé par Bibouda

Aucun n'est en float left , le menu a une position absolue et une largeur de 150px , il se met naturellement à gauche

Naturellement à gauche? Pour qu'il se mette à gauche, il faut lui préciser qu'il doit se mettre à gauche, sinon il ne sait pas où se placer et tu es à la merci des décisions des navigateurs. En plus tu n'es pas en position absolue. Pour cela tu aurais du préciser les coordonnées du coin gauche de ton menu après "position:absolute;":
top:nbr_de_pixels px;
left:nbr_de_pixels px;

Je te conseille plutôt d'utiliser des positions relatives pour les blocs "menu" et "page" grâce à "float:left;". Dans ce cas la première portion de texte que tu mettras dans la page html, à savoir <div class="menu">texte</div> ou <div class="page">texte</div> s'affichera sur la gauche du navigateur. La seconde portion du texte s'affichera dans la gauche de l'espace libre (c'est à dire à droite de la première portion du texte écrite).

Cela donne:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
#container {
height: 510px;
width: 870px;
border: none;
margin-left: auto;
margin-right: auto;
} 
#menu {
float:left;
height: 510px;
border: 1px solid black;
border-top-color: #ffffff;
width: 150px;
}
#page {
float:left;
padding-left: 10px;
height: 510px;
width: 705px;
background-color: #ffffff;
border: 1px solid black;
border-top-color: #ffffff;
border-left-color: #ffffff;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<html>
<body>
 
<div class="container">
<div class="menu">
menu
</div>
 
 
<div class="page">
contenu de la page
</div>
 
</div>
</body>
</html>

J'ai testé et cela fonctionne sous firefox et IE.

Tu vois que la marge de "page" n'est plus indispensable avec un positionnement relatif avec des floats.
Padding représente l'espace entre le contenu du bloc et sa bordure.
A noter que la taille (width) du conteneur doit être strictement supérieure à la somme des tailles des blocs qui la composent (prévoir 5 à 10 px d'écart).
"border-left-color: #ffffff;" sert à ne pas doubler la taille de l'épaisseur de la bordure centrale.

**Bibouda** · 11/01/2006, 14h35

j'ai testé ton code et il ne marche pas , et je persiste et signe , mon div menu est bien en position absolue , ta proposition de mettre le menu en float left + la apge en float left ne marche pas , le div page se met en dessous du div menu et je vois pas l'intérêt de mettre un padding , le menu et la page font précisément en pixel la largeur de leur div conteneur , si je mets un padding de 10 çà dépasse...

**goran kajfes** · 11/01/2006, 15h14

Il y a une erreur sur le code que je t'ai filé car les # doivent être associés à des id. Pour ma part j'ai testé le code avec des class et des ".{...}" et cela marchait parfaitement.

Envoyé par Bibouda

le div page se met en dessous du div menu et je vois pas l'intérêt de mettre un padding , le menu et la page font précisément en pixel la largeur de leur div conteneur.

J'ai rajouté un padding parce que le texte de la page était collé à la bordure et que cela était inesthétique. Libre à toi de la supprimer. La page se met en dessous du menu si la taille du conteneur est trop faible. Pour na pas avoir ce problème donne une largeur suffisante à ton conteneur. De plus je t'ai déjà dit que la taille "menu + page" doit être strictement supérieure à celle du conteneur. Il semblerait qu'il faille rajouter la taille du padding, à celles des width.

internet explorer / mozilla

HTML

Discussions similaires

Partager

Partager