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 das Stylesheet als auch die HTML-Datei. Du darfst den Code natürlich beliebig erweitern und modifizieren.

Zunächst einmal der benötigte CSS Code:


Beispiel:

.tabreiter
{
    width: 100%;
    height: 220px;
}   
 
.tabreiter ul,
.tabreiter li
{
    margin: 0;
    padding: 0;
    list-style: none;
}
 
.tabreiter,
.tabreiter input[type="radio"]:checked + label
{
    position: relative;
}
 
.tabreiter li,
.tabreiter input[type="radio"] + label
{
    display: inline-block;
}
 
.tabreiter li > div,
.tabreiter input[type="radio"]
{
    position: absolute;
}
 
.tabreiter li > div,
.tabreiter input[type="radio"] + label
{
    border: solid 1px #ccc;
}
 
.tabreiter
{
    font-family: Arial, Sans-serif;
    font-size: 1em;
    font-weight: 400;
    color: #404040;
}
 
.tabreiter li
{
    vertical-align: top;
}
 
.tabreiter li:first-child
{
    margin-left: 8px;
}
 
.tabreiter li > div
{
    top: 33px;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 8px;
    overflow: auto;
    background: #fff;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
 
.tabreiter input[type="radio"] + label
{
    margin: 0 2px 0 0;
    padding: 0 18px;
    line-height: 32px;
    background: #f1f1f1;
    text-align: center;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
 
.tabreiter input[type="radio"]:checked + label
{
    z-index: 1;
    background: #fff;
    border-bottom-color: #fff;
    cursor: default;
}
 
.tabreiter input[type="radio"]
{
    opacity: 0;
}
 
.tabreiter input[type="radio"] ~ div
{
    display: none;
}
 
.tabreiter input[type="radio"]:checked:not(:disabled) ~ div
{
    display: block;
}
 
.tabreiter input[type="radio"]:disabled + label
{
    opacity: .5;
    cursor: no-drop;
}

Anzeige:



Jetzt musst du das ganze natürlich noch in dein HTML einbinden. Das sieht dann, bezugnehmend auf das eben gezeigte CSS Snippet, wie nachstehend beschrieben aus.


Beispiel:

<!DOCTYPE html>
 <html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="robots" content="noindex">
    <title>Code-Beispiel von Webmasterparadies.de</title>
    <link rel="stylesheet" href="tabreiter.css" type="text/css" />
</head>
<body>
<div class="tabreiter">
    <ul>
        <li>
            <input type="radio" name="tabreiter-0" checked="checked" id="tabreiter-0-0" /><label for="tabreiter-0-0">Lorem Ipsum</label>
            <div>
                <h3>Lorem Ipsum</h3>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. </p>
            </div>
        </li><li>
            <input type="radio" name="tabreiter-0" id="tabreiter-0-1" /><label for="tabreiter-0-1">Werther</label>
            <div>
                <h3>Werther</h3>
                <p>Eine wunderbare Heiterkeit hat meine ganze Seele eingenommen, gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße. Ich bin allein und freue mich meines Lebens in dieser Gegend, die für solche Seelen geschaffen ist wie die meine. Ich bin so glücklich, mein Bester, so ganz in dem Gefühle von ruhigem Dasein versunken, daß meine Kunst darunter leidet. Ich könnte jetzt nicht zeichnen, nicht einen Strich, und bin nie ein größerer Maler gewesen als in diesen Augenblicken. Wenn das liebe Tal um mich dampft, und die hohe Sonne an der Oberfläche der undurchdringlichen Finsternis meines Waldes ruht, und nur einzelne Strahlen sich in das innere Heiligtum stehlen, ich dann im hohen Grase am fallenden Bache liege, und näher an der Erde tausend mannigfaltige Gräschen mir merkwürdig werden; wenn ich das Wimmeln der kleinen Welt zwischen Halmen, die unzähligen, unergründlichen Gestalten der Würmchen, der Mückchen näher an meinem Herzen fühle, und fühle die Gegenwart des Allmächtigen, der uns nach seinem Bilde schuf, das Wehen des Alliebenden, der uns in ewiger Wonne schwebend trägt und erhält; mein Freund!</p>
            </div>
        </li><li>
            <input type="radio" name="tabreiter-0" id="tabreiter-0-2" /><label for="tabreiter-0-2">Kafka</label>
            <div>
                <h3>Kafka</h3>
                <p>Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden sich, umdrängten den Käfig und wollten sich gar nicht fortrühren.Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben.</p>
            </div>
        </li><li>
            <input type="radio" name="tabreiter-0" id="tabreiter-0-3" disabled="disabled" /><label for="tabreiter-0-3">Trappatoni</label>
            <div>
                <h3>Trappatoni 1998</h3>
                <p>Es gibt im Moment in diese Mannschaft, oh, einige Spieler vergessen ihnen Profi was sie sind. Ich lese nicht sehr viele Zeitungen, aber ich habe gehört viele Situationen. Erstens: wir haben nicht offensiv gespielt. Es gibt keine deutsche Mannschaft spielt offensiv und die Name offensiv wie Bayern. Letzte Spiel hatten wir in Platz drei Spitzen: Elber, Jancka und dann Zickler. Wir müssen nicht vergessen Zickler. Zickler ist eine Spitzen mehr, Mehmet eh mehr Basler. Ist klar diese Wörter, ist möglich verstehen, was ich hab gesagt? Danke. Offensiv, offensiv ist wie machen wir in Platz. Zweitens: ich habe erklärt mit diese zwei Spieler: nach Dortmund brauchen vielleicht Halbzeit Pause. Ich habe auch andere Mannschaften gesehen in Europa nach diese Mittwoch. Ich habe gesehen auch zwei Tage die Training. Ein Trainer ist nicht ein Idiot! Ein Trainer sei sehen was passieren in Platz. In diese Spiel es waren zwei, drei diese Spieler waren schwach wie eine Flasche leer! Haben Sie gesehen Mittwoch, welche Mannschaft hat gespielt Mittwoch? Hat gespielt Mehmet oder gespielt Basler oder hat gespielt Trapattoni? Diese Spieler beklagen mehr als sie spielen! Wissen Sie, warum die Italienmannschaften kaufen nicht diese Spieler? Weil wir haben gesehen viele Male solche Spiel!</p>
            </div>
        </li>
    </ul>
</div>
</body>
</html>

Anzeigebeispiel:

Das folgende Bild vermittelt dir einen ersten Eindruck, wie das Menü aussieht. Klicke die Grafik einfach an, um sie in voller Größe zu sehen.

Tabreiter mit CSS erstellen
So könnte das Ergebnis aussehen.

Folge ansonsten einfach diesem Link (öffnet sich in einem neuen Tab), um dir das Beispiel komplett im Browser anzusehen.

Browser Test

Das oben genannte CSS Snippet habe ich überdies in folgenden Browsern getestet.

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

In den genannten Browsern funktioniert das Snippet dabei einwandfrei. Ich kann jedoch leider nicht versichern, dass dieses CSS Snippet auch in hier nicht aufgeführten Browsern funktioniert.


Anzeige:


9 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?

    • 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

    • 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%;
      }

      • Hi@all
        Das mit der Höhe funktioniert bei mir nicht.
        Selbst wenn ich alle vorhergehende Elemente auf hight:100% setze wird der eigentliche Inhalt nur mit fest eingestellter Größe angezeigt.

  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