Design Clean
    >> Tipps zum anpassen

Boxen-Slider

Inhalt in rechter Box wechseln

boxslider

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"><!--
Und am Ende schliessen mit : --></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




Hier wurde die Seite https://clean-test.de.tl/nix.htm eingebunden.

- die Seite wurde in der Navi versteckt
- nur auf der Seite wurden alle div + table entfernt
- im Feld "Text UNTER Design" wurde dieser Inhalt eingefügt
- Inhalt wurde nur für diese eine Seite sichtbar gemacht
- so lässt sich auch eine Seite in der Mediabox aufrufen

Man muss darauf achten, das die Seite hier nur soviel Inhalt bekommt, wie diese Box auch an Höhe hat.

Wer mehr Infos dazu benötigt: Kontakt
clean-test.de.tl: Heute :18 Aufrufe



Auf "autostart" habe ich verzichtet. Klicke Play im Player.

nach Oben