nicht angemeldet
"Dynamische CSS-Navigation für moderne Browser"
Hi!
Ich habe mich an dieser Sache
( http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern )
versucht. Dennoch funktioniert es im IE 6.0 bei mir _nicht_ (im
Firefox tut's das natuerlich mal wieder super).
Anzugucken hier: http://physalia.de/.kunden/nizeshot/de/produkte.html
Ich habe den Original-SelfHTML-Code genommen und nur um den umgebenden
Container gestrippt (der brachte mein Kastenlayout durcheinander und
ich bekam ihn einfach nicht 'eingefangen' ;-( Zudem sollen es ja eh keine 'Buttons' sein, sondern eine reine Schrift-Navigation.
Warum funktioniert es nun im IE 6.0 nicht? Das ist doch einer der
genannten 'modernen' Browser...?
Danke fuer Aufklärung!
Nicola
PS: Hier mein Code:
****************
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
font-size: 1em;
}
ul#Navigation li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin: 0 0.4em; padding: 0;
}
* html ul#Navigation li { /* Korrektur fuer den IE */
margin-bottom: -0.4em;
}
ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 1.6em; left: -0.4em;
display: none; /* Unternavigation ausblenden */
}
* html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
lef\t: -0.4em;
}
ul#Navigation li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */
}
ul#Navigation li ul li {
float: none;
display: block;
margin-bottom: 0.2em;
}
ul#Navigation a, ul#Navigation span {
display: block;
width: auto; /* Breite den in li enthaltenen Elementen zuweisen */
padding: 0.2em 0.5em;
text-decoration: none; font-weight: bold;
border: 0 none;
}
* html ul#Navigation a, * html ul#Navigation 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 standardkompatiblen Modus */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
border-color: white;
}
li a#aktuell { /* aktuelle Rubrik kennzeichnen */
color: #df6f25;
}
ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
border-color: blue;
}
****************
<ul id="Navigation">
<li><a href="index_de.html">home</a></li>
<li><a id="aktuell" href="produkte.html">produkte</a>
<ul>
<li><a href="#Beispiel">traditionslinie</a></li>
<li><a href="#Beispiel">sport</a></li>
<li><a href="#Beispiel">basic</a></li>
<li><a href="#Beispiel">motiv</a></li>
</ul>
</li>
<li><a href="kontakt.html">kontakt</a></li>
<li><a href="#Beispiel">impressum</a></li>
</ul>
****************
-
Mist!
Warum funktioniert es nun im IE 6.0 nicht? Das ist doch einer der
genannten 'modernen' Browser...?Ich sehe gerade - das SelfHTML-Beispiel selbst funktioniert im
IE 6.0 bei mir auch nicht ;-(Die Frage muss entsprechend heissen: Wenn es per CSS nicht mal im
aktuellen IE machbar ist, ist ein solches Flyout-Menue also
nicht ohne Javascript umsetzbar? Wenn ja, wuerde ich mich ueber einen
guten Linktipp freuen, denn JS ist nicht so mein Ding ;-(Danke!
Nicola
-
Hallo Nicola,
Die Frage muss entsprechend heissen: Wenn es per CSS nicht mal im
aktuellen IE machbar ist, ist ein solches Flyout-Menue also
nicht ohne Javascript umsetzbar? Wenn ja, wuerde ich mich ueber einen
guten Linktipp freuen, denn JS ist nicht so mein Ding ;-(Weiterlesen ... unmittelbar darunter:
Die folgende, im <head>-Bereich des obigen Beispiels eingefügte
JavaScript-Funktion ermöglicht die dynamische Anzeige der
Unternavigation auch dem Internet Explorer für Windows.Grüße,
Jochen
-