Seite anzeigenÄltere VersionenLinks hierherODT exportierenNach oben Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt. ====== Header = div-Element ====== Der Header jeder einzelner Seite wird meistens mit dem Element ''div'' realisiert. Mit einer Klasse, z. B. ''header'' kann man den Header individuell per CSS formatieren. Dieses div-Element wird dann in allen Unterseiten der Website kopiert. <code> <div class="header"> [Hier werden alle Bestandteile des Headers kopiert]. </div> </code> ===== Bestandteile des Headers ===== Alle Bestandteile des Headers werden innerhalb des div-Elements kopiert. ===== Link zur Startseite ===== Meistens oben links. Oft als Logo oder Bilddatei. ===== Navigationsleiste ===== Enthält Links zu allen Unterseiten der Website. Wird immer mit dem Element ''nav'' realisiert. Innerhalb von <nav> werden die Links zu den Unterseiten als einzelne Punkte (''<li>'') einer ungeordneten Liste ''<ul>''. Wir brauchen so viele ''<li>'' Elemente, wie die Zahl unserer Unterseiten/Links. <code><nav> <ul> <li><a href="#">Seite 1</a></li> <li><a href="#">Seite 2</a></li> <li><a href="#">Seite 3</a></li> <li><a href="#">Seite 4</a></li> </ul> </nav></code> ===== Formatierung der Navigationsleiste per CSS ===== Die Formatierung der Navigationsleiste erfolgt per CSS. ==== Beispiel: Vertikale Navigationsleiste ==== <code> body { font: normal 1em Helvetica, Arial, sans-serif; color: black; } nav ul { width: 10em; padding: 0.8em; border: 1px solid black; background-color: silver; } nav li { list-style: none; margin: 0.4em; padding: 0.2em; border: 1px solid gray; background-color: #eee; } nav a { text-decoration: none; font-weight: bold; color: gold; background-color: royalblue; } nav a:focus, nav a:hover, nav a:active { color: royalblue; background-color: gold; } </code> Quelle: https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:CSS_Men%C3%BCs2.html === Beispiel: Horizontale Navigationsleiste === <code> nav ul { text-align: center; /* weitere Angaben */ } nav li { display: inline-block; /* weitere Angaben */ } nav a, nav span { display: block; width: 8em; /* weitere Angaben */ } </code> Quelle: https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:CSS_Men%C3%BCs5.html ====== Tipp ====== Plane sorgfältig deinen Header und deine Navigationsleiste und kopiere sie als letztes in all deinen Unterseiten. s7inf/header.txt Zuletzt geändert: 2016/04/25 20:32von 127.0.0.1