mt: Ebenen stapeln, anzeigen und verstecken nur mit CSS

Hallo,

ich möchte etwas umsetzen, weiss aber nicht wie ich es anfangen soll - was genau versuche ich gleich zu erklären...
wie ich ebenen  in css stapel weiss ich - mit z-index aber darum geht es wahrscheinlich nicht..

Folgende Ausgangsvorstellung:

Eine waagerechte Tab-Navigation (Liste) mit drei oder vier Inhaltspunkten. Die entsprechenden Inhalte sollen bei Klick auf den entsprechenden Link alle an der selben Stelle erscheinen - so als ob sie übereinander gestapelt wären und je nach Link die Sichtbarkeit ausgetauscht wird.

Das ganze soll ohne jegliches Javascript auskommen und nur mit CSS realisiert werden.
Ich dachte so in Richtung unordered list und links aber ich bin mit meinem Latein am Ende denn nichts funktioniert und ich teste und recherchiere jetzt schon zwei Tage.

Die Inhaltsfläche ist in der Breite festgelegt in der Höhe aber flexibel und die Schriftskalierung zu ermöglichen.

Wenn irgendwer verstanden hat was ich hier versuche und irgendwo ein Beispiel kennt bzw. eine Lösung parat hat - ich bin auch für die kleinste Idee dankbar.

Gruß und Dank im Voraus

mt

  1. Hallo mt.

    Die entsprechenden Inhalte sollen bei Klick auf den entsprechenden Link alle an der selben Stelle erscheinen - so als ob sie übereinander gestapelt wären und je nach Link die Sichtbarkeit ausgetauscht wird.

    Das Prinzip wird bei A List Apart unter „Hybrid CSS Dropdown“ erklärt. An Stelle von :hover kannst du natürlich :active verwenden, aber sei dir bewusst, dass hier die Maus bzw. Taste gedrückt gehalten werden muss.

    Ohne JS wirst du das ganze nur mit einem Klick allein nicht hinbekommen.

    Einen schönen Mittwoch noch.

    Gruß, Ashura, der sich für obiges dumm und dusselig gesucht hat.

    --
    sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
    „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
    [HTML Design Constraints: Logical Markup]

    1. Hallo Ashura

      danke für das dumm und dusselig suchen.
      Den Beitrag hatte ich auch schon gefunden habe aber wohl die Nutzbarkeit nicht gesehen. Ich vermte mal, ich muss die erscheinende unternaviation in meine Inhaltsbereiche umwandeln.

      Ich werde das jetzt mal versuchen und dann ein Feedback geben.

      Wenn`s ohne js nicht geht dann muss ich es halt nehmen obwohl mir das widerstrebt.

      Gruß

      mt

      Hallo mt.

      Die entsprechenden Inhalte sollen bei Klick auf den entsprechenden Link alle an der selben Stelle erscheinen - so als ob sie übereinander gestapelt wären und je nach Link die Sichtbarkeit ausgetauscht wird.

      Das Prinzip wird bei A List Apart unter „Hybrid CSS Dropdown“ erklärt. An Stelle von :hover kannst du natürlich :active verwenden, aber sei dir bewusst, dass hier die Maus bzw. Taste gedrückt gehalten werden muss.

      Ohne JS wirst du das ganze nur mit einem Klick allein nicht hinbekommen.

      Einen schönen Mittwoch noch.

      Gruß, Ashura, der sich für obiges dumm und dusselig gesucht hat.