kronn.de

CSS - Abstände, näher betrachtet

CSS bietet einige Möglichkeiten an, Rahmen um alles mögliche zu ziehen. Interessant wird das in Zusammenhang mit Innen- und Außenabständen.

Vorbereitung

In den Empfehlungen des World Wide Web Consortium (W3C) wird für CSS das sogenannte "box-model" eingeführt. In CSS1 wird das auch noch recht einfach dargestellt, sodass ich es auch hier kurz aufführen möchte:

  _______________________________
 |                               |
 |        margin (transparent)   | Außenabstand
 |  ___________________________  |
 | |                           | |
 | |      border               | | Rahmen
 | |  _______________________  | |
 | | |                       | | |
 | | |    padding            | | | Innenabstand
 | | |  ___________________  | | |
 | | | |                   | | | |
 | | | |  content          | | | | Inhalt
 | | | |___________________| | | |
 | | |_______________________| | |
 | |___________________________| |
 |_______________________________|

        |                  |       Breite des
        |- Element width - |       Element-
        |                  |       inhalts

 |                               | effektive Breite
 |----------- Box width ---------| des Elements,
 |                               | also der Box

Alle Elemente haben demnach um ihren Inhalt herum einen Innenabstand (padding). Um diesen herum legt sich der Rahmen (border). Erst danach kommt der Außenabstand (margin), der immer durchsichtig ist. Im Augenblick ist für uns vor allem wichtig, dass Hintergrundbilder und -farben auch für den padding-Bereich gelten. Der margin-Bereich ist echter (transparenter) Abstand zum nächsten Element. Dazwischen liegt der Rahmen, der Inhalt und Innenabstand umschließt.

Ich wiederhole dieses Konzept so oft, weil es sehr wesentlich für CSS ist. Dieses box-model wird wirklich auf jedes Element angewendet. Jede Überschrift und jeder Textabsatz haben Innen- und Außenabstand, jeder Link und jedes Bild haben diese Abständen und auch <strong> und <em> unterliegen diesem theoretischen Modell. Einzig durch die Standardwerte fällt das manchmal nicht auf.

Wer Interesse hat, kann sich in der Spezifikation von CSS2 die aktuelle Version ansehen. Der einzige Unterschied liegt in der Aufteilung in vier verschiedene Richtungen, aber das ist nach der Lektüre dieser Zeilen sowieso klar.

Rahmenhandlung

Wie jedesmal behaupte ich auch diesmal, dass CSS wesentlich mehr kann als nur HTML. Die Kontrolle von Abständen und Rahmenlinien gehört zu den Besonderheiten von CSS, wie schon das oben erläuterte box-model zeigt. Höchste Zeit, einen Strich unter die Vergangenheit zu ziehen und sie in einem schönen Rahmen an die Wand zu hängen.

Rahmenlinien

Um einen Rahmen um ein Element, z. B. eine Überschrift, zu ziehen, reicht es, die Art des Rahmens anzugeben: h1 { border-style:solid; }

Natürlich gibt es noch mehr Rahmearten als einfache, solide Rahmen. Im Einzelnen sind folgende Werte erlaubt:

  • none = kein Rahmen (bzw. unsichtbarer Rahmen)
  • hidden = kein Rahmen (bzw. unsichtbarer Rahmen), in erster Linie für Tabellen gedacht, verdeckt u. U. auch den Rahmen von benachbarten Tabellenzellen.
  • dotted = gepunkteter Rahmen
  • dashed = gestrichelte Rahmelinien
  • solid = einfache, durchgezogene Linie
  • double = doppelt durchgezogen, also zwei Linien
  • groove = 3D-Effekt
  • ridge = 3D-Effekt
  • inset = 3D-Effekt
  • outset = 3D-Effekt

Netscape 4 zeigt die Rahmenlinien nur an, wenn gleichzeitig eine Rahmendicke angegeben ist. Damit der Rahmen um unsere Überschrift auch von Netscape 4.0 angezeigt wird und außerdem nicht ganz so dick aussieht, sollten wir zusätzlich noch die Rahmenbreite angeben: h1 { border-style:solid;
border-width:2px; }

Jetzt haben wir einen einfachen Rahmen um unsere Überschrift, die genau 2 Pixel breit ist. Ich rate dazu, Rahmenbreiten immer in Pixel (px) anzugeben, da andere Einheiten wie Prozent, Zentimeter oder Schriftgrößen zwar möglich sind, aber meistens zu ungenau sind. Außerdem wird sowieso jede Angabe erst in Pixel umgerechnet um die Grafikkarten und den Monitor nicht weiter zu verwirren.

Um außerdem noch Farbe einzustellen und so den Rahmen an Textfarbe und Hintergrundfarben und -bilder anzupassen, fügen wir noch eine Zeile hinzu. Für dieses Beispiel habe ich ein dunkelblau ausgewählt (hexadezimal-Code:#000099). h1 { border-style:solid;
border-width:2px;
border-color:#000099; }

Außer der Tatsache, dass Rahmen mit Farbgebung meist besser aussehen, sind die weiter oben genannten 3D-Effekte erst mit Farben sichtbar. Einige Browser verwenden zwar als Kontrastfarbe einfach grau, aber so richtig sieht man den Effekt erst, wenn Farben definiert sind.

An sich ist der Rahmen jetzt fertig, aber natürlich kann man die Rahmen nicht nur im ganzen definieren, sondern auch für jede Seite einzeln. Wenn man den bereits erwähnten beispielhaften dunkelblauen Rahmen nur unter der Überschrift sehen möchte, kann man das dem Browser ruhig sagen: h1 { border-bottom-style:solid;
border-bottom-width:2px;
border-bottom-color:#000099; }

Weitere Möglichkeiten sind, anstelle von bottom entweder left, right oder top einzusetzen. Zwei Richtungen auf einmal in diese Eigenschaften einzufügen ist leider nicht möglich. Dafür müssten dann zwei Definitionen, jeweils eine für die gewünschte Seite angegeben werden.

Wer übrigens keinen Rahmen um Bilder will, die auch Links sind, muss einfach nur img { border-style:none; } angeben. Da diese Definition für alle Bilder gilt, sind natürlich auch solche eingeschlossen, die Links sind. Eine andere Möglichkeit ist es natürlich, für alle Bilder einen bestimmten Rahmen anzugeben.

Innen- und Außenabstand

Die Rahmenlinien müssen natürlich auch irgendie vom Rest abgegrenzt werden. Zu einen nach innen zum Elementinhalt, zum anderen nach außen zu den anderen Elementen. Dafür gibt es Innen- und Außenabstand. Das anfangs erwähnte box-model wird jetzt wichtig.

Polsterung

Der Innenabstand wird über die padding-Eigenschaft angegeben und bezeichnet den Abstand zwischen unserer schicken Rahmenlinie und dem Inhalt. Wer des englischen kundig ist, wird erkannt haben, dass der Innenabstand mit Polsterung (padding) bezeichnet wird. Wenn wir also nicht darauf vertrauen wollen, dass der Browser unserer Überschrift standardmäßig so eine Polsterung zwischen Inhalt und Rahmen spendiert (muss er nämlich nicht!), dann müssen wir ihn selbst angeben. Für den Anfang reicht: h1 { padding:10px; }

Wie schon bei der Rahmenbreite können wir als Wert zwar alles in Zentimetern, Inch und Prozent angeben, sinnvoll sind aber nur Pixel und vielleicht noch em's, also Zeichenhöhen. Da aber Rahmenlinien meist recht dünn gehalten sind, sind zumindest für mich Pixel die passendste Maßeinheit

Einige von euch haben vielleicht noch ein Problem damit, dass der Innenabstand mal wieder für alle vier Seiten gilt. Das ist zwar richtig, aber nicht unveränderlich. Genau wie schon beim Rahmen ist es auch hier möglich, die Richtung anzugeben: h1 { padding-top:10px;
padding-right:5px;
padding-bottom:10px;
padding-left:5px; }

Praktisch wirkt sich der rechte Innenabstand natürlich erst aus, wenn ihr eine längere Überschrift habt. Aber da der Innenabstand den Element-Hintergrund übernimmt und es ja außerdem noch den Außenabstand gibt, sollte man sich die Möglichkeit vormerken. Nebenbei kann jedes Element eine Polsterung verpasst bekommen, nicht nur Überschriften.

Abstand

Eben schon erwähnt wird er hier zum kurzfristigen Hauptdarsteller: Der Außenabstand oder auch margin. Eigentlich könnte ich den Außenabstand aber auch als Bruder des Innenabstands bezeichnen. Die Definition sieht beinahe genauso aus: h1 { margin-top:0px;
margin-right:15px;
margin-bottom:10px;
margin-left:15px; }

Diesmal habe ich gleich für alle vier Seiten verschiedene Werte angegeben, aber es natürlich genauso möglich, einmalig h1 { margin:15px; } zu definieren. Wenn wir nun auf unsere Überschrift, die ja bereits einen Rahmen, vielleicht sogar einen besonderen Hintergrund hat, diesen Außenabstand anwenden, fällt sofort auf, wie das box-model funktioniert.
Der margin ist transparent, kein Rahmen und kein Hintergrund des zugehörigen Elemtens werden weitergegeben.

Dadurch kann man z.B. die effektive Rahmenausdehnung eingrenzen und mit ein wenig Geschick ansprechende Layouts erstellen.

Ausblick

Viele der bisherigen Eigenschaften kann man auch in einer Kurzschreibweise angeben. Weil das ungemein praktisch ist, werden sie der Schwerpunkt der nächste Ausgabe. Als kleine Ergänzung dazu gibt es noch einige Ergänzungen zu Text- und Hintergrundeigenschaften.

Relevante und genannte URLs

  1. Box Modell (CSS 1)
  2. Box Modell (CSS 2)

Diese Internetseite wurde von kronn von Hand getippt und
besteht aus geprüftem XHTML und CSS.
Das hat viele Vorteile.

Weitere Seiten mit diesem Vorteilen preisen gutes Webdesign an, enthalten Texte oder sind ein Weblog.
So ist das Leben eben.
http://kronn.de/ © Kronn/2003-2005


Fatal error: Uncaught Error: Call to undefined function set_magic_quotes_runtime() in /var/www/K1054131198/docroot/kronn.de/etc/counter/counter.php:61 Stack trace: #0 /var/www/K1054131198/docroot/kronn.de/templates/default.php(52): include() #1 /var/www/K1054131198/docroot/kronn.de/index.alt.php(51): include_once('/var/www/K10541...') #2 {main} thrown in /var/www/K1054131198/docroot/kronn.de/etc/counter/counter.php on line 61