Design Clean
    >> Tipps zum anpassen

Blaetterfunktion

Blätterfunktion im Seiteninhalt

1 2 3 4 5

Seiten mit viel Inhalt (bzw. mehreren Themen / Kategorien / News) lassen sich mit einer Blätter-Funktion auf mehrere Seiten verteilen. Ein endloses "Scrollen" können wir damit vermeiden. Es ist aber etwas aufwendiger, wenn die Inhalte schon bestehen. Aber umsetzbar, mit dieser "Schritt-für-Schritt-Anleitung". Die 5 Beispiel-Button sind hier nicht verlinkt.

1 2 3 4 5



Überlege Dir als erstes, auf wieviele Seiten Du längere Inhalte verteilen möchtest.
In diesem Beispiel möchten wir unseren Inhalt (und Blätterfunktion) auf 5 Seiten verteilen.


Schritt 1: Neue Seiten erstellen
  • wir gehen auf "Seiten"
  • wir erstellen 4 neue Seiten
  • Seitentitel z.B. mit Nummerierung
  • News 1 / News 2 / News 3 u.s.w.

  • im Editor oben auf "Quellcode"
  • 5 Seiten bekommen HTML-Code:
  • immer zweimal - siehe Grafik Rechts

Tipp vor dem Einfügen:
Um zu vermeiden, das Du auf 5 Seiten über 50 Links im HTML-Code einfügen musst, kopiere dir folgenden Code ersteinmal in dem auf dem PC vorhandenen "Editor". Dann fügst Du die 5 Links ein. Und nun kopierst Du den fertigen HTML-Code, um diesen auf 5 Seiten, je zweimal ... einzufügen.

<div class="linkfeld">
  <a title="Titel" class="weiter blue" href="/Seitentitel_1.htm">1</a>
  <a title="Titel" class="weiter" href="/Seitentitel_2.htm">2</a>
  <a title="Titel" class="weiter" href="/Seitentitel_3.htm">3</a>
  <a title="Titel" class="weiter" href="/Seitentitel_4.htm">4</a>
  <a title="Titel" class="weiter" href="/Seitentitel_5.htm">5</a>
</div>
<br style="clear: both;">

Hier wird Dein Seiteninhalt platziert. Also Texte , Bilder , ect.

<div class="linkfeld">
  <a title="Titel" class="weiter blue" href="/Seitentitel_1.htm">1</a>
  <a title="Titel" class="weiter" href="/Seitentitel_2.htm">2</a>
  <a title="Titel" class="weiter" href="/Seitentitel_3.htm">3</a>
  <a title="Titel" class="weiter" href="/Seitentitel_4.htm">4</a>
  <a title="Titel" class="weiter" href="/Seitentitel_5.htm">5</a>
</div>
<br style="clear: both;">

Du siehst im HTML-Code den Klassennamen blue.
Wenn HTML-Code in Seite 2 eingefügt wird, muss blue in die nächste Codezeile.
Wenn HTML-Code in Seite 3 eingefügt wird, muss blue wieder eine Zeile tiefer.
Wenn HTML-Code in Seite 4 eingefügt wird, muss blue wieder eine Zeile tiefer.
Klassenname blue zeigt in Blätterfunktion farbig aktuell geöffnete Seite an.



Schritt 2: Der CSS-Code für das Aussehen
  • auf "Extras"
  • das Extra "Eigener Head-Inhalt
  • dort CSS-Code einfügen
  • siehe Beispielgrafik rechts

  • ODER: im Feld "Text ÜBER Design"
  • das wäre bei "Design"
  • dann "Designeinstellungen"
  • auf "Erweitere Designeinstellungen"

.linkfeld { width: auto; overflow: hidden; float: right; margin: 15px; }

/* Aussehen der Linkfelder */
a.weiter { 
    float: left; /* Linkfelder nebeneinander */
    display: block; 
    padding: 1px 5px 1px 5px; /* Innenabstand */
    margin: 2px; /* Außenabstand */
    border: 1px solid #c9c9c9; /* Rahmen */
    border-radius:4px; /* abgerundete Ecken */
    text-decoration: none!important; /* nicht unterstrichen */
     color: #000000; /* Schriftfarbe */
     font-size: 14px;  /* Schriftgröße */
}

/* Farbe für aktuell geöffnete Seite */
a.blue { 
    color: #FFFFFF; 
    background-color: #12A5F4;  
}

/* Hover Farbe bei Mauskontakt */
a.weiter:hover {
    color: #FFFFFF; 
    background-color: #202020; 
 }



Schritt 3: Die überflüssigen Seiten aus der Navigation entfernen

Das geht mit dem Extra "versteckte Seiten". Das Tutorial im Forum habe ich gerade erst erneuert:
http://www.homepage-baukasten.de/forum/viewtopic.php?t=19426


Fragen dazu ? Gerne über das Kontakt-Formular. Findet Ihr oben bei mir im Headerfeld



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 :1 Aufrufe



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

nach Oben