Div à 5px du bord top et bottom

**Deallyra** · 04/06/2007, 11h56

Bonjour,

Je voulais savoir comment je pouvais transcrire ça en JS pour que celà puisse fonctionner sous IE6...

Code :

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

1
2
3
4
5
6
7
8
9
 
#conteneur
{
  position:absolute;
  top:5px; 
  bottom:5px;
  right:7%;
  left:7%;
}

Merci

**SpaceFrog** · 04/06/2007, 12h05

heu déja en css je ne pense pas que cemla fonctionne si ?
top et bottom sont contradictoires non ?
il risque de ne prendre que le dernier ...

quel est l'effet recherché ?

**Deallyra** · 04/06/2007, 12h07

Ca marche bien... Mon conteneur est bien placé sous MF...
5px des bords supérieurs et inférieurs il n'y a pas de problème...

En fait, je cherche à ce que mon conteneur reste à la même position (7% des bords gauche et droit et 5px des bord supérieurs et inférieurs) quelque soit la taille de l'écran.

**SpaceFrog** · 04/06/2007, 13h46

???
de mon coté le il se place en haut 5 px et à 7% du bord gauche .... et c'est tout !

il va falloir calculer la hauteur et la largeur à partir de celles de la fenetre ...

**Bisûnûrs** · 04/06/2007, 13h56

C'est un problème de layout d'IE, il attend à ce que tu lui donnes une hauteur et une largeur.

Tu peux palier ce problème en donnant une largeur à 86% à ton conteneur (100-7%*2) et en ajustant la hauteur seulement pour IE en Javascript.

Voilà ce qui fonctionne pour les deux navigateurs :

Code css :

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

1
2
3
4
5
6
7
8
9
#conteneur{
   position:absolute;
   top:5px;
   bottom:5px;
   left:7%;
   right:7%;
   background:red;
   width:86%;
}

Code :

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

1
2
3
4
5
function fixIE(){
   if(document.all){
      document.getElementById('conteneur').style.height = document.documentElement.clientHeight - 10 + "px";
   }
}

Code html :

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

1
2
3
<body onload="fixIE()">
   <div id="conteneur"></div>
</body>

Il faut en plus de ça que IE soit en mode standard et non en mode quirks, donc que tu renseignes un DOCTYPE valide et complet.

Dernière chose, si tu veux que ton div conteneur suive le comportement voulu au redimensionnement de la fenêtre sur IE, tu dois lancer la fonction fixIE() sur le onresize du body.

**Deallyra** · 04/06/2007, 14h14

waouh... c'est impec...
Merci Bisûnûrs...

Div à 5px du bord top et bottom

JavaScript

Discussions similaires

Partager

Partager