Blaetterfunktion

Blätterfunktion im Seiteninhalt

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.




Ü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