Notwendige Quellcodes für Teil 4
Komplette *mager.css* anzeigen
Der HTML-Code ist weitgehend identisch mit dem Code von Teil 3. Nur bei den Stylesheets gibt es eine Änderung - es wurde nur die css/mager.css eingebunden. Auf großartige Formatierungen wurde verzichtet - prinzipiell ist diese Version ja für Browser gedacht, die kein CSS verarbeiten können bzw. wollen. Ganz ohne CSS sähe die Seite also noch unformatierter aus, aber die Struktur bliebe exakt die selbe.
Wer die mager.css noch aufpeppen will, kann das natürlich gerne tun - allerdings mit Vorsicht. Bitte immer daran denken, dass die unterschiedlichen Stylesheets sich nicht gegenseitig überschreiben, sondern immer einander ergänzen! Wer mit dieser Thematik nicht allzu vertraut ist, sollte den entsprechenden Artikel nochmals lesen.
Ok, ein Detail wollen wir uns zum Abschluss noch etwas genauer ansehen. Vielleicht haben Sie sich schon gefragt, warum die Links in der oberen Menüzeile der Textversion nebeneinander sitzen, während sie in der formatierten Version untereinander liegen.
Schauen wir uns den Code dazu an:
<div id="menue3">
<p>
<a href="index.html">Startseite</a> <span class="nix">|</span>
<a href="teil_1.html">Teil 1</a> <span class="nix">|</span>
<a href="teil_2.html">Teil 2</a>
</p>
</div>
Wie sie sehen, steht kein br hinter den Links - trotzdem brechen sie um auf eine neue Zeile. Dafür verantwortlich ist der folgende Eintrag im Stylesheet:
#menue3 a {
display: block;
line-height: 140%;
}
Die Anweisung lautet, dass alle Anchors a innerhalb des Containers menue3 als Block-Element dargestellt werden sollen (also jeweils auf einer eigenen Zeile).
Die darauf folgende Anweisung <span class="nix">|</span> wird im Stylesheet so definiert:
.nix {
display: none;
}
Sie bewirkt also, dass der "|" in der CSS-Version nicht angezeigt wird.
Da diese beiden Style-Anweisungen in der mager.css ignoriert werden, erreichen wir in der Textversion genau das Gegenteil - alle Links erscheinen auf einer Zeile und werden durch die "|" separiert.
Wozu dieser Aufwand? Nun, in der Textversion sparen wir Platz, wenn die Links nebeneinander liegen. Der Separator dagegen ist ein kleiner Service, zB. für Screenreader, die beim Vorlesen etwas "Luft holen" können und so dem Zuhörer signalisieren, dass ihm gerade eine Liste von Begriffen (Links) vermittelt wird.
Hier endet Workshop 1 ... Viel Spaß beim Weitertüfteln! ;o))