Kurs 1a, Webseitengestaltung mit KompoZer 0.8b1
Übung 10, Das Menü kommt nach links

Ziel der Übung 10:

Der Container für das Menü schwebte in der letzten Übung per Style-Regel nach rechts. (float: right;). Dadurch konnte der Container für den Text nach oben nachrücken. Schwebt das Menü nach links, gibt es ein Problem, aber das wird sofort behoben.

Vorgehensweise:

Das Menü erhält noch eine kleine Kosmetik und wird dann nach links verlagert.
Zum Ablauf: Die Aufträge bestehen aus einer Beschreibung, was folgen und vom Kursteilnehmer erwartet wird, und der Aktionszeile mit den schrittweisen Anleitungen. Die einzelnen Schritte werden durch senkrechte Rahmen | .. | unterteilt. Es liegt am Teilnehmer, dort nicht hinzusehen und es allein zu versuchen. Für alle Gelegenheits-Kursteilnehmer, die nur eine Übung interessiert, bleiben die Aktionszeilen so ausführlich oder komplett wie bisher. Also bald über die Aktionszeilen hinwegsehen und mehr und mehr selbst entscheiden, wie vorzugehen ist.

Aufträge:

a) Diese Datei wird als "ziel10.html" gesichert. Der Titel wird "Ziel 10" lauten und der Autor bist du.

| Menü 'Format' | 'Seitentitel und -einstellungen' | Dialog 'Seiteneigenschaften', 'Titel:' Ziel 10, 'Autor:' Dein Name | OK | Menü 'Datei' | 'Speichern unter' "ziel10.html" |

Für Gelegenheits-Teilnehmer: Allen Text oberhalb dieses Auftrags aus dem Container hier entfernen. Nach jedem erledigten Auftrag rückt der nächste nach oben ins Bild, alle abgearbeiteten Aufträge also immer löschen.

b) Die Überschrift im oben-Container soll "Kleine Seite mit 2 Spalten" lauten.

| Den Text der neuen Überschrift aus b) in die Zwischenablage kopieren | Die aktuelle Überschrift mit der Maus komplett markieren | Menü 'Bearbeiten' | 'Einfügen ohne Formatierung' | Bild in Normalansicht und Quelltext teilen | In der Statuszeile <div class="oben"> linksklicken, damit im Quellext der Code des ganzen Containers erscheint | Eventuelle übriggebliebene Zeilenumbrüche <br> aus dem Container im Quelltext entfernen | Irgendwo in die Normalansicht klicken |

c) Wird auf dieser Seite mit der Maus im Kompozer über die Links der Navigation gefahren, funktioniert der Hover-Effekt nur bei Berührung des Textes. Die allgemeine Regel a für alle Links wird mit einem neuen Style "display: block;" versehen. Dieser Style erzwingt eine neue Zeile, mit dem Ergebnis, dass die ganze Breite der "Schaltfläche" als ein Element beim Hovern erkannt wird.

| CSS-Editor mit [F11] öffnen | Regel a wählen | Register 'Box'  | 'Anzeige:' block | OK |

d) Im CSS-Editor wird bei ".navi" im Register 'Box' der Puffer: Links inPuffer: Rechts geändert. Aus float: left; wird float: right;. Das bedeutet, wenn das Schweben nicht ausdrücklich aufgehoben wird, dürfen nachfolgende Elemente rechts an der Navigation, solange Platz dafür vorhanden ist, hoch schweben.

| CSS-Editor öffnen | Regel navi wählen | Register 'Box'  | ''Puffer:' Links | OK |

e) Das Umschließen des Menüs, wie es jetzt der Text-Container macht, kann bei anderen Webseiten genau das gewünschte Layout sein. Kommen dann noch weitere Verweise dazu, passt sich das Umfließen dem immer an. Es wäre nur noch die Breite des Textcontainers anzupassen.
Hier soll aber der Text den Platz einnehmen , der rechts soeben frei wurde und links die Spalte für weitere  Container anderen Inhalts frei gelassen werden.
Die Lösung: Der Textcontainer bekommt einen Außenabstand links.

| CSS-Editor | Regel '.inhalt' | Register 'Box' | 'Außenabstand Links:' 9.2em | OK |

g) Das war's eigentlich. Aber wegen des Absatz erzeugenden <h5> hat der Text oben und unten noch einen Abstand. Die Regel h5 enthält font-size: 0.8em;. Das kann auch dem Text-Container mitgegeben werden, dann kann auf <h5> an dieser Stelle verzichtet werden.

| CSS-Editor | Regel '.inhalt' | Register 'Text' | 'Schriftgröße:" 0.8em | OK |

Jetzt ist mit der kleinen Schrift nicht alles kaputt, sondern nur geerntet, was gesät wurde. Wenn der Container  die Schriftgröße 0.8em vorgibt, und das eingeschlossene <h5> auch noch einmal, dann liefert der Browser und ebenso auch KompoZer mit WYSIWYG eine Schriftgröße von 0.8 x 0.8 = 0.64em. Da haben wir eine Kaskade mit 2 Stufen und CSS heißt ja Cascading Style Sheets. Da gibt es noch eine Stufe davor, denn die Schriftgöße des Textcontainers ist ja 80% von einer irgendwie gearteten Vorgabe. Meistens die Standard-Einstellung des Browser des Besuchers.

Um von der 0.64em%-Schriftgröße wegzukommen, wird <h5> im Quelltext des Textcontainers gelöscht, um das schließende Tag </h5> kümmert sich KompoZer und entfernt das, weil es nun alleinstehend ein Fehler ist.

| In den Text klicken | In der Statuszeile <div class="inhalt"> linksklicken | Im Quelltext unten das <h5> löschen | in die Normalansicht klicken |

Die Einheit em wird auch für die Breite des Textcontainers verwendet. Auch die Breite ist nun durch die Schriftgröße des Textcontainers gezwungenermaßen mit 0.8 multipliziert worden. Das kann mit dem CSS-Editor wunderbar mit den Pfeiltasten neben den Angaben für Breite, Abstand links und oben nachgebessert werden.
Rechnerisch bestätigt sich das mit den Verhältnissen etwaso: Um die Wirkung einer Multiplikation mit 0.8 aufzuheben, werden die Breite und die Außenabstände einfach durch 0.8 dividiert oder mit dem Kehrwert 1.25 malgenommen.

| CSS-Editor | Regel .inhalt | Register 'Box' | 'Breite:' 50em, Außenabstände 'Oben:' 0.75em und 'Links:' 11.5em | OK |

Warum dann nicht doch lieber Bildpunkte px als Maß nehmen? Vor Jahren gab es einheitliche Bildschirme mit 72x72dots/inch. Die gibt es immer noch. Aber heute kommen die Displays von Handys und andere fürs Internet hinzu. Da bietet sich die Schrift als Bezug für die Breite und die Abstände besser an. War ja in der Drucktechnik schon  immer so. Jetzt alles außer dem "Lorem"-Text aus dem Container löschen. Es gibt den Vergleich auf http://www.elew.de/kurs1a/ziel10.html.

Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis atho vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.