Tabreiter mit CSS erstellen

Es ist im Grunde genommen ganz einfach möglich, verschiedene Tabreiter mit CSS zu erstellen. Dadurch lassen sich Inhalte leichter organisieren. Neue Unterseiten musst du außerdem nicht mehr erstellen. Der Betrachter kann dann ganz bequem per Registerreiter zu den verschiedenen Inhalten wechseln.

Ich zeige dir dazu in diesem Artikel, wie du Tabreiter mit CSS erstellen und in deine Website einbauen kannst.

 

Ansprechende Tabreiter mit CSS erstellen

Das Beste an dieser Lösung ist, dass sie auf den Einsatz von JavaScript völlig verzichtet. Die Tabreiter sind dabei mit reinem CSS erstellt und gepflegt. Du kannst das Beispiel zudem beliebig erweitern oder kürzen. Einzelne Tabs kannst du sogar deaktivieren.

Einziger Wermutstropfen: Mit ganz alten Browsern funktioniert der Spaß hingegen nicht. Jedoch klappt es immerhin mit allen aktuellen Browsern (siehe Liste unten).

Ich habe ebenfalls das nachstehende Code Beispiel in einer ZIP-Datei für dich zum bequemen Download zusammengefasst:

Hier findest du sowohl Stylesheet als auch die HTML-Datei.

 

Beispiel (CSS):

 


Anzeige:



 

Beispiel (HTML):

 

Anzeigebeispiel vollständig ansehen

 

Tabreiter mit CSS erstellen
So könnte das Ergebnis aussehen (Bild anklicken zum Vergrößern).

 

Kompatibilität

Dieses Script habe ich zudem in diesen Browsern getestet:

  • Google Chrome 31
  • Firefox 26
  • Internet Explorer 11
  • Opera 18
  • Safari (iPhone-Version, iOS 7.0.4)

In diesen Browsern klappte dabei alles einwandfrei. Ich kann jedoch leider nicht versichern, dass dieses Beispiel auch in älteren Browsern oder hier nicht genannten Browsern funktioniert.

 

8 Gedanken zu “Tabreiter mit CSS erstellen”

  1. Hallo, eine weitere Frage:
    Ich bekomme aktuell in dem Textfeld der Tabs keine Aufzählungszeichen sichtbar, gibt es da eine Möglichkeit?

    1. Hallo Andreas,

      leider ist das mit diesem CSS-Snippet nicht so einfach möglich. Mit dem CSS wird die Anzeige der Aufzählungszeichen manipuliert. Die einzelnen Tabreiter sind schon Aufzählungszeichen für sich.
      Du könntest aber bspw. eine neue CSS-Klasse definieren, mit der du den mit dieser CSS-Klasse formatieren Text in Listenform darstellen lässt.

  2. Hallo,
    der Artikel ist ja nun schon etwas älter ich finde die Darstellung eigentlich sehr gut, aktuell habe ich eigentlich nur ein einem so richtig zu kauen.
    Der Kasten nach dem Tab in dem der Lorem Ipsum Text steht hat ja einen festen Wert von height: 220px;
    wenn ich ihn nun variable machen möchte tut sich gar nichts.
    height: 100%; height:auto; oder auch wenn ich sage komm das maximale was du haben darfst ist max-height: 1000px; ignoriert er es konstant.

    Kann mir hier jemand einen Tip zu geben ich weiß das die Höhe durch die mutter kind Vererbung läuft nur wo muss ich drehen das es passt ?

    Danke und Gruß
    Chris

    1. Hallo Chris,

      ich nehme an, du hast für den body und html in deiner CSS-Datei keine separaten Einträge gemacht bzw. dir das Beispiel mit den nackten Code-Beispielen von oben angesehen, oder?

      Eine variable Angabe in der Höhe klappt nämlich dann, wenn du die Höhe des darüber liegenden Elements definierst. Fügst du also bspw. folgenden Code noch mit hinzu, kannst du auch die Höhe variabel gestalten, ohne sonst etwas an dem Beispiel ändern zu müssen:

      body, html {
      height: 100%;
      }

  3. Hallo.

    Erstmal vielen dank hierfür!
    Ich habe bei mir Tabs mit verschieden langen Inhalt daher wüsste ich gerne wie ich es anstelle das „height:auto“ funktioniert.
    Wenn ich das nämlich gegen deine vordefinierte höhe austausche sind die Tabs nur noch ein paar Pixel hoch.
    mFg

  4. Hallo,
    vielen Dank für die tolle Anleitung.
    was muss ich ändern, dass erst beim klicken der Tab Kontent sichtbar wird?

    Mein Wunsch wäre, dass am Anfang nur die Tabs (ohne deren Inhalt) angezeigt werden. Erst beim Klick soll dann der Tabinhalt angezeigt werden.

    Vielen Dank im Voraus.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.