(reprise du message précédent)
bonjour,
pour le point 1 , En faisant usage du display:table , on assure la une perrenité du code dans la majorité des navigateur , L'evolution des navigateur , implementant de mieux les normes , on verrait mal disparaitre des regles deja comprises et implémentées .
Pour le cas de IE (au moins 5.5,6 et 7) , Je vais precher a nouveau le layout ! il est possible dans de nombreux cas de reproduire un display:table ; pour un element de type block , ou le display:inline-block; , toujours dans IE , n'efface pas totalement le comportement block , car cette régle est traité a la mode Microsoft et pas W3C. Cela ajoute a la confusion , inline-block(IE) n'est pas le inline-block(opera, ...).
Bon d'abord le display:table; est le comportement d'affichage css par defaut de la balise table , qui fait que l'élément se comportant comme un block , ne vas pas occupé 100% de la largeur disponible et pourra s'élargir au dela de celle-ci. ça sert a ça , un affichage "fluide" par excellence.
IE est incapable de reproduire cette état ailleurs que sur une balise <table> ... et l'alternative possible pour un block : (display:inline;zoom:1;) , et un inline (zoom:1;).
Avec un commentaire conditionnel ,et un fichiers css dédié IE, toutes versions de IE comprenant les CC ,comprennent aussi zoom:1.
Je remet en lien un menu centré (a l'origine c'est un test menu deroulant css ) .
Je vien de faire une mise a jour , de façon a ce que les li soit fluides en fonctions des textes et de l'affichage :
http://gcyrillus.free.fr/essai/menu_deroulant.html
Alors peut-etre est ce mal aisé de mettre en place , pourtant , il s'agit au depart de monté le conteneur principale en display:table; (qui se retracte donc sur les dimensions de ce qu'il contient).
On passe ensuite ce conteneur principale en display:inline; et zoom; pour que lui aussi se retracte sur son contenu , pour le centré , on le place dans un conteneur en text-align:center; ..
Enfin , cela reste relativement simple :
Faudrait faire attention au mode allergique , sitot que le mot table apparait
.
Sans vouloir trollé , j'espere faire comprendre 2 trucs.
GC
<edit> autant prendre le menu du premier post</>
PS, arf , c'est le vendredi !
Modifié par gcyrillus (28 Sep 2007 - 18:35)
bonjour,
pour le point 1 , En faisant usage du display:table , on assure la une perrenité du code dans la majorité des navigateur , L'evolution des navigateur , implementant de mieux les normes , on verrait mal disparaitre des regles deja comprises et implémentées .
Pour le cas de IE (au moins 5.5,6 et 7) , Je vais precher a nouveau le layout ! il est possible dans de nombreux cas de reproduire un display:table ; pour un element de type block , ou le display:inline-block; , toujours dans IE , n'efface pas totalement le comportement block , car cette régle est traité a la mode Microsoft et pas W3C. Cela ajoute a la confusion , inline-block(IE) n'est pas le inline-block(opera, ...).
Bon d'abord le display:table; est le comportement d'affichage css par defaut de la balise table , qui fait que l'élément se comportant comme un block , ne vas pas occupé 100% de la largeur disponible et pourra s'élargir au dela de celle-ci. ça sert a ça , un affichage "fluide" par excellence.
IE est incapable de reproduire cette état ailleurs que sur une balise <table> ... et l'alternative possible pour un block : (display:inline;zoom:1;) , et un inline (zoom:1;).
Avec un commentaire conditionnel ,et un fichiers css dédié IE, toutes versions de IE comprenant les CC ,comprennent aussi zoom:1.
Je remet en lien un menu centré (a l'origine c'est un test menu deroulant css ) .
Je vien de faire une mise a jour , de façon a ce que les li soit fluides en fonctions des textes et de l'affichage :
http://gcyrillus.free.fr/essai/menu_deroulant.html
Alors peut-etre est ce mal aisé de mettre en place , pourtant , il s'agit au depart de monté le conteneur principale en display:table; (qui se retracte donc sur les dimensions de ce qu'il contient).
On passe ensuite ce conteneur principale en display:inline; et zoom; pour que lui aussi se retracte sur son contenu , pour le centré , on le place dans un conteneur en text-align:center; ..
Enfin , cela reste relativement simple :
<!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" lang="fr">
<head>
<title>Menu centré</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
ul {
margin: 0 auto;
padding: 0;
list-style: none;
border:1px solid #333 ;
display:table; /* pour les besoins de centrage */
}
ul li {
float:left;
padding:0 0.5em;
background:#ccc ;
border:1px solid #333 ;
text-align:center;
}
</style>
<!-- supplement IE pour centré le menu -->
<!--[if IE ]>
<style type="text/css">
/* l'ensemble de cette portion de css sert a centré le menu en exemple */
#menu {
text-align:center;
}
ul {
display:inline;
zoom:1;
}
</style>
<![endif]-->
</head>
<body>
<div id="menu">
<ul id="menu_pal">
<li><a href="choix.php">Accueil</a></li>
<li><a href="galeries.php">Galerie de...</a></li>
<li><a href="choix.php?p=delete.php">Supprimer un fichier</a></li>
<li><a href="choix.php?p=stats.php">Stats</a></li>
<li><a href="choix.php?p=gerer_fichiers.php">Gérer les fichiers</a></li>
</ul>
</div>
</body>
</html>
Faudrait faire attention au mode allergique , sitot que le mot table apparait
.Sans vouloir trollé , j'espere faire comprendre 2 trucs.
GC
<edit> autant prendre le menu du premier post</>
PS, arf , c'est le vendredi !
Modifié par gcyrillus (28 Sep 2007 - 18:35)
. Bon en tout cas, ça ne réglera pas mon problème de passer par les CC (ce que je ferai plus tard).