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>
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>
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.
|
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>
<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>
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 |