find-templates

Linkgestaltung

Blätterfunktion auf Seiten

- übersichtlicher Seiteninhalt
- keine langen Scrollbalken mehr
- die verlinkte Seiten sind nicht in der Navigation sichtbar
- das "Verstecken" ist mit dem Extra versteckte Seiten möglich

Schritt 1: Der HTML-Code für verlinkten Text

- auf "Eigene Seiten editieren"
- wähle Seite(n) aus, wo Blätterfunktion hinein soll
- im Editor (Werkeugleiste) oben links auf "Quellcode" klicken
- Seiteninhalt wird nun als HTML-Code angezeigt
- füge folgenden HTML-Code vor deinem gesamten Seiteninhalt ein
- oder am Ende deines Seiteninhaltes einfügen

<div class="linkfeld">
  <a title="Titel" class="weiter" href="/Seite.htm">1</a>
  <a title="Titel" class="weiter" href="/Seite.htm">2</a>
  <a title="Titel" class="weiter" href="/Seite.htm">3</a>
  <a title="Titel" class="weiter" href="/Seite.htm">4</a>
  <a title="Titel" class="weiter" href="/Seite.htm">5</a>
</div>
<br style="clear: both;" />

- ersetze im Code /Seite.htm durch die Adresse, auf die verlinkt werden soll.
- füge bei Titel einen Infotext ein (nützlich für Suchmaschinen)
- dieser Titel wird bei Mauskontakt auch sichtbar

Schritt 2: Der CSS Code für das Aussehen

- User mit Baukasten-Design "CSS" : Einfügen im Feld "css ohne style tags"
- alle anderen Baukasten-Designs: Einfügen im Feld "Text über Design", vor dem --> </style>

/* Position Linkfeld */
.linkfeld {
 width: auto;
 overflow: hidden;
 float: right;
 margin: 15px; }

/* Aussehen der Links */
a.weiter {
 float: left;
 display: block;
 padding: 2px 5px 2px 5px;
 margin: 2px;
 border: 1px solid #c9c9c9;
 text-decoration: none;
 color: #000000;
 font-size: 14px; }

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

- im CSS-Code die erste Codezeile
- hat ein float: right;
- ändere es um in float: left;