bonjour Raphael.
heu
, je te remerci de ton interet et de ta politesse .
.... c'est en effet un clin d'oeil aux tableaux. et l'exemple en lien est surchargé a outrance pour "stylé la boite recevant le texte .
A ne pas faire pour ne pas tombé dans "tableau en div " , ce mythe est un leurre !(mon opinion, en tout cas pour le rendu visuel. En dehors du
contexte "visuel" , Le choix de l'un ou de l'autre est une autre affaire ).
Dans IE , le centrage vertical d'un element de type block seul a l'interieur d'un autre element autre que celle d'une cellule de tableau n'est effectivement pas possible (sauf ignorance de ma part) , mais il est tout a fait possible d'en aligner plusieurs , cet info "ludique" manque peut-etre dans la FAQ , ou est trop "fragile" pour etre utilisable .
Mis a part ce gros clin d'oeil" aux tableaux et raccolleur . Ce post a plutot pour but de "mettre en evidence" , un defaut caché de IE (et des autres ?) , qui peut s'averer tres prise de tête dans une page complexe au css important et usant de hacks "underscore ou !important" .
Hacks rapides a mettre en place , souvent pour test provisoire et qui trainent ensuite "for ever" , au detriment des commentaires conditionnels.
Commentaires conditionnels qui ont plusieurs usages pour rappel (a ceux qui les boudent).
1) cacher a IE un morceau de page , un js , une balise , un fichier "css" son contenu , etc ...
2) donner a IE en cachant aux autres un js , un fichier "css" ou code html en plus .
on peut donc proprement exclure dans IE certaines "portions de code" , js , css , html
qui le mettrait a mal et lui servir d'autres alternatives ou "surcharges" , js , css , html , ...
3) a filtrer les differentes version de IE (utile pour le min-height que IE7 comprend et pas IE6 ).
4) d'autres usages , peut-etre ?
Ce defaut caché quel est-il ?
On imagine , a juste titre je crois , que des regles css identique se suivant mais avec des
valeurs differentes pour le même elements seront ecrasés ou annulé par la derniere regle qui sera comprise
par le navigateur.
Pour IE cela ne semble pas tout a fait le cas ! dans le code suivant :
display:inline-block;
display:table-caption;/* patatras IE n'appliqueras plus le inline-block */
display:blabla;/* firefoxe et opera ne sont pas perturbé , cette valeur erroné/incomprise est totalement ignoré */
et dans le cas ou la derniere regle est comprise , elle remplace totalement la precedente , non ?
Bah , pas sur ,Exemple dans ce code , pour obtenir le centrage vertical mutuelle de 2 balise de type block , il faut avoir recours a ce defaut !
C'est un peu comme creer par accident une valeur "a mi chemin entre les deux".
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>HTML 4.01 Transitional</title><style type='text/css'>
*{margin:0;pading:0;margin:auto;}
div , p {
display:table-caption!important;
display:inline-block;
background:#999;
width:700px;
}
div p , span {
display:table-cell!important;
display:inline-block;/* voici la valeur pour IE */
margin:0.5em;
color:yellow;
padding:0.5em;
vertical-align:middle;
width:190px;
text-align:center;
}
div p {
display:inline;/* voici la nouvelle valeur pour IE que je crois etre inline 100% */
}
hr {
border:1px solid white;
background:white;
}
</style>
</head>
<body>
<div>
<span><span><br>texte centré verticalement
par rapport aux autres textes<br></span></span>
<span><span><br>texte court centré verticalement <br></span></span>
<span><span><br>Lorem ipsum dolor sit amet,<br /> consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut<br></span></span>
<hr ><!-- ce hr n'est pas pour IE -->
<p><p><br>Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt consectetuer adipiscing <br></p></p>
<p><p><br>Lorem ipsum dolor sit amet consectetuer adipiscing <br></p></p>
</div></body></html>
En n'appliquant pas le display:inline ; en surcharge dans IE, impossible d'aligner et centrer les 2 derniers paragraphes comme le font les span .
Idem si on n'applique que le display inline sans passer par le display:inline-block; d'abord !? .
test en ligne , avec legere mise en forme:
http://gcyrillus.free.fr/trucs_css/test_valign_middle_block_inline.html .
J'avais deja remarqué des problemes de ce genre , mais dans le sens inverse , sur une régle toute simple à annulé :
html , body {
overflow:hidden!important;/* ou autre qui annule la suivante */
overflow:auto;/* cette ligne seul avec l'underscore suffisait */
}
( une page pour reproduire ce "defaut":
http://gcyrillus.free.fr/gabarits/simili-frame-extensible-fluide-et-scroll-a-la-roulette-IE-Firefoxe.html
si vous avait ff et editcss , ajouté la regle precedente et observé le rendu visuel du scroll )
exemple plus simple et comprehensible du defaut :
a {
color:red!important;
}
a:hover {
color:yellow;
}
... A resteras rouge , sauf dans IE.
...
Le pourquoi de ce post ?
les commentaires conditionnels, les bizarreries de IE et les difficultés que rencontre les devellopeurs des differents "navigateurs" a faire des
"moteurs" de rendu respectueux et surtout stables , la maltraitance qu'on inflige par le biais des "css" aux pages chargées , le post dans le
bar du forum , promouvoir IE7 ! , l'eternel retour ou incomprehension sur les div et table ...
Il faut surtout (a mon avis) "promouvoir" les commentaires conditionnels et epurées au maximum les feuilles de styles et suivre les standards ,
ça ressemble beaucoup au "message d'alsacreations" .
<edit> pour ce qui est des bricoles, prouesses ou demonstration "css" , il faudrait plutot les apprehender de façon "anecdotique" ou "comme exemple pedagogique" , pour le coté "flambant" en insistant sur le fait qu'elles sont fragiles et suceptible de "s'ecroulé" à l'occasion d'une mise a jour de navigateur , on n'entends , pour ainsi dire , plus parlé de IE5 sur le forum par exemple .</edit>
bonne journée et bonnes vacances a ceux pour qui c'est aujourd'hui !
Modifié par gcyrillus (24 Oct 2006 - 11:23)