Nützliches für's Layout
Um ein ansprechenderes Erscheinungsbild eurer Seite zu erreichen, ist ein strukturiertes Layout wichtig. Hierzu gehören vom Text "umflossene" Elemente (z.B. Bilder), Abstände und Abgrenzungen zwischen verschiedenen Seiteninhalten wie auch das korrekte Trennen von langen Worten, um einen zu "ausgefransten" Flattersatz zu vermeiden.Aussen- & Innenabstände
Zu jedem (Block-)Element kann man den Abstand festlegen, den es zu seiner Umgebung haben soll. Der Aussenabstand zur jeweiligen Umgebung wird als margin, der (Innen-)Abstand des Inhaltes zum Rand des Elementes als padding bezeichnet.
Um die gewünschten Werte anzugeben, gibt es mehrere Möglichkeiten. Gibt man hinter dem jeweiligen Schlüsselwort nur einen Wert an, legt dieser alle vier Abstände fest. Möchte man jeden Abstand einzelnd festlegen, gibt man eine Liste von Werten, getrennt durch Leerzeichen, an (Reihenfolge im Uhrzeigersinn, oben angefangen). Um nur einen Abstand festzulegen, kann man auch jeden einzelnd durch Angabe der Seite spezifizieren, z.B.: margin-top / bottom / left / right (padding entsprechend).
Die folgenden Beispiele veranschaulichen dies:
<div style="width: 400px;
margin: 20px 10px 30px 40px;
padding: 20px;">
Hier steht der Inhalt dieses 400px breiten
Blockelementes. Lässt man die Breitenangabe
weg, füllt es den gesamten verfügbaren Raum.
Es hat nach oben 20px, nach rechts 10px,
nach unten 30px und nach links 40px Abstand
zu seiner Umgebung.
Der Innenabstand beträgt rundherum 20px.
</div>
Horizontale Trennlinien & Rahmen
Horizontale Trennlinien können einfach durch ein <hr>-Tag (engl. horizontal ruler) erzeugt werden. Dieses führt zu einem Zeilenumbruch und ist eines der wenigen standalone-Tags in HTML.Rahmen werden durch das CSS-Schlüsselwort border erzeugt. Soll der Rahmen rundherum einheitlich sein, gibt man am einfachsten seine Attribute als Folge von Werten, getrennt durch Leerzeichen, wie folgt an:
Rahmenstärke (in Pixel) Rahmentyp (solid, dotted, double, ...) Rahmenfarbe
Natürlich kann man auch bei Rahmen wieder jede der vier möglichen
Seiten für sich festlegen:
border-top / bottom / left / right
Hierdurch lassen sich einfach teilumrahmte Elemente mit unterschiedlichen
Rahmeneigenschaften herstellen. Wie dies aussehen kann zeigt z.B. der
dunkelrote Kasten mit der Aufgabenstellung vor den Übungen sowie
Übung 2 (s.u.).
Soll der Rahmen abgerundete Ecken haben, erreicht man dies durch Angabe des
Schlüsselwortes border-radius, gefolgt von einem Wert
für den Radius.
Tipp: Verwendet man nur einen border-radius ohne
Rahmen in Verbindung mit der Hintergrundfarbe des Blockelementes (background-color)
lassen sich einfach farbige Rechtecke mit abgerundeten Ecken als Hintergrund erzeugen.
<div style="margin-top: 20px; margin-bottom: 30px;
padding: 10px;
border: 2px solid red; border-radius: 12px;">
Dieses Blockelement nutzt die gesamte verfügbare Breite, hat oben
20px und unten 30px Abstand zur Umgebung sowie einen Innenabstand
von 10px. Der Inhalt ist oben und unten durch einen "horizontal
ruler" in der Farbe Blau abgegrenzt.
Zusätzlich ist der Block durch einen 2px dicken, "soliden" Rahmen
mit abgerundeten Ecken optisch hervorgehoben.
</div>
Worttrennung
Enthält ein Text viele lange Worte, entsteht schnell ein unschöner "ausgefranster" rechter Rand des jeweiligen Textblockes. Das Verwenden von Bindestrichen als Trenner ist dabei dann keine gute Idee, da die Zeilenumbrüche von Browser zu Browser aufgrund der Standardzeichengröße und der Bildschirmauflösung unterschiedlich sein können.Besser ist es, weiche Trennstriche (­ engl. soft hyphen) zu verwenden, die vom HTML-Interpreter des Browsers jeweils nach Bedarf angezeigt werden.
| Beispiel: | Das Wort "Binnenfrachtschifffahrtskapitän"
erweitert um weiche Trennstriche, z.B. so:
Binnen­fracht­schiff­fahrts­kapitän,
wird je nach Bedarf automatisch an einer der vier vorgegebenen
Stellen getrennt. Alle anderen Trennzeichen bleiben unsichtbar.
|
Zwei- / Mehrspaltigkeit
Häufig besteht der Wunsch, ein inhaltliches Element, wie z.B.
- ein Bild mit Titel (Übung 1),
- einen kleinen umrahmten Textblock mit Hinweisen (Übung 2) oder auch
- eine Liste mit Verweisen zur Navigation in der Seite (siehe links / Kapitel 7)
links oder rechts am Rand des Darstellungsbereiches anzuordnen und den restlichen
Inhalt der Seite darum "herumfliessen" zu lassen. Für diesen
Bereich erzielt man damit eine zweispaltige Darstellung.
Dies ist einfach durch das CSS-Schlüsselwort float in Verbindung mit einem DIV-Container, in den man das am Rand zu fixierende Element einbettet, zu erreichen. Dieser muss vor dem "umfliessenden" Text / Inhalt stehen. Schachtelt man mehrere solcher Container / Bereiche geeignet, kann auch eine drei- oder vierspaltige Darstellung erreicht werden.
Das folgende Beispiel veranschaulicht / erläutert dies:
<div style="float: right;
width:240px;
border: 2px solid red;
border-radius: 6px;
margin: 6px 6px 6px 10px;
padding: 6px;">
"Textkasten" mit der Breite
240px rechts am Rand
</div>
Dieser Text / Absatz folgt in der HTML-Datei nach der Festlegung des am Rand fixierten, "floatenden" Inhaltes. Er füllt den gesamten links davon befindlichen Inhaltsbereich.
</p>
<p style="padding: 6px;">
Es kann sich dabei auch um mehrere aufeinander folgende Absätze handeln.
Die Darstellung bleibt solange automatisch zweispaltig, wie es die Höhe
des fixierten Inhaltes (hier der roten Box) inklusive der eingestellten Ränder
erfordert. Danach wird wieder die gesamte Breite des verfügbaren Bereiches
genutzt, d.h. automatisch wieder einspaltig dargestellt. <br>
Hätte dieser zweite Absatz unterhalb des fixierten Bereiches dargestellt
werden sollen, wäre dies durch die Erweiterung der style-Anweisung
im p-Tag um "clear: right;" leicht zu erreichen gewesen.
</p>
Erstellt dann eine neue HTML-Datei mit dem Namen
Übung 1:
Als erste Übung soll ein 500 Pixel breiter Bereich mit einem einfachen "soliden" Rahmen der Stärke 1px, der ein Bild mit Beschriftung beinhaltet, das rechts angeordnet ist und links vom Text "umflossen" wird, erzeugt werden. Das Bild könnt ihr durch Anklicken/Rechtsklick/Grafik speichern unter... in euer HTML-Verzeichnis herunterladen. Es ist auf eine Breite von 350px skaliert. Die Rahmenecken sind mittels des Attributes border-radius abgerundet. Bitte beachtet die Innen- und Außenabstände.
Kohlefrachter auf dem Datteln-Hamm-Kanal
Übung 2:
unten
Die zweite Übung besteht aus einem 100 Pixel breiten, links angeordneten Bereich, der unterschiedliche Rahmenteile besitzt (border-left: double; border-top/bottom: dotted;) und rechts von diesem Text "umflossen" wird. Der Inhalt besteht nur aus den beiden Worten "oben" und "unten", die durch eine horizontale Trennlinie optisch getrennt sind. Auch der gesamte Übungstext ist durch horizontale Trennlinien oberhalb und unterhalb optisch hervorgehoben. Bitte auch hier näherungsweise die Innen-/Außenabstände sowie die Textausrichtung (text-align: center;) beachten!
| © K. Milzner, 2014 |