28173 sujets

CSS et mise en forme, CSS3

Pb de rendu de gabarit "intéressant" avec IE

Je souhaite utiliser un gabarit 1 header + 2 colonnes + 1 footer, le tout occupant 100% de la hauteur visible de l'écran.
J'utilise :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>

<style>

html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}
p {
margin:0;
padding:0;
}
#g{
float:left;
width:50%;
height:90%;
background-color:#FFCC66;
}
#d{
float:left;
width:50%;
height:90%;
background-color:#3366FF;

}
#header {
background-color:#FFFF00;
height:5%;
width:100%;
}

#footer
{
clear:both;
width:100%;
background-color:#663333;
min-height:5%;
}

</style>

</head>

<body>

<div id="header">
la barre d'outils
</div>

<div id="g">
<p>bloc gauche</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

<div id="d">
<p>bloc droit</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

<div id="footer">
<p>bloc droit</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

</body>
</html>

Le rendu sous FireFox est OK à 100%. Par contre sous IE le bloc id="d" flotte sous le bloc id="g". Cela ne se passe que quand IE est affiché dans une fenêtre en plein écran, dès que l'on réduit un tant soit peu la taille de la fenêtre le problème disparaît.
Si je change pour #d with:50% en width:49.9% le problème ne se pose plus mais j'ai une ligne blanche de 0.01 % (normal...) quelque soit la taille de la fenêtre (plein écran ou pas).
J'ai essayé diverses solutions de padding et margin à 0, mais je n'arrive pas à faire mieux pour l'instant...
Si qq'un à une idée ou un début de piste je prend !!
Smiley biggrin
Modifié par PiR2 (14 Oct 2006 - 18:12)
Administrateur
Bonjour à toi aussi et bienvenue parmi nous.

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Désolé je suis effectivement passé un peu vite dessus, je me flagellerai donc 10 fois ce soir. Smiley cligne
Et je dois bien reconnaître que le post est bien plus lisible comme ça........
J'ai essayé de modifier mon code en ajoutant une div #container englobant mes 2 div colonnes #g et #d :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>

<style>

html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}

p {
margin:0;
padding:0;
}

#container {
width:100%;
height:90%;
padding:0;
margin:0;
}

#g{
float:left;
width:50%;
height:100%;
background-color:#FFCC66;
}

#d{
float:left;
width:50%;
height:100%;
background-color:#3366FF;
}

#header {
background-color:#FFFF00;
height:5%;
width:100%;
}

#footer
{

clear:both;
width:100%;
background-color:#663333;
min-height:5%;
}

</style>

</head>

<body>

<div id="header">
la barre d'outils
</div>

<div id="container">
<div id="g">
<p>bloc gauche</p>
<p> </p>
<p> </p>
</div>

<div id="d">
<p>bloc droit</p>
<p> </p>
<p> </p>
</div>
</div>

<div id="footer">
<p>bloc droit</p>
<p> </p>
<p> </p>
</div>

</body>
</html>


Et d'y ajouter la déclaration doctype mais pas de changement notable sauf qu'IE en plein écran fait toujours flotter la colonne de droite et qu'en fenêtre réduite le flottement sous le bloc gauche du bloc droit intervient "à partir d'une certaine largeur", pourtant il reste de la place en largeur !! Smiley bawling
Je n'y comprend plus rien !! Smiley biggol
Il y a de la place mais ça flotte qd même !! Je réduit un poil la largeur (0.01 % !!) ça fonctionne...
Qu'est-ce que j'ai oublié ??
Re bonjour... j'avais répondu là
J'aurais du répondre ici, avec un lien sur le sujet clos là-bas
J'ai mis mon message en Resolu (et j'ai du raccourcir le titre pour y arriver :o) ).
De toute façon il est mal placé, mon message, ce n'est même pas une question...
(il doit y avoir un meilleur endroit pour ce genre de digression?)
Si tu attends toujours pour l'essai sous IE7, tu peux reposer la question ici ?
Modifié par gonga (28 Oct 2006 - 11:54)
Sujet clos
Aller à