Der einfachste Trick eine Navigation zu machen ist,
soviele HTML Seiten zu machen wie es Links gibt.
Auf jeder unter Seite ist die gleiche Navigation.
So bleibt die Navigation stehen, wenn man auf Links klickt.
Nur der Inhalt der Seite wechselt.


Links werden mit dem a Tag realisiert.
So sieht das aus;

<a href="Seite1.html">Seite1</a>

Wenn keine CSS Anweisung vorhanden ist, wird ein Link blau und unterstrichen.
Das ist ja nicht unbedingt das, was wir fuuml;r unsere Navigation brauchen
Wir machen also noch eine Klasse und nennen sie zum Beispiel Navi
Darin bestimmen wir die Schriftgrösse,
die Schriftfarbe,
den Abstand oben, links, unten und rechts
und dass der Link nicht unterstrichen werden soll.

Zusätzlich machen wir eine Klasse für den Inhalt der Seite.
Darin bestimmen wir die Schriftgrösse,
die Schriftfarbe
der Abstand oben, links, unten und rechts
und die Breite

Nun machen wir eine Direktansprache an alle Unterstriche
Ein Unterstrich macht man im HTML mit dem Tag <hr />

So ein Unterstrich geht dann uuml;ber das ganze Dokument.
Das möchten wir aber nicht.
Darum sagen wir ihm er solle
vom linken Rand 37px weg sein mit dem CSS Befehl margin-left
Dann soll er nicht mittig zentriert sein, wie es ein <hr /> normaler weise ist.
Er soll linksbündig sein mit dem CSS Befehl text-align
Er soll auch nur 444px breit sein mit dem CSS Befehl width

Für den Titel machen wir auch noch eine Klasse namens .Gross
Ihr sagen wir, die Schriftgrösse 28px,
Dass er 133px vom linken Rand weg sein soll;
und die Farbe

Dem body Tag geben wir das Attribut bgcolor mit und bestimmen eine Farbe.

Das ganze sieht nun so aus;




Ich habe auf alle drei Seiten etwas von mir geschriebener Text dazu getan, damit es besser aussieht.
Es wäre gut, wenn Du den Code oben abtippen würdest. So lernt man einfach am besten !

Schaue Dir das Beispiel an!




jetzt wäre es noch besser,
wenn die Links in der Navigation ihre Farbe wechseln würden beim mit der Maus darüber fahren !
Auch das lässt sich machen mit CSS
füge im Head in den style Block zusätzlich folgendes ein;




a oder auch a:link steht für den Zustand, der der Link einnimmt bevor etwas geschehen ist.
a:visited steht für den Zustand bei dem ein Link schon einmal angeklickt wurde früher.
Das macht besonders Sinn bei langen Linklisten. So weiss der User wo er schon war und wo nicht.
a:hover steht für die Links über die gerade die Maus fährt.
a:active steht für Links die geklickt wurden aber noch nicht losgelassen wurden.
Leider reagieren nicht alle Browser auf diese sogenannten Pseudoklassen gleich.
Es ist notwendig die Reihenfolge wie oben ein zu halten, damit es funktioniert.
Es gibt noch zusätzlich eine pseudoklasse focus;

Hier noch die Auflistung und richtige Reihenfolge wie sie auf der Seite selfhtml.org angegenben werden;



Hier der off-line Link zur selfhtml Seite

Falls Du on-line bist bitte diesen Link benutzen direkt zur betreffenden Seite auf selfhtml.org

Du kannst neben der Farbe
auch alles mögliche andere dazunehmen um den jeweiligen Zustand besser hervor zu haben.
Schriftgrösse mit font-size,
Schriftart mit font-style
oder eine ganz andere Schrift mit font-family
Hintergrundfarbe oder Bild mit background-color oder background-image
oder die dicke mit font-weight
u.s.w.

Ich habe hier noch eine Möglichkeit gemacht.
In der habe ich die Dicke bei :hover dick gemacht mit font-weight
Zusätzlich die Schriftgrösse auch bei :hover um ein pixel kleiner gemacht,
Bei den anderen muss die Dicke und die Schriftgrösse wieder auf normal gestellt werden!
Das wirkt auch noch gut.




Hier das abgeänderte Beispiel

Vielleicht ist Dir auch aufgefallen,
dass beim klicken auf den Link im ersten Beispiel
ein hässlicher viereckiger Rahmen erscheint um den Link.
Das soll anzeigen, dass der Link nun unter focus ist.
Um diesen störenden Rahmen aus zu schalten reicht CSS leider nicht mehr aus.
Dazu musst Du ein erstes mal etwas javascript anwenden.
Schreibe beim Link im Body zusätzlich diesen javascript Code;
onfocus="if(this.blur)this.blur()"
Das ganze sieht dann so aus;
<a href="Seite1a.html" class="Navi" onfocus="if(this.blur)this.blur()">
Denke daran, dass Du die angebrachten Änderungen auf allen drei HTML Seiten vornehmen musst!

Probiere aber auch eigene Kreationen aus!




Um eine Navigation auf der Seite zu plazieren gibt es sehr viele ganz verschiedene Wege.
Ein relativ einfacher ist sicher mit dem CSS Befehl float.
float heisst fliessen und meint genauer umfliessen.
Man kann also einem div mit einer Klasse den Befehl float mitgeben.
Wenn man gleich darunter ein zweites div anbringt, fliesst dieses um das erste herum.
Mit dem CSS Befehl height kann man diese Navigation beliebig weit nach unten ziehen.
So hat das zweite div mit der Klasse Inhalt gar nie die Möglichkeit
nach dem unteren Ende der Navigation auch auf der Seite der Navigation sich aus zu breiten.
Ausser man möchte das.
Dann wählt man die Höhe der Navi nur so hoch wie man möchte
Danach fliesst der Inhalt der Seite unter der Navi auch auf die Seite der Navigation,
und braucht von da an die ganze Seite.

Doch zuerst vielleicht ein einfacheres Beispiel;

Beispiel Text fliesst um Bilder
Damit Du die Wirkung von float besser verstehen kannst.

es ist ein Text in den abwechslungsweis rechts und links Bilder in den Text gestellt sind.
Der Text umfliesst die Bilder.
Nun bekommt aber nicht der Text das float sondern die Bilder !
Die Bilder werden umflossen

Wenn ein Bild am linken Rand ist mit einem float:left;,
geht das ohne Probleme, da der Text normalerweise linksbündig ist.
Wenn das Bild aber am rechten Rand stehen soll mit float:right;,
richtet sich das Bild am rechten Rand des Bildschirm aus.
Gibt man nun dem Text eine Breite,
damit er nicht zu breit wird und nur noch schlecht gelesen werden kann,
klebt das Bild trotzdem am Rechten Rand des Bildschirms.
Das sieht dann nicht so schön aus.
Der Trick ist auch dem Textblock eine Klasse mit zu geben.
Diese Klasse kommt nun um den ganzen Text und alle Bilder, die darin sind.
Nun richtet sich float:right; nicht mehr am rechten Bildschirmrand aus,
sondern am rechten Rand von der Klasse, die dem Text mit gegeben wurde.

Möchte man den Text etwas vom linken Rand des Bildschirmes weg haben
gibt man dem Text ein Padding:20px; mit.
Leider wirkt das nicht auf die Bilder !
Diese werden noch immer ohne Abstand vom Text umflossen.
Das stört sehr beim lesen des Textes.
Um nun auch noch zwischen den Bildern und dem Text einen Abstand hin zu kriegen,
muss man auch der Klasse, die den Bildern mitgegeben wird ein Padding geben.
Im Beispiel habe ich die Klassen flussrechts und flusslinks getauft.

Ich schreibe den Code für diese Datei nicht auf,
da sie nur funktioniert, wenn sehr viel Text dazu steht.
Mit dem Text gäbe das ein riesigen Code und würde hier der Rahmen sprengen.
Du kannst aber im Browser unter dem Menu "Ansicht"
"Quelle" oder beim Firefox "Seitenquelltext" anzeigen wählen.
Dann kommt der Code. Den kannst Du auch kopieren und in den HTML Editor einfügen.
Das ist sehr praktisch, da man das mit jeder Webseite im Internet machen kann !
So kannst Du auch von anderen Webseiten lernen wie sie gemacht wurden.

Nun wieder zur ursprünglichen Absicht mit float eine Navigation zu bauen;

Einen Schönheitsfehler hat die Sache noch.
Am besten sieht man das, wenn man sowohl dem div Navi wie dem div Inhalt eine andere Hintergrundfarbe gibt.
und beliebigen Text in den div Inhalt schreibt.
Weder padding noch margin bringen den Text etwas von der Navigation weg.
Selbst wenn man bei der Klasse navi und bei der Klasse inhalt
margin und padding dazugibt,(siehe Bild unten blaue Pfeile)
klebt der Text immer noch direkt an der Navi. (siehe Bild unten roter Pfeil)




Ein Trick gibt es allerdings.
Du machst nochmals eine Klasse und nennst sie zum Beispiel abstand.
Dieser Klasse gibst Du auch den Befehl float:left
die Breite machst Du so breit, wie Du möchtest, dass der Text zur Navigation Abstand hält.
Die Höhe machst Du etwas höher als die Höhe der Navi.
Nun fügst Du ein neues div zwischen das div Navi und das div inhalt und gibst ihm die Klasse abstand.
So kommst Du zu einer recht schönen Seiten Navigation.

Da ich jetzt keine Lust hatte gleich sieben solche Seiten zu machen,
habe ich statt einer Linkadresse zu einer der sieben anderen Seiten,
einfach einen Gartenhaag an die Stelle der Adresse hinein getippt.
Das darf man.
Der Gartenhaag sagt quasi; der Link geht hierher oder nirgendswo hin.
Oder mit anderen Worten, er wird erst später hineingeschrieben.

Die Links habe ich fast gleich gemacht wie im Beispiel oben.
Ich habe nur noch zusätzlich bei der Pseudoklasse :hover verlangt,
dass es doch unterstrichen wird.
Bei den anderen Pseudoklassen habe ich geschrieben text-decoration:none;
Es wird dann noch etwas deutlicher, dass das alles Links sind.
Ist aber sicher auch einfach Geschmackssache.

Hier der Code;
Ich habe bei den Codebeispielen als Einleitung immer nur <html> geschrieben.
Bei diesem Beipiel muss aber noch dieses oben drüber stehen;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Sonst wird es nicht richtig dargestellt.
Dieses Einleitung bestimmt welche Version HTML der Browser verwenden soll.
transitional ist ein nicht so strenger Typ.
Der lässt auch noch den einen oder anderen Fehler durch.
Daneben gibt es noch strikt
Das ist die strengste HTML Version
Eigentlich sollte man diese HTML Typangabe immer oben im Code hinschreiben.
Du kannst anstelle von
immer das folgende schreiben;




Hier kannst Du Dir das Resultat ansehen


Navigation mit Tabellen

Man kann eine Navigation auch mit Hilfe von Tabellen machen.
Eine Tabelle Wird mit dem HTML Tag <table> eröffnet,
und am Schluss so wieder abgeschlossen </table>.
Zusätzlich braucht es in dem Tabellen Tag verschachtelt einen Tag für die Zeilen;
<tr></tr>
In die Zeilen wiederum verschachtelt einen Tag für die Spalten; <td></td>
Wenn nicht mit Hilfe von CSS Klassen die Breite und Höhe bestimmt wird,
passt sich die Tabelle dem grössten Inhalt an.
So sieht eine Tabelle aus mit 3 Zeilen und 3 Spalten und einem border="1".


Genaueres kannst Du auf selfhtml.org erfahren

Hier der off-line Link
Hier der on-line Link

Und das ist der Code dazu;



Ich habe eine einfache Navigation gebauen mit Hilfe einer Tabelle.
Damit man sie überhaupt sehen kann, wenn noch nichts drin steht,
habe ich dem table Tag mit Direktansprache eine Höhe mitgegeben.
Dann habe ich eine Klasse gemacht mit dem Namen navi
Ihr habe ich eine Hintergrund Farbe mit gegeben mit background-color
Weil ein Tabellen Inhalt ohne zusätzliche Angaben
sowohl in der Horizontale wie in der Vertikale zentriert ist,
Musste ich ihr sagen, dass sie vertikal oben ausgerichtet sein soll, mit dem CSS Befehl;
vertical-align:top;
Damit der Inhalt etwas vom Rand weg kommt gab ich ein padding.
Wichtig ist hier aber vor allem die Breite mit dem CSS Befehl width.

Dazu habe ich nochmals eine Klasse erstellt mit dem Name inhalt
Auch ihr gab ich eine Hintergrundfarbe
Eine Schriftfarbe
Eine Schriftgrösse
Ein vertikal oben ausgerichtet
Ein padding
und eine Breite

Dazu habe ich wieder wie in den ersten Beispielen Pseudoklassen gemacht für die Links.
Dieses mal habe ich das unterstrichen bei der Maus darüber also bei der :hover Klasse weggelassen.
Dafür habe ich die Schrift gewechselt mit dem font-family

Die Tabelle selber ist sehr einfach.
Sie hat nur eine Zeile
und zwei Spalten
Der einen Spalte gab ich die Klasse navi mit
Der anderen die Klasse inhalt.
Versuche das Codebeispiel nach zu vollziehen!
Am besten schreibst Du es ab, dabei durchschaut man es am besten !



Hier kannst Du Dir das Resultat ansehen

Die Seiten für die Ente, den Fisch, den Vogel, den Elefanten, den Hummel, und den Frosch
habe ich mir erspart,
und dafür anstelle der Adresslinks im href wieder nur einen vorläufigen Gartenhaag gesetzt.


Navigationen mit position absolut

Am eigenwilligsten kann man eine Navigation sicher mit absolut gesetzten ID's machen.
Dazu habe ich auch ein Bespiel gemacht, dass ich nicht mehr bis ins Detail erklären muss.
Nur so viel:
Es wird für jeder Link eine eigen CSS ID gemacht.
Diese können dann individuell platziert werden.
Unter den Links hat es noch ein Bild.
Damit die Links nicht unter dem Bild verschwinden, bekommen sie alle ein z-index:1;
Der normale HTML Fluss ist im z-index:0;
Weil das Bild auch dort ist, wo der Text schon beginnt,
muss die ID mit dem Bild tiefer liegen als der normale HTML Fluss.
Sonst könnte man den Anfang des Textes nicht lesen, weil er unter dem Bild zu gedeckt wäre.
Darum bekommt die ID Bild einen z-index von -1
Versuche es einfach nach zu bauen und nach Deinem Geschmack zu verändern.
Als Hintergrundfarbe vom Bild habe ich die Farbe #cacfe3 genommen.
Dem body habe ich ebenfalls eine Hintergrundfarbe mit dem Wert #cacfe3 gegeben.
So sieht man gar nicht wo das Bild aufhört !



Hier kannst Du Dir das Resultat ansehen