[CSS] Largeur de cadre non respectée par IE [Résolu]

IE n'applique pas les 100 % de largeur d'un cadre, comme résoudre le pb ?

<div id="haut" style="position:absolute; top:0px; left:0px; width:100%; height:120px; background-color:#000000;"></div>

Sous IE le cadre ne va pas jusqu'au bout, sous FF si.

[CSS] Largeur de cadre non respectée par IE [Résolu] Coin_ie

[CSS] Largeur de cadre non respectée par IE [Résolu] Coin_ie

Merci.

J'ai eu des problèmes d'affichage en largeur et en hauteur, que j'ai résolus en tâtonnant un peu.

Il faudrait que je revoie mes codes mais je suis à peu près sûre de ne pas avoir utilisé width 100 % pour mon site.

Si je me souviens bien : j'ai utilisé une largeur totale de 750 pixels ou 760 et j'ai calculé pour que le menu de gauche et le cadre principal totalisent ces 750 ou 760 pixels.

Donc, au lieu de donner comme instruction une largeur automatique, j'en ai donné une fixe comme pour height.

Cette largeur de 750 ou 760 pixels devrait permettre d'afficher en intégralité la largeur de page quelle que soit la résolution de l'écran à partir de 800 x 600 et avec n'importe quel navigateur.

Maintenant, mon co-admin qui est plus calé que moi en la matière aura peut-être une solution plus orthodoxe.

Pour la longueur du fond de page, je n'ai pas non plus utilisé une solution très orthodoxe : j'ai simplement mis une autre image ajustée d'une page à l'autre et je dois sans doute mériter le fouet pour ça.

Co-administrateur Nombre de messages : 117 Date d'inscription : 14/06/2005

Salut KiWin. C'est dommage que tu n'as pas posté un plan de ton code. Il est important de savoir si cette balise se trouve entre <body> et </body> où entre une autre div, etc.

Sinon, imaginons que tu as le code suivant :

Code:: <html>
<head>
   <title>Mettre une largeur en 100% sur IE</title>
   <style type="text/css" media="screen">
      #tete
      {
         width : 100% ;
         height : 100px ;
         border : 2px solid black ;
      }
   </style>
</head>
<body>
   <div id="tete">Essai</div>
</body>
</html>

On remarque qu'il y a en effet un problème, il y a toujours un espace. Sachant que le body contient le div, on peut supposer que le problème vient d'une des propriétés de BODY instaurées par défaut avec des valeurs par défauts différentes selon les navigateur.

Moi, perso, si je m'interesse à la propriété padding de body, tout rentre dans l'ordre :

Code:: <html>
<head>
   <title>Mettre une largeur en 100% sur IE</title>
   <style type="text/css" media="screen">
      body
      {
         padding : 0px ;
         margin : 0px ;
      }
      #tete
      {
         width : 100% ;
         height : 100px ;
         border : 2px solid black ;
      }
   </style>
</head>
<body>
   <div id="tete">Essai</div>
</body>
</html>

[HORS SUJET]
Je vais affirmer ici mon point de vue quand à l'utilisation de noms comme "haut", "bas", "menu droite", etc, qui énerve beaucoup de monde.

Le principe actuel et que conseil le W3C, c'est de séparer le fond de la forme... jusque là Ok. Cette séparation est expliqué par un formatage précis du document web avec des noms qui caractérise chacune des parties qui le compose...

Je veux dire par là, que "menu_gauche" par exemple, semble assez innaproprié, mais ce n'est que mon avis : menu1 est plus interessant dans le cas où on veut appliquer un alignement à droite... parce que franchement, si on voit ça dans le code source ça fait un peu bizare :

#menu_gauche
{
float : right ; // fait "floter" à droite.
}

Pareil pour la décomposition d'une page. Personellement j'opte pour les identificateurs suivants : tête, tronc, queue. S'il y est censé avoir des barre à gauche où à droite... je mets "bras1", "bras2" et surtout pas "bras_gauche", "bras_droite".

Enfin, je trouve que c'est beaucoup plus interessant. Un nom est fait pour désigner la chose, et non pour exposer en même temps une partie de sa mise en forme.
[/HORS SUJET]

Ramsès II a écrit:: Si je me souviens bien : j'ai utilisé une largeur totale de 750 pixels ou 760 et j'ai calculé pour que le menu de gauche et le cadre principal totalisent ces 750 ou 760 pixels.

Donc, au lieu de donner comme instruction une largeur automatique, j'en ai donné une fixe comme pour height.

Cette largeur de 750 ou 760 pixels devrait permettre d'afficher en intégralité la largeur de page quelle que soit la résolution de l'écran à partir de 800 x 600 et avec n'importe quel navigateur.

Merci encore pour ton aide.

Mais je ne suis pas chaud pour imposer une largeur, car auquel cas soit c'est trop grand soit c'est trop court par exemple en 1024x768 il y a deux bandes vides de part et d'autre de ce forum et je ne veux pas de ça cette place perdue ça m'énerve... faut donc que ça puisse s'ajuster.

Salut NiRaDo,

NiRaDo a écrit:

Salut KiWin. C'est dommage que tu n'as pas posté un plan de ton code. Il est important de savoir si cette balise se trouve entre <body> et </body> où entre une autre div, etc.

Sinon, imaginons que tu as le code suivant :

Code:: <html>
<head>
   <title>Mettre une largeur en 100% sur IE</title>
   <style type="text/css" media="screen">
      #tete
      {
         width : 100% ;
         height : 100px ;
         border : 2px solid black ;
      }
   </style>
</head>
<body>
   <div id="tete">Essai</div>
</body>
</html>

Tu imagine bien à ceci près que le div est vide Wink

NiRaDo a écrit:

Moi, perso, si je m'interesse à la propriété padding de body, tout rentre dans l'ordre :

Code:: <html>
<head>
   <title>Mettre une largeur en 100% sur IE</title>
   <style type="text/css" media="screen">
      body
      {
         padding : 0px ;
         margin : 0px ;
      }
      #tete
      {
         width : 100% ;
         height : 100px ;
         border : 2px solid black ;
      }
   </style>
</head>
<body>
   <div id="tete">Essai</div>
</body>
</html>

Ben écoute j'ai eu le même réflèxe que toi, je me suis d'abord intéressé à l'espace intérieur du body, mais j'ai du fauter qqpart je n'avais pas obtenu le bon résultat...

Avec ton code ç'est bien ça, à ce ci près que FF affiche l'ascenseur horizontal, à cause de la bordure du cadre, ça démonter bien la différence d'interpréation des deux navigateurs (pour IE, bordure à l'intérieure, pour FF elle est à l'extérieur) mais ça ne me pose pas de pb je n'ai pas besoin de bordure.

Merci bien à toi Wink

Et en ce qui concerne la convention de nommage des cadres, je dirai que c'est à voir selon le cas, ds mon cas il va se trouver en dessous du logo et de la bannière, donc je ne le vois pas ailleurs qu'en haut, bien qu'il ne va pas être déclaré en haut, tu me suis ?? Very Happy

Je comprends ton souci de ne pas laisser d'espace vide mais en ayant procédé avec une largeur fixe, j'étais sûre que tout s'affiche sur tous les écrans et avec tous les navigateurs.

Il faudrait tout de même que je réécrive certaines choses vu que le code est assez brouillon.

Pas le courage pour le moment.