Vorbereiten Abheben Fahren Einpacken Zurück zur Kurs-Startseite

Kurs 1a, Webseitengestaltung mit KompoZer 0.8b3

Kurs-Einheit 7, Externes Stylesheet

Willkommen:

Mit der letzten Aufgabe wurde eine mögliche für KompoZer typische Behandlung mehrseitiger Websites nachvollzogen: Zuerst dient eine Seite der Entwicklung des Designs und der Navigation. Dann wird das fertige Gerüst auf jede Unterseite komplett übertragen und abschließend jede Unterseite einzeln fertig gestellt.
Nachträgliche Änderungen und Erweiterungen der Navigation, etwa durch weitere neue Unterseiten, werden dann ebenfalls auf einer Seite erstellt und als Ganzes auf andere Seiten übertragen.

Nicht so in dieser Einheit bei Formaten und in gewisser Weise beim Layout. Sind die Regeln hierfür in einer eigenen einzelnen CSS-Datei enthalten, ergeben einmalige Änderungen dort, dass alle Seiten, die auf diese CSS-Datei verlinken, gleichzeitig die Änderungen erfahren.

Das interne Stylesheet wird als eine eigene Datei ausgelagert, als externes Stylesheet. Abschließend werden alle Seiten der Homepage darauf umgestellt.

Aufträge:

a) Die erste Seite der Homepage erhält ihren Titel und eine eigene Beschreibung

Diese Seite als "seite07a.html" mit dem Titel "Vorbereitung" und der Beschreibung "Ballon entfalten" speichern. Lösche allen Text oberhalb von hier, bis der Auftrag b) unterhalb der Navigation steht. Die Navigation oben bleibt für die ganze Kurs-Einheit erhalten. Die Ansicht 'HTML-Tags' erleichtert das Entfernen der beim Löschen übrigbleibenden leeren HTML-Elemente.

| Menü 'Format' | 'Seitentitel und Einstellungen' | Dieser Seite den Titel "Vorbereitung" geben. Die Beschreibung der Seite lautet: "Ballon entfalten" | OK | Menü 'Datei' | 'Speichern unter...' "seite07a.html" |

b) Export der Regeln

Die ganze Kurs-Einheit enthält keine Inline-Styles mehr. Die ganze Formatierung ist im internen Stylesheet im Header enthalten. So kommt es gleich zu Beginn zum Höhepunkt dieser Einheit: Das interne Stylesheet wird aus dem Header entfernt und in eine CSS-Datei exportiert.
Vielleicht hast du beim Öffnen des CSS-Editors die Schaltfläche 'Stylesheet exportieren und auf externes Stylesheet umstellen' schon bemerkt. Mit der geht es. Alles was zu tun ist, ist das Verzeichnis auf der Festplatte zu finden und den Dateinamen anzugeben. Als Name ist alles erlaubt, aber das Einfache kommt dem Genialen näher und nach einer gewissen Zeit ist jeder froh, wenn der übliche Suffix "css" die CSS-Datei kenntlich macht und nicht ein ungewöhnliches Extrem. Die CSS-Datei soll also schlicht "seite07.css" heißen.  Der CSS-Editor erledigt auch den Umbau im Header. Er löscht im Header das interne Stylesheet und fügt stattdessen einen Link auf die CSS-Datei ein.

| CSS-Editor per Symbol 'CSS' aufrufen | Schaltfäche 'Stylesheet exportieren und auf externes Stylesheet umstellen' | Zielverzeichnis auf der Festplatte ansteuern | Dateiname "seite07.css" eingeben | Speichern | Aus dem Eintrag im Dialog unter 'Sheets und Regeln' wurde nun "seite07.css" mit einem Plus davor. Das Plus anklicken | Alle Regel sind erhalten | OK |

c) Änderung von Regeln

Nach dem Sichern der Arbeit ist im Header kein internes Stylesheet vorhanden. Dafür gibt es im Header den Link auf das externe Stylesheet: <link rel="stylesheet" href="seite07.css" type="text/css">.
Und auf der Festplatte findet sich die Textdatei "seite07.css" mit allen Regeln.
Die Bedienung des CSS-Editors ändert sich nicht. Das Format sollte es aber schon. Hier die Vorschläge:

c1 ) Eine neue Regel "body" erhält einen Hintergrund mit background-color: #ffffcc;

| CSS-Editor | Linksklick auf die Palette oben links für den Dialog 'Neue Style-Regel' | Eintrag von "body", auch möglich durch Aufblättern der Auswahlliste bei der Eingabezeile und Anklicken von 'body' | Schaltfläche 'Style-Regel erstellen' | Register 'Hintergrund' | 'Farbe:' #ffc | OK |

c2) Als Nächstes werden ohne den CSS-Editor zwischendurch mit OK zu schließen drei Regeln hintereinander im Register 'Allgemein' umgeschrieben. Es sind die Regel "a" für alle Links die mit dem ganzen Paket über die Zwischenablage ausgewechselt wird, das Paket folgt hier,

background-color:#666666;
color:white;
font-size:0.9em;
margin-right:0.5em;
padding-left:0.5em;
padding-right:0.5em;
text-decoration:none;

die Regel "a.hover", die umgefärbt wird zu background-color: #009;

und die Regel "a.hier", bei der aus "olive" ein "green" werden soll.

| Die komplette Regel von "a" aus dem Auftrag in den Zwischenspeicher kopieren | CSS-Editor | Regel "a" wählen | Register 'Allgemein' | Alle Styles zum Überschreiben markieren | Alle Styles mit dem Inhalt des Zwischenspeichers ersetzen | ohne OK weiter mit Regel "a.hover" im gleichen Register | Die Hintergrundfarbe mit "#009" auswechseln | Ebenfalls die Farbe wechseln bei "a.hier" mit "green" | OK | [Strg]+[S] | Bis zum Auftrag d) alles löschen und die Navi stehen lassen | [Strg]+[S] |

d) Eine Regel wird umbenannt

Die Klasse ".text" eignet sich wie jede Klasse für wiederholte Anwendungen bei allen möglichen Elementen. Durch die Erweiterung im Namen zu "div.text" eignet sich sich wenigstens für alle möglichen <div>-Container. Auf alle Fälle sind Klassen für eine wiederholte Anwendung gedacht.
Anders, wenn der Punkt im Namen der Regel durch das Doppelkeuz # ersetzt wird. Dann darf auf einer Seite diese Regel nur einmal angewendet werden. Dann ergibt auch ein vorangestelltes "div" keinen Sinn. Denn wird die Regel mit dem vorangestellten # einmal für ein  <div> verwendet, steht sie für kein anderes <div> zur Verfügung.

Erreicht wird dadurch, dass das Element ganz eindeutig gefunden wird, wenn es von einer Scriptsprache wie Java angesprochen wird, oder wenn ein Link darauf verweist. Aus der Regel "div.text" soll jetzt die Regel "#rahmen" werden.  #rahmen ist dann keine Klasse mehr, sondern ein Identifier, genauer, ein ID-Selektor. #rahmen selektiert das Element mit der ID "rahmen".

Im CSS-Editor wird die Regel "div.text" ausgewählt. Mit dem dritten Symbol 'Bearbeiten' in der Reihe, wo die Palette links sitzt, wird eine Eingabezeile geöffnet und die Regel kann umbenannt werden. Wenn das geschieht, verliert der Container sofort sein Format, denn die zugewiesene Klasse ".text" existiert ja nicht mehr.

Aber so wie mit dem Kontextmenü das Häkchen für die Zuweisung einer Klasse entfernt werden kann, kann es auch für die Zuweisung einer ID wieder gesetzt werden. Die Klasse wird per Kontextmenü entfernt und dafür per Kontextmenü der Identifier zugewiesen.

| CSS-Editor | Regel "div.text" auswählen | Symbol 'Bearbeiten' | "#rahmen" ohne Anführungszeichen eintragen | OK | OK | In der Statuszeile <div class="text"> rechtsklicken | Kontextmenü 'Klassen' | Häkchen für "text" entfernen | <div> wieder rechtsklicken | Kontextmenü 'ID' | Häkchen für "rahmen" setzen | Strg]+[S] |

e) Viererpack als Einheits-Homepage bilden

Damit aus dieser Einheit die kleine Homepage mit vier einfachen Seiten wird, ist diese Seite noch als "seite07b.html", "seite07c.html" und "seite07d.html" zu speichern. Die Navigation wird dann auf jeder einzelnen Seite erst erstellt. Mit KompoZer ist das für ein Menü mit 4 Seiten x 5 Links = 20 Änderungen noch erträglich, bei größeren Homepages ist die Methode der vorigen Aufgabe, die komplette Navigation auf alle Unterseiten zu kopieren und dann etwas anzupassen, eher anzuraten. Die Nebenseiten b bis d erhalten die Titel der Navigation von "Abheben" bis "Einpacken". Die Beschreibungen stehen in der Aktionszeile.

| Diese Seite sichern | Menü 'Format' | 'Seitentitel und Einstellungen' | Dieser Seite den Titel "Abheben" geben |
Die Beschreibung der Seite lautet: "Die Fahrt beginnt" | OK | Als "seite07b.html" speichern |

Jetzt der Seite den Titel "Fahren" geben. Die Beschreibung der Seite lautet: "Über Land" | OK | Speichern als "seite07c.html" |

Abschließend der Seite den Titel "Einpacken" und die Beschreibung "Der Ballon wird eingepackt" geben | OK | Als "seite07d.html" speichern |

f) Anpassung der Navi

Der Auftrag gilt für die Datei "seite07d.html", die als zuletzt gesicherte Webseite noch offen sein müsste. Das Menü muss den neuen Zielseiten entsprechend angepasst werden.

f1) Zuerst der Link "Einpacken". Ihm wird per Kontextmenü die Klasse ".hier" zugewiesen.

| Link "Einpacken" linksklicken" | In der Statuszeile <a> rechtsklicken | Kontextmenü 'Klassen' | "hier" |  Irgendwo in die Normalansicht klicken |

f2) Der Verweis bei "Einpacken" auf #top ist falsch. Er stammt aus der letzten Einheit und führt ins Leere. Den Anker gibt es nicht und er wird auch nicht gebraucht. Da es jetzt einen eindeutig identifizierbaren "Rahmen" gibt, kann auf diesen verlinkt werden. Im Dialog'Link-Eigenschaften' findet sich in der Auswahlliste der neue Identifier "#rahmen", der als obere Ecke links gut geeignet ist. Auch für eventuelle "Nach-oben"-Verweise bei anderer Verwendung dieser Seite.

| "Einpacken" doppelklicken | Dialog 'Link-Eigenschaften' | "#rahmen" mit der Drop-down Liste auswählen | Öffnen | OK | Irgendwo in die Normalansicht klicken |

f3 ) Dann wird der Link "Fahren" mit der Webseite "seite07c.html" verknüpft. Da die Seiten a bis d vorher schon gespeichert worden sind, "kennt" KompoZer die Verzeichnispfade und setzt auch beim Verlinken das Häkchen für eine relative Adresse. Beim Hochladen, wenn die Verzeichnisse 1:1 im Internet gespiegelt werden, funktionieren solche Links. Schlimm wäre es, wenn nach dem Hochladen immer noch auf deine Festplatte verlinkt würde.

| "Fahren" doppelklicken, der Dialog 'Link-Eigenschaften' öffnet sich | Mit dem Durchsuchen-Symbol die Seite "seite07c.html" auswählen | 'Öffnen' | OK |

f4) Der Link "Abheben" wird mit der Webseite "seite07b.html" verknüpft.

| "Abheben" doppelklicken | 'Link-Eigenschaften' | Die Seite "seite07b.html" auswählen | 'Öffnen' | OK |

f5 ) Als letzter Link wird "Vorbereiten"  mit der Webseite "seite07a.html" verknüpft.

| "Vorbereiten" doppelklicken | Die Seite "seite07a.html" auswählen | 'Öffnen' | OK | [Strg]+[S] |

g) Die Grafik erhält eine Regel

g1 ) Jetzt alles zwischen der Navigation und dem nächsten Bild löschen.

g2 ) Lautet die Regel "img" (steht für image), gelten die Styles für alle Elemente <img>. Da im Design nur ein Foto je Seite geplant ist, reicht das auch. Diese neue Regel "img" wird im CSS-Editor erstellt und erhält im Register 'Box' vier Innenabstände von 1em, einen Außenabstand rechts von 1em, einen 'Puffer:' links, zu dem gleich noch in h) was geschrieben steht, und im Register 'Begrenzungen' einen soliden (solid) kastanienbraunen (maroon) Rand mit 1px Dicke rundherum. Der erledigte Auftrag wird gelöscht und der Auftrag h) rutscht nach oben neben das Foto.

| CSS-Editor | 'Neue Style-Regel' mit Klick auf die Palette einleiten | Regel "img" ohne Anführungszeichen eintragen | 'Style-Regel erstellen' anklicken | Register 'Box' | Vier Innenabstände auf "1em" festlegen | 'Außenabstand: Rechts:' "1em" | 'Puffer:' Links | Register 'Begrenzungen' | Häkchen bei 'Alle vier Seiten...' | 'Stil:' solid | 'Breite:' 1px | 'Farbe:' maroon | OK | Die erledigten Aufträge löschen und das Foto unter der Navi stehen lassen |

h ) Die vierte Seite der HP abschließen

h1) In dem Moment, wo Puffer: Links im CSS-Editor stand, schwebte der Text von unter dem Bild nach rechts neben das Bild. In der Regel heißt der Style "float: left;". Was im Register 'Allgemein' nachgesehen werden kann. Der eingedeutschte Ausdruck Floaten kann durch Schweben ersetzt werden, nur versteht das dann kaum einer. Mit diesem Style wird der Platz rechts vom Element freigegeben und der Browser bricht den Text um. Ist der Text länger als die Spalte neben dem Bild, geht er unter dem Bild dann wieder in die volle Breite über.
Als ein Stück Text neben dem Foto bei der fertigen Seite (die Aufträge kommen neben dem Foto alle weg) dient der nicht in die Navi passende einzelne Link "Zurück zur Kurs-Startseite". Er wird im Ganzen markiert und mit der Maus neben das Bild gezogen. Wenn er stört, kann er auch wegfallen und der Platz neben dem Foto bleibt am Ende leer.

| "Zurück zur Kurs-Startseite" anklicken | In der Statuszeile das <a> anklicken, damit der komplette Link markiert wird | Den Link mit der Maus rechts neben das Bild ziehen |

h2 ) Die Bildbeschreibung
Das ist die Bildbeschreibung in vier Wörtern:
"Der Ballon wird eingepackt"
Die vier Wörter kommen in einen Container. Die Bildbeschreibung hat ihre eigene Zeile, damit nur Hineinklicken reicht und nicht alles markiert zu werden braucht. Eine eigene Zeile mit [Enter] abgeschlossen ist ein Absatz. Deshalb reicht der eine Klick anstelle der kompletten Markierung. Deshalb kann vor einer Umwandlung mit einem [Enter] ein Stopp für die Umwandlung gesetzt werden.
Wird die Bildbescheibung nach dem Hineinklicken per Absatzformat-Auswahlliste in den <div>-Container gehüllt, geht das <h5>-Überschriftformat verloren. Deshalb wird der Mauszeiger hineingesetzt und noch einmal die Auswahlliste für das Absatzformat für <h5> bemüht.

| "Der Ballon wird eingepackt" irgendwo anklicken | Per Absatzformat-Auswahlliste ein <div> zuweisen | Ein <h5> zuweisen |

Fertig! Schon mal die Datei "seite07c.html" laden, dann kann mit dem i) fortgesetzt werden, ohne dass Fragen auftauchen, wie es weitergeht. Die restlichen Aufträge ab i) dienen nur der Wiederholung für die drei restlichen Seiten der Homepage. Hier auf der Seite "Einpacken" bitte alles und das hier löschen, das ist eine ganze Menge, und nur das Bild, das Menü, den Link rechts vom Bild und die Bildbeschreibung im neuen Container stehen lassen.

Der Container #rahmen schrumpft bis unter das Foto hoch, weil der Text nur kurz und gefloatet ist. Diese Seite dann Speichern und und mit "seite07c.html" und dem Auftrag i) weitermachen. Die Seite "seite07d.html" kann ruhig geöffnet bleiben. Am Tab sind die Seiten dank ihrer eigenen Titel gut zu unterscheiden.

i) Anpassung der Navi

Auf der Seite "seite07c.html" alles bis zum i) hier, aber nicht die Navi ganz oben, löschen. Um das Layout kümmern wir uns zum Schluss.

Das ist der Beginn der Abschlussarbeiten an der Seite "Fahren", "seite07c.html", und alles außer dem Menü ganz oben, was sich jetzt noch hier drüber befindet, wird gelöscht.

i1) Zuerst der Link "Fahren". Ihm wird per Kontextmenü die Klasse ".hier" zugewiesen.

| Link "Fahren" linksklicken" | In der Statuszeile <a> linksklicken | Kontextmenü 'Klassen' | "hier" |  Irgendwo in die Normalansicht klicken |

i2) Der Verweis bei "Fahren" auf #top ist falsch und wird auf den neuen Identifier "#rahmen" umgeleitet.

| "Fahren" doppelklicken | Dialog 'Link-Eigenschaften' | "#rahmen" mit der Drop-down Liste auswählen | Öffnen | OK | Irgendwo in die Normalansicht klicken |

i3 ) Dann wird der Link "Einpacken" mit der Webseite "seite07d.html" verknüpft.

| "Einpacken" doppelklicken, der Dialog 'Link-Eigenschaften' öffnet sich | Mit dem Durchsuchen-Symbol die Seite "seite07d.html" auswählen | 'Öffnen' | OK |

i4) Der Link "Abheben" wird mit der Webseite "seite07b.html" verknüpft.

| "Abheben" doppelklicken | 'Link-Eigenschaften' | Die Seite "seite07b.html" auswählen | 'Öffnen' | OK |

i5 ) Als letzter Link wird "Vorbereiten"  mit der Webseite "seite07a.html" verknüpft.

| "Vorbereiten" doppelklicken | Die Seite "seite07.html" auswählen | 'Öffnen' | OK | [Strg]+[S] |

Jetzt alles zwischen der Navigation und dem nächsten Bild löschen.

j) Die dritte Seite der HP abschließen

Den Link "Zurück zur Kurs-Startseite" mit der Maus rechts neben das Foto ziehen. Oder löschen, wenn er stört.

Die Bildbeschreibung hat schon ihren Container, da bleibt nichts zu tun. Womit diese Seite nach dem Löschen dieses Auftrags j) und allem anderen darunter außer Menü, Foto, Link und Bildbeschreibung als fertige Seite gesichert werden kann. Auch die Seite "seite07c.html" kann ruhig geöffnet bleiben. Mit der Seite "seite07b.html" und dem Auftrag m) dann weiter arbeiten.

| "Zurück zur Kurs-Startseite" anklicken | In der Statuszeile das <a> anklicken, damit der komplette Link markiert wird | Den Link mit der Maus rechts neben das Bild ziehen | Nach Anleitung alles löschen | [Strg]+[S] |

m) Anpassung der Navi

Das ist der Beginn der Abschlussarbeiten an der Seite 2, "seite07b.html", und alles außer dem Menü ganz oben, was sich jetzt noch hier darüber befindet, wird gelöscht.

m1) Zuerst der Link "Abheben". Ihm wird per Kontextmenü die Klasse ".hier" zugewiesen.

| Link "Abheben" linksklicken" | In der Statuszeile <a> linksklicken | Kontextmenü 'Klassen' | "hier" |  Irgendwo in die Normalansicht klicken |

m2) Der Verweis bei "Abheben" auf #top ist falsch und wird auf den neuen Identifier "#rahmen" umgeleitet.

| "Abheben" doppelklicken | Dialog 'Link-Eigenschaften' | "#rahmen" mit der Drop-down Liste auswählen | Öffnen | OK | Irgendwo in die Normalansicht klicken |

m3 ) Dann wird der Link "Einpacken" mit der Webseite "seite07d.html" verknüpft.

| "Einpacken" doppelklicken, der Dialog 'Link-Eigenschaften' öffnet sich | Mit dem Durchsuchen-Symbol die Seite "seite07d.html" auswählen | 'Öffnen' | OK |

m4) Der Link "Fahren" wird mit der Webseite "seite07c.html" verknüpft.

| "Fahren" doppelklicken | 'Link-Eigenschaften' | Die Seite "seite07c.html" auswählen | 'Öffnen' | OK |

m5 ) Als letzter Link wird "Vorbereiten"  mit der Webseite "seite07a.html" verknüpft.

| "Vorbereiten" doppelklicken | Die Seite "seite07a.html" auswählen | 'Öffnen' | OK | [Strg]+[S] |

Jetzt alles zwischen der Navigation und dem nächsten Bild löschen.

n) Die zweite Seite der HP abschließen

Den Link "Zurück zur Kurs-Startseite" mit der Maus rechts neben das Foto ziehen. Oder löschen, wenn er stört. Die Bildbeschreibung hat schon ihren Container, so dass diese Seite auch nach dem Löschen dieses Auftrags n) und allem anderen außer Menü, Foto, Link und Bildbeschreibung als fertige Seite gesichert werden kann. Auch die Seite "seite07b.html" kann ruhig geöffnet bleiben. Mit der Seite "seite07a.html" und dem Auftrag o) dann weiter arbeiten.

| "Zurück zur Kurs-Startseite" anklicken | In der Statuszeile das <a> anklicken, damit der komplette Link markiert wird | Den Link mit der Maus rechts neben das Bild ziehen | Nach Anleitung alles löschen | [Strg]+[S] |

o) Anpassung der Navi

Das ist der Beginn der Abschlussarbeiten an der Seite 1, "seite07a.html", und alles außer dem Menü ganz oben, was sich jetzt noch hier darüber befindet, wird gelöscht.

o1) Zuerst der Link "Vorbereiten". Ihm wird per Kontextmenü die Klasse ".hier" zugewiesen.

| Link "Vorbereiten" linksklicken" | In der Statuszeile <a> linksklicken | Kontextmenü 'Klassen' | "hier" |  Irgendwo in die Normalansicht klicken |

o2) Der Verweis bei "Vorbereiten" auf #top ist falsch und wird auf den neuen Identifier "#rahmen" umgeleitet.

| "Vorbereiten" doppelklicken | Dialog 'Link-Eigenschaften' | "#rahmen" mit der Drop-down Liste auswählen | Öffnen | OK | Irgendwo in die Normalansicht klicken |

o3 ) Dann wird der Link "Einpacken" mit der Webseite "seite07d.html" verknüpft.

| "Einpacken" doppelklicken, der Dialog 'Link-Eigenschaften' öffnet sich | Mit dem Durchsuchen-Symbol die Seite "seite07d.html" auswählen | 'Öffnen' | OK |

o4) Der Link "Fahren" wird mit der Webseite "seite07c.html" verknüpft.

| "Fahren" doppelklicken | 'Link-Eigenschaften' | Die Seite "seite07c.html" auswählen | 'Öffnen' | OK |

o5 ) Als letzter Link wird "Abheben"  mit der Webseite "seite07b.html" verknüpft.

| "Vorbereiten" doppelklicken | Die Seite "seite07b.html" auswählen | 'Öffnen' | OK | [Strg]+[S] |

Jetzt alles zwischen der Navigation und dem letzten Bild löschen.

p) Die erste Seite der HP abschließen

Den Link "Zurück zur Kurs-Startseite" mit der Maus rechts neben das Foto ziehen. Oder löschen, wenn er stört. In meinem Ergebnis der Kurs-Einheit habe ich zusätzlich noch etwas an Text formuliert. Mit dem Zusatztext wollte ich die Aufträge nicht belasten. Wird die Seite nachgebaut, umfließt der richtige Text das Bild, und das war ja inzwischent selbsterklärend zu sehen.
Die Bildbeschreibung hat schon ihren Container, so dass diese Seite auch nach dem Löschen dieses Auftrags p) und allem anderen außer Menü, Foto, Link und Bildbeschreibung fast fertig wäre, wenn da nicht der Container #rahmen auf allen drei fertigen Seiten viel zu klein wäre.

| "Zurück zur Kurs-Startseite" anklicken | In der Statuszeile das <a> anklicken, damit der komplette Link markiert wird | Den Link mit der Maus rechts neben das Bild ziehen | Nach Anleitung alles inklusive p) löschen | [Strg]+[S] |

q) General-Verbesserung des Layouts

Bei dieser Seite ist der Rahmen noch nicht zu klein, da ist noch Text übrig, der das Bild umfließt, aber bei den anderen Seiten ragt das Foto aus dem "#rahmen" heraus. Da es ein externes Stylesheet gibt, gibt es auch die gemeinsame Änderung für alle Seiten-Layouts. Da alle vier Seiten geöffnet sind, ist es zum Aha-Erlebnis dank externem Stylesheet nicht mehr weit. Eine neue Regel "div" mit dem einzigen Style aus dem Register 'Box', nämlich 'Aufhebung:' Links reicht aus. Die Aufhebung beendet das Floaten und das Element mit der Bildbeschreibung ordnet sich brav unten wieder an. Damit rahmt der Rahmen-Container auch unten die Bildbeschreibung ein. Und diese Verbesserung ist zentral mit dem externen Stylesheet für die gesamte Homepage schon bei einer Betrachtung im Browser wirksam. Aber bei KompoZer müssten erst noch die offenen Seiten geschlossen und neu geladen werden, damit das externe Stylesheet, die CSS-Datei, neu eingelesen wird. Vor dem Schließen bitte noch den Quelltext durchsehen und evtl. säubern.

|  CSS-Editor | Dialog 'Neue Style-Regel' erstellen | "div" eintragen | Schaltfläche 'Style-Regel erstellen | Register 'Box' | 'Aufhebung:' Links | OK |

Danke für die Geduld. Zum Vergleich gibt es http://www.elew.de/kurs1a/seite07a.html.