Download
2014-07-03, 18:52:50
Kurz erklärt:
Alles basiert auf einem DIV-Container "navigation". Die Einstellungen werden auf Grundwerte gesetzt, damit er nicht irgendwo steht und irgendwie aussieht. Breite wird gesetzt und ein z-index. Die Breite ist klar, aber der z-index? Der vermeidet, das der Container von irgendetwas anderem überdeckt wird, weil sonst wäre er nicht mehr anklickbar und damit eine Navigation unmöglich.
Interessanter wird es bei der Formatierung der "ul li"-Tags. Jeder kennt <li> meistens untereinander, so wie eine Liste eben aussieht. Mit ein paar Einstellungen läßt sich eine Liste aber sehr flexibel nutzen. Eben so wie im Beispiel:
display:block - Jedes <li>-Element wird als Block behandelt
float:left - die Blöcke werden alle links ausgerichtet, sodaß sich der nächste Block rechts anschließt. Die Blöcke werden einfach von links beginnend hintereinander gesetzt. Wenn so ein Element in einem Text stehen würde, würde der Text am links ausgerichteten Element an der rechten Seite vorbeifließen.
... und zum guten Schluß werden noch die Ränder gesetzt: Gut zu wissen, wenn man weiß, das die Ränder von Links (oben) bis rechts (linker Rand) angegeben werden.
Beispiel: 10px 20px 30px 40px - d.h. Oben werden 10px Abstand sein, rechts 20, unten 30 und an der linken Seite 40.
Alles basiert auf einem DIV-Container "navigation". Die Einstellungen werden auf Grundwerte gesetzt, damit er nicht irgendwo steht und irgendwie aussieht. Breite wird gesetzt und ein z-index. Die Breite ist klar, aber der z-index? Der vermeidet, das der Container von irgendetwas anderem überdeckt wird, weil sonst wäre er nicht mehr anklickbar und damit eine Navigation unmöglich.
Interessanter wird es bei der Formatierung der "ul li"-Tags. Jeder kennt <li> meistens untereinander, so wie eine Liste eben aussieht. Mit ein paar Einstellungen läßt sich eine Liste aber sehr flexibel nutzen. Eben so wie im Beispiel:
display:block - Jedes <li>-Element wird als Block behandelt
float:left - die Blöcke werden alle links ausgerichtet, sodaß sich der nächste Block rechts anschließt. Die Blöcke werden einfach von links beginnend hintereinander gesetzt. Wenn so ein Element in einem Text stehen würde, würde der Text am links ausgerichteten Element an der rechten Seite vorbeifließen.
... und zum guten Schluß werden noch die Ränder gesetzt: Gut zu wissen, wenn man weiß, das die Ränder von Links (oben) bis rechts (linker Rand) angegeben werden.
Beispiel: 10px 20px 30px 40px - d.h. Oben werden 10px Abstand sein, rechts 20, unten 30 und an der linken Seite 40.
