28173 sujets

CSS et mise en forme, CSS3

[Résolu]Mise en page de trois colonnes avec float

D'abord salut à tout le monde. Après une semaine de lecture sur ce site je me suis inscris sur le forum aujourd'hui.

Voici mon problème. J'essaye de faire une mise en page avec colonnes entre la "tête" et le "pied" de page à l'aide de l'élément float.

Sous firefox et opera ça marche comme je veux, mais sous IE7 le menu_droite se place en dessous du menu_gauche et corps (block du centre).

La taille de mes block sont définis en % et em. Selon mes calcules 20% (menu gauche + 60% (corps - centre) + 20% (menu droite) = 100% (taille body). Donc ces trois colonnes devraient entrer sur la même ligne. Si je baisse la largeurde 1% pour faire entrer les trois colonnes sur la même ligne dans IE 7, il y a de l'éspace vide qui se crée dans opera et firefox.

Voici les codes:

Xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
	<link rel="stylesheet" media="screen" type="text/css" title="Design" href="test.css" />
    <title>Une page de test</title>
  </head>
  
<body>

  <div class="tete">
  </div>

  <div class="menus_gauche">
  </div>

  <div class="corps">
  </div>

  <div class="menus_droite">
  </div>

  <div class="pied">
  </div>

</body>
</html>


CSS

body
{
 margin: 0 auto;
 padding: 0 auto;
}

.tete
{
 background-color: #fbfbe3;
 height: 5em;
 margin: 0 auto;
}

.menus_gauche
{
 background-color: #dfedff;
 width: 20%;
 height: 20em;
 float: left;
}

.menus_droite
{
 background-color: #bfffcf;
 width: 20%;
 height: 20em;
 float: left;
}

.corps
{
 background-color: #ffe6ed;
 height: 20em;
 width: 60%;
 float: left;
 margin: 0;
}

.pied
{
 background-color: #beb5f1;
 height: 2em;
 clear: both;
}


Merci d'avance pour votre aide.
Modifié par sedboy (20 Mar 2007 - 00:17)
Bonjour,
Je viens de lire un article sur ce genre de problèmes : IE interprete differement la taille d'un div et y inclut la marge et le padding ..
http://www.programmersheaven.com/2/Internet-Explorer-Css-Issues
Tu peux contourner le problème en ecrivant des règles spécifiques pour IE et pour les autres browsers . En utilisant la notion de pere/enfant, que IE ne comprend pas ça devrait marcher: la premiere regle s'applique à IE , la deuxieme n'est pas interprétée..
ex:
.box{
width: 30em;
}

body>div .box{
width: 40em;
}
Hello,
bintjes a écrit :
Je viens de lire un article sur ce genre de problèmes : IE interprete differement la taille d'un div et y inclut la marge et le padding ..

Pas du tout, en tout cas dans ses dernières versions, si le doctype est correctement spécifié (c'est expliqué dans la FAQ).
bintjes a écrit :
Bonjour,
Je viens de lire un article sur ce genre de problèmes : IE interprete differement la taille d'un div et y inclut la marge et le padding ..
http://www.programmersheaven.com/2/Internet-Explorer-Css-Issues
Tu peux contourner le problème en ecrivant des règles spécifiques pour IE et pour les autres browsers . En utilisant la notion de pere/enfant, que IE ne comprend pas ça devrait marcher: la premiere regle s'applique à IE , la deuxieme n'est pas interprétée..
ex:
.box{
width: 30em;
}

body>div .box{
width: 40em;
}


Merci pour ta réponse,

Mais j'ai remis à zéro tout les marges intérieurs et extérieurs avec le sélecteur universel 
* {padding:0; margin:0;}
.

J'ai essayé ce que tu as dit mais ça ne marche pas non plus, IE 7 prend en considération la deuxième régle aussi.

Pour faciliter la compréhension de mon problème j'ai fais des copies d'écrans.

La vue sous firefox:
http://img393.imageshack.us/img393/1422/firefoxmu5.th.png

La vue sous IE 7:

http://img400.imageshack.us/img400/561/ie7hg8.th.png


Je rappelle que les largeurs des block sont définis en % et sont de 20% + 60% +20%.
PatrickDuSud a écrit :
Tu pourrais essayer de passer tes 20% à 15 par exemple pour voir si cela vient de chevauchements de blocs?

Patrick


Oui, j'ai essayé et quand je baisse la valeur d'une des blocs ils s'alignent tous sur la même ligne mais il y a une espase vide qui se crée à droite. Donc cela vient de chevauchement des blocs.

Thomas D. a écrit :
Salut,

C'est un problème d'arrondi au moment du passage de la valeur en pourcentage aux pixels : Histoire de pourcentages et de calcul arrondi, sur le blog Smiley cligne


Je viens de lire l'article. Mais la tailles de mes blocs sont pairs, sans chiffres virgules (20% + 60% + 20%).


Là j'ai trouvé une manière d'afficher cette mise en page pareil dans firefox, opera et IE 7 Smiley ravi . Je ne crois pas être le seule à rencontrer ce problème, alors ma solution peut aider d'autres aussi sûrement.

En premier voici le code:

Xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
	<link rel="stylesheet" media="screen" type="text/css" title="Design" href="test.css" />
    <title>Une page de test</title>
  </head>
  
<body>

  <div class="tete">
    <p>tete</p>
  </div>

  <div class="menus_gauche">
    <p>menu  gauche</p>
  </div>

  <div class="menus_droite">
    <p>menu droite</p>
  </div>
  
  <div class="corps">
    <p>Le contenu</p>
  </div>

  <div class="pied">
    <p>pied</p>
  </div>

</body>
</html>


Css

body
{
 margin: 0;
 padding: 0;
 border: 0;
}

.tete
{
 background-color: #fbfbe3;
 height: 5em;
 
 margin: 0 auto;
}

.menus_gauche
{
 background-color: #dfedff;
 width: 20%;
 height: 15em;
 border: 0;
 
 float: left;
}

.menus_droite
{
 background-color: #bfffcf;
 width: 20%;
 height: 15em;
 border: 0;
 
 float: right;
}

.corps
{
 background-color: #ffe6ed;
 height: 10em;
 border: 0;

 margin: 0 20%;
}


.pied
{
 background-color: #beb5f1;
 height: 3em;
 clear: both;
}

p
{
 margin: 0 auto;
 text-align: center;
 padding: 1em 0;
}



Comme vous pouvez le voir dans le code, menu_gauche "float" à gauche et menu_droite "float" à droite, et ces deux blocs ont une largeur de 20%. Et puis le centre est placé au milieu avec une marge de 20% dans les côtés. Sa largeur n'est pas définie et s'adapte à la page à l'aide de margin.



Not: Comment on met "sujet résolu" ?
Modifié par sedboy (19 Mar 2007 - 20:12)
Salut

sedboy a écrit :
Je viens de lire l'article. Mais la tailles de mes blocs sont pairs, sans chiffres virgules (20% + 60% + 20%)
Ce n'est pas la question Smiley cligne

L'écran d'un ordinateur ne peut pas proposer un affichage continu, il est composé de pixels. Quand tu indiques une largeur de 100% au navigateur, celui-ci doit convertir ce pourcentage en un certain nombre de pixels.

Quoiqu'il arrive, quand tu redimensionnes la fenêtre, il va bien finir par arriver un moment où le nombre de pixels total sur la largeur de la fenêtre ne sera pas divisible par 5, d'où le problème d'arrondi et le retour à la ligne ...

<edit> pour classer le sujet, c'est par ici
Modifié par Thomas D. (19 Mar 2007 - 22:19)
Juste un conseil en passant : si on évite de faire flotter tous les blocs censés tenir sur une même ligne, on obtient quelque chose de plus souple et de plus adaptable aux petites erreurs des navigateurs.

C'est d'ailleurs la différence principale entre la solution que sedboy a trouvé et son premier jet : un des trois blocs n'est plus flottant.

Pour information, on aurait pu garder le même ordre pour les éléments HTML (colonne de gauche, contenu central, puis colonne de droite), en faisant flotter à gauche les deux premiers et en donnant une marge à gauche au troisième élément (non flottant).
(Quoique, dans ce genre de cas l'utilisation d'un contexte de formatage plutôt que d'une marge à gauche serait sans doute préférable, même si ça demande un petit correctif pour IE6.)
Sujet clos
Aller à