bonjour,
?? hmmm , le vertical-align: top , middle ou bottom ; est assigné par le css
, il suffit que tu indique la valeur que tu veut ...
( a propos quelque valeurs pour le vertical-align:
http://www.laltruiste.com/document.php?url=http://www.laltruiste.com/courscss/texteverticalalign.html )
et reprendre le cas de IE !
LEs 2 elements côte à cote doivent recevoir un vertical-align de même
valeur pour que cela reste coherent visuellement .
Oui mais comment faire pour qu'un text-court s'aligne en haut et que
l'image s'aligne au milieu si le texte s'aggrandi ? si je ne peut pas specifier des valeurs differentes ! .
On peut alors déterminé une hauteur minimale a ce block (passé en ligne
et layout activé ici dans l'exemple).Le texte contenu dans ce block
commencera a s'afficher des "l'ouverture de la balise " (<div>texte ....).
En reprenant ton image d'exemple je prends alors 100px de hauteur
minimale (l'ideale serait de prendre en reference la hauteur de chaque
image pour chaque test , en pratique un compromis acceptable serait de
prendre la moins haute de la page en reference pour ne pas trop "cassé"
l'aspect visuel .(je ne pense pas que tu souhaite affiché des images tres
hautes ).
Maintenant je propose alors un min-height a IE7 dans le css commun ,
puis un height dans le css dédié a IE6 et inferieurs.
Le min-height est sans effets sur un element en display:table-cell;
Il n'est donc utile que pour IE7 .
Ce qui me donne alors en page de test :
<!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>
<title>XHTML 1.0 Strict</title>
<style type='text/css'>
body {
background:#9E9F5E;
color:#6F6F42;
}
h1 , h2 {
width:700px;
margin:1em auto;
text-align:center;
background:#FEFF67;
border:0.3em solid #469F45;
border-left:0.5em double #469F45;
border-right:0.5em double #469F45;
}
.allie {
background-color:green;
}
.allie .allie_haut{
height:18px;
line-height:20px;
font-size:15px;
text-align:center;
}
.allie .allie_corps{
background-color:yellow;
font-size:12px;
display:table;
}
.allie {
width:700px; /* IE ne peut se passer de valeur de taille */
margin:1em auto;
}
.corps_gauche{
width:300px;
display:table-cell;
vertical-align:middle;
text-align:center;
}
.corps_droite{
display:table-cell;
vertical-align:top;
padding:3px;
width:394px;
min-height:100px;
}
.allie .allie_bas{
height:20px;
line-height:20px;
font-size:11px;
padding:0 2px 0 5px;
}
</style>
<!--[if IE ]>
<style type="text/css">
.corps_droite , .corps_gauche {
display:inline; /* les elements en ligne s'aligne les uns par rapports aux
autres ! */
zoom:1; /* un coup de haslayout pour garder les dimensions ! */
}
.corps_droite{
vertical-align:middle;
}
</style>
<! endif -->
<!--[if lte IE6 ]>
<style type="text/css">
.corps_droite {
height:100px;
}
</style>
<! endif -->
</head>
<body>
</style>
<h1><code>Vertical-align:middle;</code> sans tableaux.</h1>
<h2>Image et textes longs</h2>
<div class="allie">
<div class="allie_haut">Haut</div>
<div class="allie_corps">
<div class="corps_gauche">
<img
src="http://overgame.com/images/overgame/labels/2006/november/20092_m.jpg">
</div>
<div class="corps_droite">
Blabla bla bl AaaBlabla bla bl AaaBlabla bla bla bla bl AaaBlabla bla bl AaaBlabla bla bl
a bla bl AaaBlabla bla bl AaaBlabl bla bl AaaBlabla bla bl AaaBlabla bla bl
a bla bl AaaBlabla bla bl AaaBlabla bla bla bla bl AaaBlabla bla bl AaaBlabla bla bl
a bla bl AaaBlabla bla bl AaaBlabla bla bl
a bla bl AaaBlabla bla bl AaaBlabla bla bla bla bl AaaBlabla bla bl AaaBlabla bla bl
a bla bl AaaBlabla blaa bl AaaBlaaBlabla bla bl AaaBlabla bla bl
a bla bl AaaBlabla bla bl AaaBlabla bla blaaBlabla bla bl AaaBlabla bla bl
a bla bl AaaBlabla bla AaaBlabla bla bl AaaaBlabla bla bl
a bla bl AaaBlabla bla bl AaaBlabla bla bla bla bl AaaBlabla bla bl AaaBlabla bla bl
a bla bl AaaBlabla bla bl AaaBlabla bla bla bla bl AaaBlabla bla bl AaaBlabla bla bl
a bla bl AaaBlabla bla bl AaaBlabla bla bla bla bl AaaBlabla bla bl AaaBlabla bla bl
</div>
</div>
<div class="allie_bas">Bas</div>
</div>
<h2>Image et texte court</h2>
<div class="allie">
<div class="allie_haut">Haut</div>
<div class="allie_corps">
<div class="corps_gauche">
<img
src="http://overgame.com/images/overgame/labels/2006/november/20092_m.jpg">
</div>
<div class="corps_droite">
Blabla bla bl AaaBlabla bla bl AaaBlabla bla bla bla bl AaaBlabla bla bl AaaBlabla bla bl
</div>
</div>
<div class="allie_bas">Bas</div>
</div>
</body>
Tiens , un exemple qui demontre l'utilité de ces drole de commentaires
conditionnels , on peut donc gerer le min-height sans hacks ,pour
FF/Opera/... , IE6-5 et IE7.
(a propos d'IE5 , il ne supporte pas le zoom:1; il faudra se repporter sur
une autre regles css pour activé le layout ou se repporté sur les float et
oublié l'alignement vertical:middle.)
++
<edit>
Si j'insite a te proposer une methode sans table , ce n'est pas pour t'y convertir.
Dans ton cas je crois même que le tableau est preconisé , il s'agit de données affichable en tableau , la page actuelle du site ou tu met ton lien en exemple , presente plusieurs images et texte (de legende ) disposés en ligne . 2 colonnes , 1colonnes images et 1 colonnes "legendes" , chaque colonne se completent.
Non , si je reviens , c'est pour bien insisté sur le fait que le vertical-align ; display inline et zoom (layout) ne copie / reproduits , pas la mise en forme du display :table et Cie des autres navigateurs.
Il s'agit dans IE de transformer des block en elements se comportant comme des elements inline , qui reposeront tous sur le même "baseline" , c'est donc quelque chose de totalement different ! .
Le plus haut de ces elements determinera la position de la ligne (interligne) de reference pour les autres , et les valeurs , top, middle, bottom , la se caleront dessus .
Ce qui ce centre alors n'est pas le texte contenu , mais le conteneur lui même et par rapports aux autres. Un seul conteneur ne ce centreras sur rien , a part que sur lui même
,
.
donc il n'y a pas de "simili display:table-cell;"dans IE . a part un vrai tableau.
Il faut donc apprehender la mise en forme dans ce contexte comme si chaque block devenait une image ou une balise inline avec des tailles de police differentes , et faire abstraction de ce qu'elles contiennent.
Il y a aussi le fait que lorsque l'on a etabli sa feuilles de style compatible tout navigateurs , sauf IE , on a bien du mal a dissocier , oublié ces regles au moment de faire le style qui va etre acceptable dans IE , ou de ne pas touché aux regles deja etablient et bonne ailleurs.
Une methode peut alors d'etre de mettre carrement les bonnes regles css entre commentaires et s'occuper de IE en recreant de toutes pieces les rêgles css , comme ça pas d'interference ou de confusion possibles .
Enfin quand c'est bon , on envoit ça dans les commentaires conditionnels.
Un petit commentaires dans la feuilles de style principal pour rappeller que tel portion de css a un equivalent ou alternative a part pour IE .
</edit>
Modifié par gcyrillus (27 Nov 2006 - 18:39)
mais pas un troll 
.
