Gestern habe ich einen Beitrag von goos gesehen, der ucweb verwendet: Wer hat gesagt, dass das Float-Menü nicht horizontal zentriert werden kann ? Ich habe einen Blick darauf geworfen und festgestellt, dass die Methode etwas umständlich ist, da negative Ränder, position:relativ; Hacks.
Ich habe hier einen einfacheren Weg, den ich zuerst zeigen werde:
Eigentlich hätte ich ein weiteres Div draußen anbringen sollen, aber um den CO2-Ausstoß zu reduzieren, habe ich es weggeworfen.
Codefeld ausführen
<!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 ">
<Kopf>
<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:none;}
#navigation{display:inline-block;border:solid 1px red;padding:20px;}
#navigation li{height:30px;float:left;}
#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>Float-Menü mit einer Möglichkeit zu gewinnen</title>
</head>
<Körper>
<ul id="navigation">
<li><a href="#">Startseite</a></li>
<li><a href="#">Neuigkeiten</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Gruppe</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Hilfe</a></li>
</ul>
</body>
</html>
[Strg+A Alle Tipps auswählen: Sie können zuerst einen Teil des Codes ändern und dann Ausführen drücken]
Der wichtigste ist dieser Satz:
<!--[if lte IE 7]><style type="text/css">#navigation{display:inline;}</style><![endif]-->
Um niedrigere Versionen des IE zu berücksichtigen, werden hier bedingte Kommentare verwendet. Es scheint, dass die Funktion von display:inline; in IE7 und darunter äquivalent ist.
Die Schiebetürnavigation hat sich aus dem obigen Code entwickelt:
Codefeld ausführen
<!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 ">
<Kopf>
<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:none;}
#navigation{display:inline-block;padding:20px;border:solid 1px red;}
#navigation li{height:30px;float:left;}
#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>Upgrade auf Schiebetürstil gemäß dem oben genannten Code</title>
</head>
<Körper>
<ul id="navigation">
<li><a href="#"><span>Startseite</span></a></li>
<li><a href="#"><span>Neuigkeiten</span></a></li>
<li class="current"><a href="#"><span>Store</span></a></li>
<li><a href="#"><span>Gruppe</span></a></li>
<li><a href="#"><span>Community</span></a></li>
<li><a href="#"><span>Hilfe</span></a></li>
</ul>
</body>
</html>
[Strg+A Alle Tipps auswählen: Sie können zuerst einen Teil des Codes ändern und dann Ausführen drücken]
Unter anderem müssen diese beiden Sätze erklärt werden, um nicht als überflüssig angesehen zu werden:
#navigation li a{overflow:hidden;} /* Verstecke die 3px, die von IE5.5 und 6 entfernt wurden. Es handelt sich nicht um einen 3px-Fehler! Denn height:30px;line-height:33px; in IE5.5 und 6 beträgt die Höhe 33px. */
#navigation li a span{cursor:hand;}/* Beheben Sie den Fehler in IE 5.5, 6 und 7, bei dem die Maus keine Handform anzeigt, wenn sie auf span platziert wird. Darüber hinaus unterstützt IE5.5 Cursor:Pointer; aber alle Versionen von IE erkennen Cursor:Hand;*/
Es ist erledigt. Der Nachteil ist, dass das Schreiben dieser bedingten Kommentarzeile für Menschen mit XHTML-Mysophobie wie Sand in den Augen ist. Wenn Sie es loswerden möchten, kann die Verwendung eines Hacks nicht schaden! hehe!
In Safari4, Chrome, Opera10, dh 5.5, 5, 6, 7, ff3 wurde kein Problem festgestellt.