Hier, j'ai vu un article de goos utilisant ucweb : Qui a dit que le menu Float ne pouvait pas être centré horizontalement ? des hacks.
J'ai ici un moyen plus simple, que je vais montrer en premier :
En fait, j'aurais dû mettre un autre div à l'extérieur, mais afin de réduire les émissions de carbone, je l'ai jeté.
Boîte de code d'exécution
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<tête>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{font-family:Verdana,Arial,sans-serif;font-size:12px;margin:120px auto;text-align:center;}
ul{margin:0;padding:0;list-style:aucun;}
#navigation{display:inline-block;border:solid 1px red;padding:20px;}
#navigation li{hauteur:30px;float:gauche;}
#navigation li a{float:left;height:30px;line-height:30px;padding:0 23px;background:#97C099;}
#navigation li a:hover{background:#59c099;color:#fff;}
</style>
<!--[if lte IE 7]><style type="text/css">#navigation{display:inline;}</style><![endif]-->
<title>menu flottant, une façon de gagner</title>
</tête>
<corps>
<ul id="navigation">
<li><a href="#">Accueil</a></li>
<li><a href="#">Actualités</a></li>
<li><a href="#">Boutique</a></li>
<li><a href="#">Groupe</a></li>
<li><a href="#">Communauté</a></li>
<li><a href="#">Aide</a></li>
</ul>
</corps>
</html>
[Ctrl+A Sélectionner tous les conseils : vous pouvez d'abord modifier une partie du code, puis appuyer sur Exécuter]
La plus cruciale est cette phrase :
<!--[if lte IE 7]><style type="text/css">#navigation{display:inline;}</style><![endif]-->
Afin de prendre en charge les versions inférieures d'IE, des commentaires conditionnels sont utilisés ici. Il semble que dans IE7 et versions antérieures, la fonction display:inline est équivalente à inline-block;.
La navigation par porte coulissante a évolué à partir du code ci-dessus :
Boîte de code d'exécution
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<tête>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{font-family:Verdana,Arial,sans-serif;font-size:12px;margin:120px auto;text-align:center;}
ul{margin:0;padding:0;list-style:aucun;}
#navigation{display:inline-block;padding:20px;border:solid 1px red;}
#navigation li{hauteur:30px;float:gauche;}
#navigation li a{float:left;background:#97C099 url( ) right -352px no-repeat;padding-right:27px;line-height:33px;cursor:hand;}
#navigation li a:hover,#navigation li.current a{background-position:left -176px;color:#009;background-color:#8597B5;}
#navigation li a:hover span,#navigation li.current a span{background-position:right -528px;}
#navigation li.current a{font-weight:bold;}
</style>
<!--[if lte IE 7]><style type="text/css">#navigation{display:inline;}</style><![endif]-->
<title>Mise à niveau vers le style de porte coulissante selon le code ci-dessus</title>
</tête>
<corps>
<ul id="navigation">
<li><a href="#"><span>Accueil</span></a></li>
<li><a href="#"><span>Actualités</span></a></li>
<li class="current"><a href="#"><span>Boutique</span></a></li>
<li><a href="#"><span>Groupe</span></a></li>
<li><a href="#"><span>Communauté</span></a></li>
<li><a href="#"><span>Aide</span></a></li>
</ul>
</corps>
</html>
[Ctrl+A Sélectionner tous les conseils : vous pouvez d'abord modifier une partie du code, puis appuyer sur Exécuter]
Parmi elles, ces deux phrases méritent d’être explicitées pour éviter d’être considérées comme redondantes :
#navigation li a{overflow:hidden;} /* Masquer les 3px abandonnés par IE5.5 et 6. Ce n'est pas un bug 3px ! Parce que height:30px;line-height:33px; dans IE5.5 et 6, la hauteur est de 33px. */
#navigation li a span{cursor:hand;}/* Attention au bug dans IE 5.5, 6 et 7 où la souris n'affiche pas la forme d'une main lorsqu'elle est placée sur span. De plus, IE5.5 ne prend pas en charge curseur:pointeur mais toutes les versions d'IE reconnaissent curseur:main;*/
C'est fait. L'inconvénient est qu'écrire cette ligne de commentaires conditionnels est comme du sable dans les yeux pour les personnes atteintes de mysophobie xhtml. Si vous voulez vous en débarrasser, alors il n'y a aucun mal à utiliser un hack ! héhé !
Aucun problème n'a été trouvé dans safari4, chrome, opera10, ie5.5, 5, 6, 7, ff3.