Discussion :

[sebhm]

Bonjour,

dans un autre Post, vous m'avez aidé à créer 3 blocs côte à côte, de meme hauteur, c'est à dire 3 colonnes factices car les bordures sont 'simulées' par une image :

Code :

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

1
2
3
4
5
6
7
8
<div id="conteneur">
  <div id="bloc1">BLOC1</div>
  <img id="separ1" src="img/brdc.png" alt="séparation" />
  <div id="bloc2">BLOC2<br />BLOC2</div>
  <img id="separ2" src="img/brdc.png" alt="séparation" />
  <div id="bloc3">BLOC3</div>
  <hr class="antifloat" />
</div>

CSS:

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
div#conteneur {
  position : relative;
  margin : 0;
  padding : 0;
  border : 1px solid black;
}
div#bloc1 {
  margin : 0 ;
  width : 20%;
  float : left;
}
div#bloc2 {
  margin : 0 ;
  float : left;
  width : 22%;
  border : 1px solid black;
}
div#bloc3 {
  margin : 0 ;
  margin-left : 52%;
  border : 1px solid black;
  width : 22%;
}
hr.antifloat {
  visibility : hidden;
	clear : both;
}
 
#separ1 {
  position : absolute;
  top : 0;
  left : 20%;
  width : 4px;
  height : 100%;
  }
#separ2 {
  position : absolute;
  top : 0;
  left : 52%;
  width : 4px;
  height : 100%;
  }

le CLEAR est nécessaire pour que le bloc 'conteneur' ait la bonne hauteur.

je voudrais maintenant centrer verticalement le contenu de chacune de mes colonnes
(la colonne la plus haute ne va pas bouger car c'est elle qui détermine la hauteur de mes autre colonnes, mais je voudrais centrer verticalement le texte qu'il y a dans les 2 autres).

Ce n'est pas évident car mes colonnes n'ont en fait pas la meme hauteur. Si une colonne ne contient qu'une seule ligne, sa hauteur = une ligne.

Pour le constater, il faut modifier le CSS en ajoutant une bordure par exemple autour du bloc 1:

Code :

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

1
2
3
4
5
6
div#bloc1 {
  margin : 0 ;
  width : 20%;
  float : left;
  border : 1px solid red;
}

Donc, je ne pense pas qu'il faille centrer verticalement le contenu de chaque bloc mais plutot centrer verticalement le bloc lui meme dans le 'conteneur'
(je pense mais je peux me tromper...)

j'ai essayé de modifier les propriétés d'affichage de mon bloc 'conteneur' en faisant :

Code :

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

1
2
3
4
5
6
7
8
9
div#conteneur {
  position : relative;
  margin : 0;
  padding : 0;
  border : 1px solid black;
 
  display:table-cell; 
  vertical-align:middle;
}

ce qui aurait du faire basculer le mode d'affichage du bloc conteneur en 'mode Table', ce qui permettrait de centrer verticalement le contenu...
Ca ne marche pas et pire, ca explose mon affichage...


une idée ??

merci

[Macmillenium]

Bonjour,

Inspire toi de ce topic

[sebhm]

OK sous Firefox mais KO sous IE7
(j'ose meme pas imaginer IE6..)

je fais

Code :

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

1
2
3
4
5
<div id="conteneur">
  <div id="bloc1">BLOC1</div>
  <div id="bloc2">BLOC2<br />BLOC2</div>
  <div id="bloc3">BLOC3</div>
</div>

avec le CSS:

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
26
27
28
29
div#conteneur {
  position : relative;
  margin : 0;
  padding : 0;
	border : 1px solid black;
	display:table;
	width : 100%;
}
div#bloc1 {
  margin : 0 ;
  width : 30%;
	display:table-cell;
	border : 1px solid red;
	vertical-align:middle;
}
div#bloc2 {
  margin : 0 ;
  width : 50%;
	display:table-cell;
	border : 1px solid blue;
	vertical-align:middle;
}
div#bloc3 {
  margin : 0 ;
	display:table-cell;
  width : 20%;
	border : 1px solid green;
	vertical-align:middle;
}

Sous IE, les blocs apparaissent les uns au dessous des autres ...??

et si j'applique un float, alors là c'est le marasme.
IE affiche alors les DIV sur la meme ligne... mais rien n'est centré verticalement.
Firefox perd le centrage vertical, et semble calculer différemment les tailles des div .... ??

[Macmillenium]

Et si tu essai :

Code CSS :

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
 
div#bloc1, div#bloc2, div#bloc3 {
	margin : 0 ;
	width : 30%;
        display:-moz-inline-box;
	display:inline-block;
	border : 1px solid red;
	vertical-align:middle;
}
div#bloc2 {
	width : 50%;
	border : 1px solid blue;
}
 
div#bloc3 {
	width : 20%;
	border : 1px solid green;
}

?

[desert]

Ils se mettent l'un en-dessous de l'autre car IE gère pas le display:table-cell.
Mais pour ce que tu demandes, à part utiliser une table, je ne vois pas vraiment de solution.

[Macmillenium]

Ils se mettent l'un en-dessous de l'autre car IE gère pas le display:table-cell.

D'où la proposition du display:inline-block

[sebhm]

Merci pour vos réponses.

(Désolé pour le temps que je mets à répondre mais Orange n'est pas mon ami en ce moment...)

J'ai testé la dernière proposition de Macmillenium : OK sous Firefox (3.0.6) mais KO sous IE7


Pour mieux comprendre, j'ai créé différents fichiers tests.
(j'ai appliqué une bordure de couleur à mes 3 blocs à chaque test pour comprendre ce qu'il se passe)


Test 1
C'est le premier jet; c'est à dire mes 3 colonnes sans centrage vertical.
Les bordures sont 'simulées' par une image.
Le résultat est identique sous IE ou Firefox

Test 2
Application de

Code :

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

1
2
3
4
5
/*Conteneur */
display : table
 
/*3 blocs*/
display : table-cell

C'est parfait sous Firefox mais KO sous IE qui n'y comprend rien


Test 3
ajout de

Code :

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

float : left;

pour voir si IE s'en sort mieux.
Ben en fait, on revient au point de départ pour IE : 3 colonnes OK mais pas de centrage vertical
et KO sur Firefox qui semble perdu et qui modifie la longueur de chacun des blocs (ils n'occupent plus toute la largeur du conteneur à eux 3 ... ???)
(de plus, le "Float" casse le centrage vertical)

Test 4
derniere proposition de MacMillenium :
Le css des 3 blocs devient

Code :

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

1
2
display:-moz-inline-box;
display:inline-block;

- je ne connais pas du tout le '-moz-inline-box'
- le 'display:inline-block' n'ecrase-t-il pas le 'display:-moz-inline-box' ???
Parfait sous Firefox mais KO sous IE


et encore, j'ai pas testé sous IE6...

[desert]

display:-moz-inline-box, c'est pour FF1 et FF2 car ils ne reconnaissent pas la propriété display:inline-block seulement reconnu sous la version 3.
Pour IE, tu peux mettre ce commentaire conditionnel dans la balise head :

Code html :

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

1
2
3
4
5
6
7
8
<!--[if IE]>
    <style type="text/css">
        div#bloc1, div#bloc2, div#bloc3 {
            display: inline;
            zoom: 1;
        }
    </style>
<![endif]-->

D'après ce que j'ai lu, cela simule sur IE à peu de chose près le même comportement qu'un display:inline-block sous FF.

[Macmillenium]

D'après ce que j'ai lu, cela simule sur IE à peu de chose près le même comportement qu'un display:inline-block sous FF.

+1
La propriété zoom confère à un élément ce qu'on appelle un layout , ce qui corrige certains bugs d'affichage sous IE (à savoir que le concept de haslayout est disparu dans IE8).

[sebhm]

OK merci beaucoup.

L'option choisie (pour l'instant) est donc le Test N°2

Code :

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

1
2
3
4
5
6
7
8
#conteneur {
  display : table;
}
 
#bloc1, #bloc2, #bloc3 {
  display : table-cell; 
  vertical-align : middle
}

+ ajout d'un commentaire conditionnel qui ressemble à :

Code :

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

1
2
3
4
5
6
7
8
<!--[if lte IE 7]>
    <style type="text/css">
        div#bloc1, div#bloc2, div#bloc3 {
            display: inline;
            zoom: 1;
        }
    </style>
<![endif]-->

ainsi, IE ( ) affichera à peu pres correctement les blocs (en esperant qu'il n'y ait pas de nouvelles blagues sur IE8... c'est pas gagné)

et les navigateurs respectant les normes devraient bien s'en sortir...


Merci pour votre aide

[sebhm]

manque un truc....

la bordure n'est pas bien gérée :

Pour les 'non IE', donc respectant les normes (avec le 'display : table; ...'), on pourrait simplement afficher la bordure des blocs bloc1, bloc2, bloc3 et ca irait tres bien.
mais sous IE7, c'est notre commentaire conditionnel qui gere le bon affichage, et on voit bien alors que les blocs les plus petits n'occupent pas toute la hauteur. Donc si j'affiche leur bordure, ca donne n'importe quoi...

Je dois donc revenir, simplement pour les bordures, à ma feinte de bordure avec une image.

J'ai donc le code suivant :

Code :

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

1
2
3
4
5
6
7
  <div id="conteneur">
    <div id="bloc1">BLOC1</div>
    <img id="separ1" src="brdc.png" alt="séparation" />
    <div id="bloc2">BLOC2<br />BLOC2 BLOC2 BLOC2 <br />BLOC2 BLOC2 BLOC2 BLOC2 BLOC2 BLOC2 </div>
    <img id="separ2" src="brdc.png" alt="séparation" />
    <div id="bloc3">BLOC3</div>
  </div>

avec le CSS :

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
div#conteneur {
      position : relative;
      margin : 0;
      padding : 0;
    	border : 1px solid black;
    	display:table;
    	width : 100%;
    }
    div#bloc1 {
      margin : 0 ;
      width : 30%;
    	display:table-cell;
    	vertical-align:middle;
    	border : 1px solid yellow;
    }
    div#bloc2 {
      margin : 0 ;
      width : 49%;
    	display:table-cell;
    	vertical-align:middle;
    	border : 1px solid red;
    }
    div#bloc3 {
      margin : 0 ;
    	display:table-cell;
      width : 20%;
    	vertical-align:middle;
    	border : 1px solid green;
    }
    #separ1 {
      position : absolute;
      top : 0;
      left : 29%;
      width : 4px;
      height : 100%;
      }
    #separ2 {
      position : absolute;
      top : 0;
      left : 78%;
      width : 4px;
      height : 100%;
      }  	</style>
 
<!--[if lte IE 7]>
    <style type="text/css">
        div#bloc1, div#bloc2, div#bloc3 {
            display: inline;
            zoom: 1;
        }
    </style>
<![endif]-->

Bug !!! ????

ca donne ceci
=> Mon image positionnée en absolute ne se réfère pas au conteneur.... sûrement parce que celui ci a pris un 'display : table;' qui le perturbe...


Solution :
ajouter un nouveau conteneur au dessus qui n'aura pas un 'display : table;'.
Ce qui donne ceci


les joies de la compatibilité ...

[sebhm]

ah ben IE semble moyen d'accord....

en fait, le conteneur qui est en

Code :

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

display:table;

ne doit pas être en

Code :

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

position : relative;

me demandez pas pourquoi mais ca perturbe IE (7)...

donc, en l'enlevant, ca donne ceci
(exactement la meme chose que la version précédente pour Firefox.
Mais beaucoup mieux sous IE !!)