KompoZer für Fortgeschrittene

Style-Regeln für HTML-Kästchen - Teil 2

Ziele

Vorbereitung

Da man den grauen Rahmen später nicht sehen soll, entferne nun alle Leerzeilen zwischen den untergeordneten HTML-Kästchen. Die oberste Zeile musst du dabei im Quelltext-Modus entfernen. Wechlse deshalb in diesen Modus. Finde die blau markierte Stelle und lösche sie.
Zurück im WYSIWYG-Modus sollte nichts Graues mehr vom 'wrapper' sichtbar sein.

Screenshot: zu löschende Zeile im Quelltext

Die Größe verändern

Bis jetzt ist jedes Kästchen nur so hoch wie sein Inhalt und so breit wie der 'wrapper'. Das kannst du jedoch ändern.

Klicke nun wieder auf Button für den CSS Editor. Gehe dann zur Regel '#wrapper' und dem Reiter Box. Hier kannst du Breite und Größe festlegen.

Screenshot: Einstellungen unter dem Reiter Box

Du kannst dabei eine feste Anzahl an Pixeln angeben, beispielsweise 600px. Dann passt sich deine Seite jedoch nicht der aktuellen Fenstergröße an. Deshalb ist es ratsam die Angaben zu Breite und Höhe für den wrapper in Prozent anzugeben. Dabei wird immer von der aktuellen Fensterbreite ausgegangen.

Für die Höhe von Kopf- und Fußzeile, sowie für die Menüs ist es sinnvoll eine feste Angabe zu machen. Du kannst z.B. auch ein Minimum und ein Maximum angeben. Egal wie viel Platz der Inhalt dann benötigt, das Kästchen wird nie kleiner als das Minimum oder größer als das Maximum.

  • Passe die Größe für das HTML-Kästchen'wrapper' wie im Screenshot oben vorgegeben an.
  • Um der Vorlage nahe zu kommen, bietet es sich an dem 'header' eine Höhe von 150px zu geben, 'menu' z.B. eine Höhe von 30px, 'menu_left' eine Höhe von 200px und eine Breite von 150px, 'content' eine Mindesthöhe von 300px und 'footer' eine Höhe von 40px.
Computer-Eule

Die Position verändern

Da neben dem seitlichen Menü (menu_left) wieder der graue 'wrapper' zu sehen ist, müssen wir noch etwas an der Position dieses Kästchens ändern. Das Ziel ist es, dass an dieser Stelle schon der Inhalt anfängt.

Dafür gehst du im CSS Editor zur Regel '#menu_left' und dem Reiter Box. Dort wählst du nun für Puffer den Wert "Links"

Screenshot: den Puffer verändern

Bei der Gelgenheit löschst du in der Regel '#wrapper' noch die Hintergrundfarbe.

Dein Dokument sieht nun so aus:
Layout einer gewöhnlichen Internetseite

Passe die Position wie eben beschrieben an.

Computer-Eule

Dein Dokument sollte jetzt aussehen wie in der Vorschau.

Natürlich kannst du mit CSS noch viel mehr ändern, als nur die Eigenschaften von Containern. Was noch alles möglich ist, lernst du in Style-Regeln für Elemente.

Wenn du statt Hintergrundfarben gern ein Hintergrundbild hättest, findest du die Anleitung hier.

Pfeil weiter