Boxen-Slider

Inhalt in rechter Box wechseln

Um eine �berlange rechte Box zu vermeiden, oder um rechte Boxen auf einheitliche H�hen zu bringen, eignet sich dieser Boxen-Slider. Mit "Klick" auf den Button "mehr" f�hrt der zweite Inhalt der Box ein.

Siehe meine 2. Box hier Rechts -->

Schritt 1: Der HTML-Code

- Einloggen in Homepage
- auf "Design" klicken
- dort unten auf "erweiterte Einstellungen"
- dort finden wir das Feld "rechte Box"

<div class="tabs">

    <input type="radio" name="tabs" id="tabone" checked="checked">
    <label for="tabone">  TEXT 1 </label>

    <div class="tab">
    Hier Inhalt f�r das erste Feld.
    </div>

    <input type="radio" name="tabs" id="tabtwo">
    <label for="tabtwo">  TEXT 2 </label>

    <div class="tab">
    Hier der Inhalt, der bei Mausklick sichtbar werden soll
    </div>

</div>

Wer Design "Clean" mit mehreren Boxen nutzt
(das w�re diese Beschreibung : zus�tzliche Boxen )
muss den genannten HTML-Code zwischen seinem <div class="boxen"> und </div> einf�gen.
Siehe auch > > Beispiel-Grafik < < HTML-Code rechte Box

Schritt 2: Der CSS-Code

- gehe auf "Extras"
- w�hle dort das Feld "Eigener <head> - Inhalt"
- oder .... das Feld "Text �ber Design"

.tabs {
    display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; 
    -webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap; }

/* Die beiden Button zum Inhalt wechseln */
.tabs label {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;-ms-flex-order: 1;order: 1;
    display: block;
    padding: 0rem 1rem;
    margin-right: 0.5rem;
    cursor: pointer;
    background: #90CAF9;
    font-weight: bold;
    font-size:14px;
    transition: background ease 0.2s; }

/* die beiden DIV mit Inhalt */
.tabs .tab {
    -webkit-box-ordinal-group: 100;-webkit-order: 99;-ms-flex-order: 99;order: 99;
    -webkit-box-flex: 1;-webkit-flex-grow: 1;-ms-flex-positive: 1;flex-grow: 1;
    width: 100%;
    display: none;
    padding: 1rem 0rem;
}

.tabs input[type="radio"] {position: absolute;opacity: 0;}
.tabs input[type="radio"]:checked + label { background: #fafafa; }
.tabs input[type="radio"]:checked + label + .tab { display: block; }
label { border:1px solid #ccc; margin-left:10px;}

In den bestehenden CSS-Code bei Euch mit einf�gen. Vor eurem --> </style>

Wer noch keinen CSS-Code verwendet:
Vor diesem CSS-Code f�ge ein: <style type="text/css"></style>

Auf jeder Seite eine andere Box

es ist auch m�glich, das auf jeder Seite ein anderer Boxen-Inhalt angezeigt wird :
Beschreibung hier : Jede Seite mit anderem Boxen-Inhalt

FB Messenger:

Anklicken und im Messenger schreiben

weitere Tutorials :

Boxen

mehr

Boxen-Slider

Inhalt in rechter Box wechseln

Schritt 1: Der HTML-Code

Schritt 2: Der CSS-Code

Auf jeder Seite eine andere Box

FB Messenger:

weitere Tutorials :

Seitentipps

Testbox 1

Testbox 2

Boxen-Slider

Inhalt in rechter Box wechseln

Schritt 1: Der HTML-Code

Schritt 2: Der CSS-Code

Auf jeder Seite eine andere Box

Forum Login

Info zum Login

FB Messenger:

weitere Tutorials :

Seitentipps

Testbox 1

Testbox 2