Da es ja immer wieder Probleme gibt mit einer CSS Textnavigation - hier das TUT

Wir fangen an:

Als erstes setzen wir den Masterborder auf 150 Pixel Höhe.
In dem Masterborder ziehen wir eine Tabelle auf.

Als nächstes schreiben wir die Navigation.

Nun fangen wir mit den CSS-Formatvorlagen an.
Dazu klicken wir auf Text und anschließend auf Formatvorlage verwalten.
In dem sich öffnenden Fenster klicken wir auf Neu.

Das sieht dann so aus.

Jetzt klicken wir auf Benutzerdefinierte Formatvorlage und geben dort den Namen der Formatvorlage ein.
Da diese Formatvorlage ja auf jeder Seite verfügbar sein soll, klicken wir ebenfalls Site-übergreifend an.
Ich empfehle immer sprechende Namen zu verwenden. Wenn man nach längere Zeit wieder an der Seite etwas macht, dann kann man mit sprechenden Namen mehr anfangen als wenn wenn eine Formatvorlage
z.B. uuewhf82 genannt hat.

Da wir die Schriftart und die Position ändern wollen fangen wir mit der Formatvorlage navigationstext an.
Nach dem Klicken auf OK sehen wir dieses Fenster.

Hier habe ich die Schriftart, das Design, Größe und die Farbe eingestellt.
Ganz wichtig ist, das der Haken bei Automatisch rausgenommen wird.
Da wir die Position auch etwas ändern wollen klicken wir auf Absatz.

Hier wurde die Abstände für Oben, Unten, Links und Rechts angegeben.
Wenn noch ein Hintergrund gewünscht wird, können wir das machen, indem wir auf den Reiter Hintergrund klicken. Dort auf Durchsuchen klicken und einen Hintergrund auswählen.
Dies ist optional.

Zu Abschluss klicken wir auf OK. Damit haben wir die erste Formatvorlage erstellt, die wir auch gleich benutzen werden.
Dazu markieren wir den Text mit strg&a .
In den Zelle-Eigenschaften klicken wir auf den Auswahlbutton und klicken auf die Formatvorlage navigationstext.

Nach der Auswählen sehen wir sofort das Ergebnis.

Nun brauchen wir noch ein paar Klassen für die Links.
Der Weg ist immer der gleiche. Wir gehen auf Text und dann auf Formatvorlage verwalten.
Da wir jetzt die Formatvorlagen für die Verlinkung machen wollen, klicken wir auf den Auswahlbutton neben Normal (p) und suchen nach Link (A) und wählen ihn aus.

Ich der Formatvorlage den Namen linka gegeben. Das ist wichtig, da wir den Namen gleich noch mehrmals brauchen werden. Ebenso wird wieder Site-übergreifend ausgewählt und klicken auf OK.
Dieses Fenster kennen wir schon. Hier geben wir die gleichen Einstellungen wie bei der Formatvorlage navigationstext ein. Aber nur auf der ersten Seite. Andere Einstellungen brauchen wir nicht.

Nun geht es munter weiter, indem wir da gleiche Spiel wiederholen.
Der einzige Unterschied ist, das wir jetzt nicht Link (A) auswählen, sondern Link:aktiv (A:active)
Den Namen vergeben wir, deshalb linka merken, linka:aktiv Das ist nur eine Hilfe, damit wir wissen welche Formatvorlage für welchen Linktyp ist.

Nach dem Klicken auf OK sehen wir wieder unser bekanntes Fenster.
Außer das wir den Haken bei Automatisch rausnehmen, nehmen wir keine Veränderungen vor.

Dieses machen wir jetzt mit allen anderen Linktypen.
link:active, link:hover, link:visited und link:link

Nur beim Erstellen der Formatvorlage link:hover machen wir eine Änderung. Wir wollen ja, dass sich die Farbe ändern, wenn wir mit der Maus darüberfahren, also der Hovereffekt.

Wenn wir bis hierhin alles richtig gemacht haben, dann sollten wir jetzt 5 Formatvorlagen erstellt haben.

Jetzt kommen wir zur Verlinkung. Da wir ja erst eine Seite haben, gehen wir auf die Siteansicht.
Die Seite Home benennen wir in Startseite um.
Nun klicken wir strg&c ( kopieren ) zusammen und anschließend klicken wir so oft strg&v ( Einfügen ) wie wir Seiten brauchen. Hier brauchen wir noch 5 Seiten.
Wir haben jetzt 5X Kopien der Startseite. Die benennen wir jetzt entsprechend unserer Navigation um.

Jetzt gehen wir wieder in die Bearbeitungsansicht der Startseite.
Wir markieren nun nur das Wort Startseite.

In den Zelle-Eigenschaften klicken wir auf Link und anschließend suchen wir die entsprechende Seite aus. Hier also sie Startseite.

So sieht es nach den Verlinkungen aus.
Diese beiden Schritte machen wir nun für jede Verlinkung.

Jetzt fehlt noch der letzte Schritt, nämlich die Verknüpfung mit der Formatvorlage linka.
Wir klicken einmal doppelt auf das Wort Startseite.
Danach klicken wir in den Zelle-Eigenschaften auf den zweiten Reiter ( der ist jetzt neu hinzugekommen ) und wählen unter Benutzerdefinierte Formatvorlage linka aus.

Diese Schritte wiederholen wir nun für jeden Link in der Navigation.

Am Ende sieht es dann so aus, womit wir auch fertig sind mit unserer CSS Text Navigation

Viel Spaß beim Nachbauen.