Design Clean
    >> Tipps zum anpassen

Tabmenu

Blätterfunktion II

eine weitere Möglichkeit zum Blättern im Seiteninhalt . Nennt man auch "content-slider", oder "Tab-Slider", oder auch "Tab-Menü". Es funktioniert mit reinem CSS. Kann allerdings nur einmal - pro Seiteninhalt - eingefügt werden.

Der Klimawandel
macht sich auch auf der Insel Sylt bemerkbar. Im Februar 2016 gelang mir am Oststrand in List diese einmalige Aufnahme. Es lag dort ganz unscheinbar in der Sonne, hatte mich bereits im Auge. Mit der nächsten Welle war es auch schon wieder verschwunden.
Mein Wohnort
Viele User kennen mich nur von Forenbeiträgen oder Tutorials. Da passt hier doch auch mal was privates. Ein Foto der Straße, in der ich wohne. Hinten links, am Ende, da wohne ich. Ehrlich ! Mir fiel jetzt auch nichts anderes ein.
Flensburg
Bleiben wir gleich bei privaten Details. In Flensburg habe ich 10 Jahre gelebt. Nun zog es mich von der Ostsee ... an die Nordsee. Da ist die See viel lebendiger - und die Umgebung ruhiger. Ich bin ja salzwasser-resistent und ziemlich windschnittig ^^
Die Insel Sylt
Ich pendel täglich auf die Insel und zurück. Das hat auch den Grund, warum meine Antworten auf Eure Fragen etwas länger dauern können. Ich bin 10 Stunden aus dem Haus - wenn die Züge pünktlich fahren. Das tun sie zur Zeit nicht. Auf der Strecke haben 90 Zugwagen Ihre Zulassung verloren.


In meinem "Impressum" eine weitere Möglichkeit :   >> Demo Impressum

Tipp für Bilder:
Ich habe im Beispiel meine Instagram-Bilder verwendet.
Höhe und Breite haben den gleichen Wert (alle 4 Seiten gleich lang).
Oder mit GIMP oder Photoscape zuschneiden.
Quadratische Bilder ermöglichen rechts daneben mehr Text.


Schritt 1: Der HTML-Code für Seiteninhalt

- auf "Seiten"
- wähle eine Seite aus
- im Editor (Werkzeugleiste) auf "Quellcode" klicken
- die Seite ist nun in HTML-Code-Ansicht
- an gewünschter Stelle einfügen:
<div class="tabbox">

  <input type="radio" name="tabbox" id="tab_1" checked="checked">
  <label for="tab_1">  Titel 1 </label>

      <div class="inhalt">
      Hier Dein Inhalt hinein für DIV 1
      </div>

  <input type="radio" name="tabbox" id="tab_2" checked="checked">
  <label for="tab_2"> Titel 2 </label>

      <div class="inhalt">
      Hier Dein Inhalt hinein für DIV 2
      </div>

  <input type="radio" name="tabbox" id="tab_3" checked="checked">
  <label for="tab_3"> Titel 3 </label>

      <div class="inhalt">
      Hier Dein Inhalt hinein für DIV 3
      </div>

  <input type="radio" name="tabbox" id="tab_4" checked="checked">
  <label for="tab_4"> Titel 4 </label>

      <div class="inhalt">
      Hier Dein Inhalt hinein für DIV 4
      </div>

</div>


Bild mit Text einfügen ?
Im obigen HTML-Code ersetze Hier Dein Inhalt hinein für DIV durch :
<img style="width:200px; float:left; margin-right:20px;" src="GRAFIKADRESSE" alt="">
 Und hier der Text, der sich neben dem Bild platziert


Schritt 2: Der CSS-Code

<style type="text/css">
<!-->
.tabbox {
     display: flex; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; 
    -webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;
     padding-top: 1em;
     box-shadow: 5px 5px 15px #555; }

/* Button zum Inhalt wechseln */
.tabbox label {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 1;-ms-flex-order: 1;order: 1;
    display: block;
    padding: 0rem 1rem;
    margin-right: 0.5rem;
    cursor: pointer;
    background: #DDDDDD;
    font-weight: bold;
    font-size: 14px;
    border:1px solid #ccc;
    transition: background ease 0.2s; }

/* die DIV mit Inhalt */
.tabbox .inhalt {
    -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;
    margin-top: 2px;
    background: #FFFFFF; }

.tabbox input[type="radio"] { position: absolute; opacity: 0; }
.tabbox input[type="radio"]:checked + label { background: #fafafa; }
.tabbox input[type="radio"]:checked + label + .inhalt { display: block; }
-->
</style>
Ich empfehle diesen CSS-Code mit im Seiteninhalt einzufügen, wenn dieser "content-slider" auch auf anderen Seiten eingefügt wird. Er kann dann auf jeder Seite ein anderes Aussehen bekommen, z.B. ohne Schatten (box-shadow:) , andere Button-Farben (background:)
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 :29 Aufrufe



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

nach Oben