Hallo,
ich habe eine Problem mit der Ausrichtung meines Menus. Die Links sollen zentriet sein, befinden sich aber immer links. Ich habe mich bei Bau des Menus an die Anleitung unter SELFHTML: Stylesheets / CSS-basierte Layouts / Navigationsleisten gehalten. Mein CCS Code ist:
[CODE] div#frame {
width: 100%;
background-color: #006;
}
- html div#frame { /* Korrektur fuer IE 5.x */
width: 100%;
w\idth: 47.1em;
}
div#frame div {
clear: left;
}
ul#menu {
margin: auto; padding: 0;
text-align: center;
}
ul#menu li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin: 0.4em; padding: 0;
}
- html ul#menu li { /* Korrektur fuer den IE 5 und 6 */
margin-bottom: -0.4em;
}
:first-child+html ul#Navigation li { / Korrektur fuer den IE 7 */
margin-bottom: -0.1em;
}
ul#menu li ul {
margin: 0; padding: 0;
position: absolute;
top: 1.6em; left: -0.4em;
display: none; /* Unternavigation ausblenden */
}
- html ul#menu li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
lef\t: -0.4em;
}
:first-child+html ul#menu ul { / Workaround fuer den IE 7 /
background-color:silver; padding-bottom:0.4em;
}
ul#menu li:hover ul {
display: block ; / Unternavigation in modernen Browsern einblenden */
}
ul#menu li ul li {
float: left;
display: block;
margin-bottom: 0.2em;
}
ul#menu a, ul#menu span {
display: block;
width: 6.4em; /* Breite den in li enthaltenen Elementen zuweisen */
padding: 0.3em 1em;
text-decoration: none; font-weight: bold;
border-left: 1px dashed black;
border-right: 1px dashed black;
color: #FFF; background-color: #006;
}
- html ul#menu a, * html ul#menu span {
width: 8.6em; /* Breite nach altem MS-Boxmodell für IE 5.x /
w\idth: 6.4em; / korrekte Breite fuer den IE 6 im standardkonformen Modus /
}
ul#menu a:hover, ul#menu span, li a#aktuell {
border-color: black;
color: white; background-color: #009;
}
li a#aktuell { / aktuelle Rubrik kennzeichnen /
color: maroon; background-color: silver;
}
ul#menu li ul span { / aktuelle Unterseite kennzeichnen */
background-color: maroon;
}
[/CODE]Der HTML Code ist:
[CODE]
<li><a href="index.html">Home</a><!-- Zu der Seite auf der man sich gerade befindet sollte kein Link fürhen. -->
Gruß Moritz