CSS Navigation div ausblenden und wieder anzeigen

[macmensa]

Hi @all...

nach langer Zeit mache ich nun endlich mal wieder was an meiner HP und bastel momentan an einer neuen Navigation mit CSS... Nach 4 schlaflosen Nächten habe ich nun grundsätzlich erreicht was ich wollte, aber den letzten Haken bekomme ich einfach nicht raus...

Mein Problem liegt beim verstecken und anzeigen eines div bei li:hover. Ich habe alle möglichen Varianten ausprobiert aber finde meinen Denkfehler nicht.

Die Liste im HTML hat 3 <ul> Ebenen. "Reines" ausblenden der einzelnen Ebenen mit div#navi ul ul ul (3. Ebene) oder div#navi ul ul (2. Ebene){display: none;} funktioniert einzeln oder in Kombination wunderbar, aber ich bekomme die anschliessende Einblendung nicht mehr hin.

Hier mal der CSS Code:

<style type="text/css">  
  
#navi {  
position: relative;  
width: 165px;  
top: 0px;  
left: 0px;  
}  
  
#navi li {  
position: relative;  
}  
  
#navi ul {  
list-style: none;  
margin: 0;  
padding: 0;  
}  
  
#navi p {  
padding-left: 10px;  
margin-bottom: 0;  
font: bold 11px agency fb, helvetica, sans-serif;  
color: #bdb177;  
background-repeat: no-repeat;  
background-position: right;  
}  
  
#navi a {  
text-decoration: none;  
}  
  
#navi ul ul a{  
display: block;  
font: bold 11px agency fb, helvetica, sans-serif;  
background: #666666;  
margin: 0;  
padding: 2px 3px;  
}  
  
div#navi ul ul ul,  
div#navi ul li:hover ul  
{display: none;}  
  
div#navi ul ul li:hover ul  
{display: block;}  
  
#raum li p {  
line-height: 40px;  
background-image: url("../assets/images/raumb40.jpg");  
}  
  
#shuttle li p {  
line-height: 40px;  
background-image: url("../assets/images/shuttleb40.jpg");  
}  
  
#iss li p {  
line-height: 40px;  
background-image: url("../assets/images/issb40.jpg");  
}  
  
#moon li p {  
line-height: 40px;  
background-image: url("../assets/images/moonb40.jpg");  
}  
  
#ground li p {  
line-height: 40px;  
background-image: url("../assets/images/groundb40.jpg");  
}  
  
#glossar li p {  
line-height: 40px;  
background-image: url("../assets/images/augeb40.jpg");  
  
</style>

und der dazugehörige HTML Code:

<div id="navi">  
  <ul>  
        <div id="raum">  
        <li><a href="./1998.html"><p>Raumfahrt</p></a></li>  
        </div>  
  
        <div id="shuttle">  
        <li><a href="./1999.html"><p>Space Shuttle</p></a></li>  
        </div>  
      <ul><li><a href="./1999.html">Die Orbiter</a></li>  
          <li><a href="./1999.html">Aufbau</a></li>  
      </ul>  
  
        <div id="iss">  
        <li><a href="./2000.html"><p>ISS</p></a></li>  
        </div>  
      <ul><li><a href="./1999.html">Module</a></li>  
          <li><a href="./1999.html">Chronik</a></li>  
         <ul><li><a href="./1999.html">Das Jahr 1998</a></li>  
             <li><a href="./1999.html">Das Jahr 1999</a></li>  
             <li><a href="./1999.html">Das Jahr 2000</a></li>  
         </ul>  
     </ul>  
  
  
        <div id="moon">  
        <li><a href="./2001.html"><p>Moon</p></a></li>  
        </div>  
  
        <div id="ground">  
        <li><a href="./2002.html"><p>Ground Control</p></a></li>		  
        </div>  
  
        <div id="glossar">  
        <li><a href="./2003.html"><p>Glossar</p></a></li>  
        </div>  
  </ul>  
</div>

Auf folgendem Link habe ich obiges Beispiel mal online gestellt zum angucken was da irgendwie nicht klappt... Test Seite Navigation aktuell

Ich drehe mich mit diesem verstecken und anzeigen mittlerweile gedanklich im Kreis und scheine "betriebsblind" zu werden... Denn das für mich faszinierende ist, das ich in einem absoluten Erstentwurf das ganze schonmal am laufen hatte... Jedoch war da die Aufklappung noch z.T. horizontal gelöst... Nichts desto trotz ging es da... Der Code auf der Seite war dafür:

div#menu ul ul ul,  
div#menu ul ul,  
div#menu ul ul li:hover ul ul,  
div#menu ul li:hover ul ul  
{display: none;}  
  
div#menu ul li:hover ul,  
div#menu ul ul li:hover ul,  
div#menu ul ul ul li:hover ul  
{display: block;}

Und genau dieser Code funktioniert nun auf einmal nicht mehr... Warum wissen wohl nur die Götter...

Und der dazugehörige Link für diese erste Testseite: Testseite 2

Ich würde mich sehr freuen, wenn sich 1,2 Leute finden könnten die mir hier gedanklich oder mit dem Code direkt auf die Sprünge helfen könnten... Denn langsam aber sicher komme ich in die Phase des verzweifelns...

Danke im vorraus... Gruss Mac

[Gunnar Bittersmann]

@@macmensa:

nuqneH

HNach 4 schlaflosen Nächten habe ich nun grundsätzlich erreicht was ich wollte, aber den letzten Haken bekomme ich einfach nicht raus...

Wenn du so völlig übermüdet bist, kein Wunder. Schlaf dich erstmal aus!

<div id="navi">

<ul>
        <div id="raum">
        <li><a href="./1998.html"><p>Raumfahrt</p></a></li>
        </div>

Und dann berichtigst du die HTML-Fehler: 'ul' darf nur 'li'-Kinder haben, keine 'div'-Kuckuckskinder. Die ID "raum" bekommt das 'li'-Element.

Vermutlich ist auch das div[@id="navi"] überflüssig; es hat nur ein Kind ('ul'), gruppiert also nichts. Die ID "navi" bekommt das 'ul'-Element.

<ul><li><a href="./1999.html">Module</a></li>
          <li><a href="./1999.html">Chronik</a></li>
         <ul><li><a href="./1999.html">Das Jahr 1998</a></li>
             <li><a href="./1999.html">Das Jahr 1999</a></li>
             <li><a href="./1999.html">Das Jahr 2000</a></li>
         </ul>
     </ul>

'ul' darf nur 'li'-Kinder haben, keine 'ul'. Die 'ul' der tieferen Ebene muss innerhalb eines 'li' der höheren sein:

[code lang=html]      <ul>
        <li><a href="./1999.html">Module</a></li>
        <li><a href="./1999.html">Chronik</a>               <!-- 'li' hier weg …-->
          <ul>
            <li><a href="./1999.html">Das Jahr 1998</a></li>
            <li><a href="./1999.html">Das Jahr 1999</a></li>
            <li><a href="./1999.html">Das Jahr 2000</a></li>
          </ul>
        </li>                                               <!--  … und hier hin -->
      </ul>

  
Qapla'

-- 
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)

[macmensa]

Hi John,

danke für deine Antwort bis hierhin... Einen Teil meines Problems habe ich dadurch nun schon beseitigen können...:-)

Wenn du so völlig übermüdet bist, kein Wunder. Schlaf dich erstmal aus!

Schlafen? ich muss das Wort erstmal im Fremdwörterlexikon nachschlagen glaube ich... Aber es erklärt wohl ein paar meiner Fehler...

Das mit der dritten Ebene der <ul> ein und ausblenden ist durch die Veränderung des <li> nun gelöst... Kleines Detail, grosse Wirkung... Danke !

<ul>
        <li><a href="./1999.html">Module</a></li>
        <li><a href="./1999.html">Chronik</a>               <!-- 'li' hier weg …-->
          <ul>
            <li><a href="./1999.html">Das Jahr 1998</a></li>
            <li><a href="./1999.html">Das Jahr 1999</a></li>
            <li><a href="./1999.html">Das Jahr 2000</a></li>
          </ul>
        </li>                                               <!--  … und hier hin -->
      </ul>

Das mit dem Kuckuskind ist jedoch nicht so einfach zu beseitigen wie ich gerade feststelle. Dazu vielleicht ein kurze Erklärung meines Gedankengangs dazu. Ich habe lange nach einem Weg gesucht die erste Ebene der Navi inkl. einer Grafik zu realisieren und auch den Text innerhalb dieser Ebene richtig zu positionieren. Der einzige Weg den ich gefunden habe war dieses "Kuckuskind", welches im Aussehen der Testseite dem entspricht, was ich in der Ersten Ebene erreichen will. Daher war mein Hauptaugenmerk momentan auch immer im CS Teil und ich habe Fehler im HTML ganz übersehen...

Mache ich aber nun deine Umsetzung dafür:

<div id="raum">
        <li><a href="./1998.html"><p>Raumfahrt</p></a></li>
        </div>

Und dann berichtigst du die HTML-Fehler: 'ul' darf nur 'li'-Kinder haben, keine 'div'-Kuckuckskinder. Die ID "raum" bekommt das 'li'-Element.

Vermutlich ist auch das div[@id="navi"] überflüssig; es hat nur ein Kind ('ul'), gruppiert also nichts. Die ID "navi" bekommt das 'ul'-Element.

und schreibe den Code wie folgt:

  
<ul>  
         <li id="raum"><a href="./1998.html"><p>Raumfahrt</p></a></li>  
</ul>  

oder auch so:

  
<ul>  
         <li.raum><a href="./1998.html"><p>Raumfahrt</p></a></li>  
</ul>  

Dann verschwindet der gesamte Menüpunkt in der Anzeige und die Untermenüs ab Shuttle rücken im Layout nach oben. <div id="navi"> habe ich unangetastet gelassen. In den Unterpunkten hat das keinerlei Auswirkungen.

Kann es daher sein, das ich auch hier das <li> umsetzen muss? "raum" ist vielleicht ein schlechtes Bespiel dafür, da hier keine Unterpunkte existieren und es bei einer Ebene bleibt. "Shuttle" wäre da eher das entsprechende Erklär-Objekt, da es zwar keine dritte, aber zumindest eine zweite Ebene hat.

Nebenbei... Ich bin da wirklich noch ambitionierter Laie und bringe mir das gerade ein bisschen autodidaktisch bei... Daher grübel ich vielleicht etwas viel und lange über die einzelnen Hintergründe einer Funktion/Anweisung...

Gruss Mac

[ChrisB]

Hi,

Das mit dem Kuckuskind ist jedoch nicht so einfach zu beseitigen wie ich gerade feststelle. Dazu vielleicht ein kurze Erklärung meines Gedankengangs dazu. Ich habe lange nach einem Weg gesucht die erste Ebene der Navi inkl. einer Grafik zu realisieren und auch den Text innerhalb dieser Ebene richtig zu positionieren. Der einzige Weg den ich gefunden habe war dieses "Kuckuskind", welches im Aussehen der Testseite dem entspricht, was ich in der Ersten Ebene erreichen will.

Mit HTML strukturierst du die Inhalte, noch *bevor* du an so etwas wie Formatierung überhaupt denkst.
Also baust du das erst mal so auf, dass es die Inhalte bestmöglich auszeichnet - und das ist in diesem Falle mit Listen, die wiederum Listen in ihren List-Items enthalten.

Dann verschwindet der gesamte Menüpunkt in der Anzeige und die Untermenüs ab Shuttle rücken im Layout nach oben.

Blende nur aus, was du ausblenden willst.

Wenn du eine Struktur a la

<ul>  
  <li>Oberpunkt  
    <ul>  
      <li>Unterpunkt</li>  
      <li>Unterpunkt</li>  
      <li>Unterpunkt</li>  
    </ul>  
  </li>  
  ...

hast, und der Oberpunkt sichtbar bleiben, die Unterpunkte aber ausgeblendet werden sollen - dann sorgst du einfach dafür, dass nur das im LI liegende UL ausgeblendet wird, und nicht das LI mit dem Oberpunkt ebenfalls.

MfG ChrisB

[macmensa]

Hallo ihr beiden...

Eure Hilfestellung war sehr hilfreich.. DANKE !!!

Ich habe nun endlich erreicht was ich wollte und das Resultat der ganzen Problemstellung und Lösung nun nochmal aktualisiert hochgeladen:

Test Seite

Hier nun die Endlösung im Code, als erstes das HTML:

<div id="navi">  
  <ul>  
  
        <li><a href="./1998.html"><div id="raum"><p>Raumfahrt</p></div></a></li>  
  
        <li><a href="./1999.html"><div id="shuttle"><p>Space Shuttle</p></div></a>  
           <ul>  
             <li><a href="./1999.html">Die Orbiter</a></li>  
             <li><a href="./1999.html">Aufbau</a></li>  
          </ul>  
       </li>  
  
        <li><a href="./2000.html"><div id="iss"><p>ISS</p></div></a>  
  
           <ul>  
             <li><a href="./1999.html">Module</a></li>  
             <li><a href="./1999.html">Chronik</a>  
                <ul>  
                  <li><a href="./1999.html">Das Jahr 1998</a></li>  
                  <li><a href="./1999.html">Das Jahr 1999</a></li>  
                  <li><a href="./1999.html">Das Jahr 2000</a></li>  
               </ul>  
             </li>  
          </ul>  
        </li>  
  
        <li><a href="./2001.html"><div id="moon"><p>Moon</p></div></a></li>  
  
        <li><a href="./2002.html"><div id="ground"><p>Ground Control</p></div></a></li>		  
  
        <li><a href="./2003.html"><div id="glossar"><p>Glossar</p></div></a></li>  
  
  </ul>  
</div>

Hier habe ich nun den Listenaufbau nochmal überarbeitet und die <li> an der richtigen Stelle geschlossen. Das "Kuckuckskind" ist jedoch drin geblieben, jedoch etwas geändert im Vergleich zum Erstentwurf:

<div id="navi">

<ul>
        <div id="raum">
        <li><a href="./1998.html"><p>Raumfahrt</p></a></li>
        </div>

»»

Und dann berichtigst du die HTML-Fehler: 'ul' darf nur 'li'-Kinder haben,
keine 'div'-Kuckuckskinder. Die ID "raum" bekommt das 'li'-Element.

Das Problem war anscheinend nicht das <div> an sich, sondern wem ich es zugeordnet hatte. Jetzt habe ich es dem <p> zugeordnet und damit funktioniert es wie man sieht einwandfrei...

Hier die geänderte funktionierende Zuordnung:

[code lang=html]<li><a href="./1999.html"><div id="shuttle"><p>Space Shuttle</p></div></a>
           <ul>
             <li><a href="./1999.html">Die Orbiter</a></li>
             <li><a href="./1999.html">Aufbau</a></li>
          </ul>
       </li>

  
Zum Abschluss nun noch der fertige CSS Code, damit andere vielleicht mein "Machwerk" nachvollziehen können/wollen... Für die Experten ist der Code sicherlich noch sehr Verbesserungfähig. Ich selbst habe auch das Gefühl,das ich da noch einiges drin habe, was doppelt, überflüssig und kompliziert geschrieben ist, aber solange es läuft mache ich mir da nicht wirklich den Kopf drum...  
  
~~~css
<style type="text/css">  
  
#navi {  
position: relative;  
width: 165px;  
top: 0px;  
left: 0px;  
}  
  
#navi li {  
position: relative;  
}  
  
#navi ul {  
list-style: none;  
margin: 0;  
padding: 0;  
}  
  
#navi p {  
padding-left: 10px;  
margin-bottom: 0;  
font: bold 12px agency fb, helvetica, sans-serif;  
color: #999999;  
background-repeat: no-repeat;  
background-position: right;  
}  
  
#navi a {  
text-decoration: none;  
}  
  
#navi a:hover {  
color: #bdb177;  
}  
  
#navi p:hover {  
color: #bdb177;  
}  
  
#navi ul ul a{  
display: block;  
font: bold 11px agency fb, helvetica, sans-serif;  
background: #666666;  
margin: 3 0 0 8;  
padding: 2px 3px;  
}  
  
#navi ul ul ul a {  
margin-left: 20;  
margin-top: 3;  
}  
  
div#navi ul ul ul,  
div#navi ul ul,  
div#navi ul li:hover ul ul  
{display: none;}  
  
div#navi ul li:hover ul,  
div#navi ul ul li:hover ul  
{display: block;}  
  
#raum p {  
line-height: 40px;  
background-image: url("../assets/images/raumb40.jpg");  
}  
  
#shuttle p {  
line-height: 40px;  
background-image: url("../assets/images/shuttleb40.jpg");  
}  
  
#iss p {  
line-height: 40px;  
background-image: url("../assets/images/issb40.jpg");  
}  
  
#moon p {  
line-height: 40px;  
background-image: url("../assets/images/moonb40.jpg");  
}  
  
#ground p {  
line-height: 40px;  
background-image: url("../assets/images/groundb40.jpg");  
}  
  
#glossar p {  
line-height: 40px;  
background-image: url("../assets/images/augeb40.jpg");  
  
</style>

Abschliessend bleibt für mich nun nur noch die Frage, wie ich es auch für den IE zum laufen bekomme? Die Links der ersten Ebene sind zwar alle anklickbar, :hover funktioniert jedoch so nicht... Und auch die Größe der ersten Ebene ist "beschnitten" worden bei :height... Und vom Thema Workaround habe ich absolut noch keinen Plan... Geht das relativ schnell zu realisieren in meinem Fall, oder sind das die nächsten schlaflosen Nächte?

Gruss Mac

[Gunnar Bittersmann]

@@macmensa:

nuqneH

Hier nun die Endlösung im Code, als erstes das HTML:

Endlösung?

Das "Kuckuckskind" ist jedoch drin geblieben

Warum?

jedoch etwas geändert

Verschlimmbessert.

Das Problem war anscheinend nicht das <div> an sich, sondern wem ich es zugeordnet hatte. Jetzt habe ich es dem <p> zugeordnet

<li><a href="./1998.html"><div id="raum"><p>Raumfahrt</p></div></a></li>

Nein, 'a'-Elemente dürfen keine Blockelemente enthalten, also keine 'div' und auch keine 'p'.

und damit funktioniert es wie man sieht einwandfrei...

Bei fehlerhaftem Quellcode ist NIE von einwandfrein Funktionieren auszugehen. Es kann in einem Browser so aussehen wie gewünscht; heißt aber nicht, dass andere Browser die Fehler genauso korrigieren.

„Vermutlich korrigiert der IE8 Deinen Fehler anders, als es einige andere Browser tun. Das ist einer der Gründe, weshalb man am besten keine macht.“ [Cheatah]

Validiere deinen Quellcode!

Diese Zeile sollte so aussehen:
<li id="raum"><a href="./1998.html">Raumfahrt</a></li>

Und wenn die 'a'-Elemente die ganze 'li'-Box ausfüllen sollen, dann setzt du eben
#navi a { display: block }

Erst wenn der Validator grünes Licht gibt (bzw. man nicht sehr genau weiß, ob das von Belang ist), sollte man sich um die Darstellung kümmern. Ansonsten:

„Bei derartig invalidem Code [...] kann man eigentlich nicht von Darstellungsfehler sprechen - eher von Darstellungswunder.“ [MudGuard]

Qapla'

[macmensa]

Hallo Gunnar... (sorry, vorhin falschen Namen genommen)

Hier nun die Endlösung im Code, als erstes das HTML:

Endlösung?

das war geschrieben ohne Nachzudenken... sorry...!

Also denn, zurück auf Anfang... Ich habe mir deine Ratschläge zu Herzen genommen und alles nochmal überarbeitet...

Laut Validate ist die Seite im jetzigen Zustand zwar fehlerfrei, jedoch habe ich dafür wieder zwei, drei alte Probleme...

Hier der aktuelle Link zur Testseite... abgespeckt auf das nötigste:

Neue Testseite Navigation

Kuckuckseier und alles verschlimmbesserte ist verschwunden und ich muss zugebeben das sieht nun auch im CSS Code um einiges einfacher und kürzer aus... bisher zumindest:

#navi {  
position: absolute;  
width: 165px;  
top: 175px;  
}  
  
#navi li {  
position: relative;  
}  
  
#navi ul {  
list-style: none;  
padding: 0;  
}  
  
#navi a {  
display: block;  
height: 42px;  
padding-left: 10px;  
margin-bottom: 5;  
text-decoration: none;  
font: bold 12px arial, helvetica, sans-serif;  
color: #999999;  
background-repeat: no-repeat;  
background-position: top right;  
}  
  
#navi a:hover {  
color: #bdb177;  
}  
  
#navi ul ul a, #navi ul ul ul a {  
display: block;  
height: 15px;  
font: bold 11px arial, helvetica, sans-serif;  
background: #666666;  
margin: 3 0 0 8;  
padding: 2px 3px;  
}  
  
#navi ul ul ul a {  
background: #bdb177;  
color: #000000;  
margin-left: 35;  
margin-top: 3;  
}  
  
#navi ul ul ul a:hover {  
color: #666666;  
}  
  
div#navi ul ul ul,  
div#navi ul ul,  
div#navi ul li:hover ul ul  
{display: none;}  
  
div#navi ul li:hover ul,  
div#navi ul ul li:hover ul  
{display: block;}  
  
#raum {  
background-image: url("../assets/images/raumb40.jpg");  
}  
  
#shuttle {  
background-image: url("../assets/images/shuttleb40.jpg");  
}  
  
#iss {  
background-image: url("../assets/images/issb40.jpg");  
}  
  
#moon {  
background-image: url("../assets/images/moonb40.jpg");  
}  
  
#ground {  
background-image: url("../assets/images/groundb40.jpg");  
}  
  
#glossar {  
background-image: url("../assets/images/augeb40.jpg");

Daher nun zu meinem alten, neuen Problem...

1. Der Text neben dem Bild wird nun nicht mehr zentriert dargestellt. vertical-align hilft mir ja nicht, da es ein Block Element ist.

1.1 Ich musste #navi a eine height geben, da sonst das Hintergrundbild abgeschnitten wird. overflow:visible hat mir nicht geholfen. Und line-height funktioniert ebenfalls nicht

2. Beim ausklappen der Unterseiten beginnt er das Hintergrundbild zu wiederholen, obwohl background-repeat: no-repeat gesetzt ist. Auch dieses Problem bekomme ich gerade nicht in den Griff.

„Bei derartig invalidem Code [...] kann man eigentlich nicht von Darstellungsfehler sprechen - eher von Darstellungswunder.“ [MudGuard]

Erwähnte ich, das ich Wunder mag?! Aber du hast recht... Viele Fehler addieren sich manchmal zwar zu einem richtigen Ergebniss, aber Fehler bleiben es trotzdem...

HTML und CSS sind nun wie gesagt fehlerfrei, aber Hintergrundbild und align muss ich nun noch irgendwie in den Griff bekommen... Hoffe ich darf weiter auf so konstruktive Hilfe hoffen...

Danke und Gruss... Mac

[Gunnar Bittersmann]

@@macmensa:

nuqneH

1. Der Text neben dem Bild wird nun nicht mehr zentriert dargestellt. vertical-align hilft mir ja nicht, da es ein Block Element ist.

Hilft aber, wenn es ein 'table-cell'-Element ist:
#nav a { display: table-cell }
Allerdings wirkt dann 'margin-bottom' nicht mehr.

Also lass es auf 'block' und regle den Abstand des Textes nach oben und unten über 'padding':
ersetze #nav a { padding-left: 10px }
durch   #nav a { padding: 13px 10px }

Die Höhe müsste dann um 26 Pixel kleiner sein; überhaupt wäre 'min-height' besser. Allerdings ist hier gar keine Höhenangabe notwendig, also weg damit.

2. Beim ausklappen der Unterseiten beginnt er das Hintergrundbild zu wiederholen, obwohl background-repeat: no-repeat gesetzt ist.

Für '#navi a'. Das Hintergrundbild hattest du aber dem 'li' gegeben.

HTML und CSS sind nun wie gesagt fehlerfrei

Aber nicht sinnvoll. Tabellenlayout? Pfui! Mit fünf ineinander verschachtelten Tabellen? Pfui! Pfui! Pfui! Pfui! Pfui!

Mystery meat navigation? Pfui!

Und warum schickst du IE < 7 in den Quirksmodus? [Jendryschik]

Qapla'

[macmensa]

Hallo Gunnar,

vielen Dank für deine Geduld...! Erwähnte ich die schlaflosen Nächte ?! :-)

Das ich Depp dem li statt dem a den Background zugewiesen hatte, schiebe ich nun einfach mal auf das Thema Schlafmangel...

HTML und CSS sind nun wie gesagt fehlerfrei

Aber nicht sinnvoll. Tabellenlayout? Pfui! Mit fünf ineinander verschachtelten Tabellen? Pfui! Pfui! Pfui! Pfui! Pfui!

Mystery meat navigation? Pfui!

Ich kann mir denken, das nicht nur du so denkst... Jedoch bin ich heilfroh, das ich bis hierher überhaupt soweit gekommen bin... Ich habe vor 2 Jahren das letzte mal was an der HP gemacht und damals zum erstenmal damit Kontakt gehabt... So gesehen beschränken sich meine generellen HP und speziellen CSS Kenntnisse auf ca. 4-5 Wochen...

Also... für viele vielleicht Pfui... Für mich ein riesen Erfolg und ich bin glatt ein bisschen stolz auf das bisher erreichte... *g*

Und warum schickst du IE < 7 in den Quirksmodus? [Jendryschik]

Öhm... bisher keine Ahnung was das bedeutet, aber ich werde mich dem Link und der Einführung nun widmen...

Nun aber noch zu einer vorläufig letzten Frage betreffs meines kleinen Projektes...

Hier nochmal der aktuelle Link Neue Testseite

Mit der momentanen Variante des ausklappens bremse ich mich gerade selber aus. Im Menü ISS habe ich das mal verdeutlicht. Das Untermenü "Chronik" ist auf diese Weise nicht mehr zu erreichen, da das kollabieren des Blocks den Zugang versperrt. Ich habe zwar die Möglichkeit die 3. Ebene konstant einzublenden, aber das wäre ja nicht wirklich meine Intention. Gibt es hier eine elegante Lösung?

z.B. in der Art, das ausgeklappte 3. Ebenen solange ":active" bleiben, bis :hover wieder eine 1. Ebene berührt? wenn ja, wie wäre hier ein Lösungsansatz?

Södele... das war es dann wohl erstmal für Heute... Nochmals vielen Dank an alle Beteiligten...

Gruss Mac