E-Book Startseite Karteikarten-Programm
0
Inhalt dieser Seite
  1. Rahmen
  2. Außenabstand
  3. Innenabstand

Rahmen

Oft werden, um Objekte herum, Rahmen erstellt. Manchmal eignet es sich, verschieden farbige Rahmen zu verwenden oder nur an einer oder zwei Seiten einen Rahmen zu erstellen. Doch man kann die Rahmen nicht nur ein- oder ausblenden, sondern die Breite (Rahmendicke) festlegen, die Strich-Art (Rahmentyp) festlegen und die Rahmenfarbe festlegen. Es gibt 2 verschiedene Haupt-Eigenschaften mit denen man Rahmen erstellen kann: border und outline. Der Unterschied zwischen den Rahmen ist, dass "border" verwendet werden kann, wenn man den Rahmen nicht um das vollständige Objekt haben möchte sondern auch nur an 1, 2 oder 3 Seiten. Ein weiterer bedeutender Unterschied ist folgender: Bei "border" wird der Rahmen dem Objekt hinzugefügt. Beispiel: Ein Bild hat eine Breite von 100px an der linken und der rechten Seite wird ein Rahmen von 2px hinzugefügt. Nun ist dieses Objekt insgesamt 104px breit. Bei "outline" wird der Rahmen auf das Objekt darüber gemalt. Beispiel: Ein Bild hat eine Breite von 100px an allen Seite wird ein Rahmen von 2px hinzugefügt. Nun ist das Objekt immer noch 100px breit. Dem Bild fehlt aber auf der linken, der rechten, der oberen und der unteren Seite 2px. Welche Variante für Sie besser geeignet ist, müssen Sie selbst entscheiden. Es gibt noch ein paar andere "kleinere" Unterschiede. Übrigens: "outline" wird noch nicht von jedem Browser unterstützt, obwohl es schon seit CSS 2.0 zum Standard gehört. Es gibt bei "border" insgesamt 4 bzw. 16 verschiedene Eigenschaften: border-style (Rahmentyp), border-width (Rahmenbreite), border-color (Rahmenfarbe) und border (Rahmen "allgemein"). Bei allen dieser Eigenschaften kann man die Wörter top (oben), left (links), bottom (unten) oder right (rechts) zwischen die Wörter border und das 2. Wort (wenn vorhanden) hinzufügen. Das sieht, dann beispielsweiße so aus: border-top-style . Mit der Eigenschaft border kann man die einzelnen "Untereigenschaften" (Typ, Dicke, Farbe) koppeln. Dabei müssen Sie die verschiedenen Begriffe oder Zahlen mit Leerzeichen trennen. Es muss keine Reihenfolge beachtet werden. Bei "outline" ist das Ganze sehr ähnlich. Es gibt auch hier 4 verschiedene Eigenschaften: outline-style (Rahmentyp), outline-width (Rahmenbreite), outline-color (Rahmenfarbe) und outline (Rahmen "allgemein"). Bei "outline" ist es nicht möglich top, left, bottom oder right hinzuzufügen. Mit der Eigenschaft outline kann man die einzelnen "Untereigenschaften" (Type, Dicke, Farbe) koppeln. Dabei müssen auch hier die verschiedenen Begriffe oder Zahlen mit Leerzeichen getrennt werden. Es muss dabei ebenfalls keine Reihenfolge beachtet werden. Bei border-style, border-width und border-color kann man die Eigenschaften auch "stapeln". Bei einer Angabe gilt es für alle. Bei zwei Angaben gilt die erste Angabe für oben und unten und die zwei Angabe für links und rechts. Bei drei Angaben gilt die erste Angabe für oben, die zweite Angabe für links und rechts und die dritte Angabe für unten. Bei vier Angaben gilt die Reihenfolge oben, rechts, unten, links. Bei border-style bzw. outline-style können Sie folgende Angaben notieren: none (kein Rahmen), hidden (kein Rahmen), solid (einfache Linie), dashed (gestrichelte Linie), dotted (gepunktete Linie), double (doppelte Linie), groove (spezieller 3D-Effekt), ridge (spezieller 3D-Effekt), inset (spezieller 3D-Effekt) und outset (spezieller 3D-Effekt). Bei border-width können Sie folgende Angaben verwenden: medium (mittelstark), thin (dünn), thick (dick), solid (normal) oder Zahlen (z. B. 4px). Bei border-color können Sie englische Farbangaben (red, blue, ...) oder HEX-Farbangaben (#0000FF, #FF0000, ...). In dem Beispiel fügen wir allen Bildern (per border) und allen Text-Absätzen (per outline) einen speziellen Rahmen hinzu:

img {
    border-top-style: double;
    border-top-color: #0000FF;
    border-width: thin medium thick medium;
    border-left: #FF0000 dotted;
    border-right: #00FF00 double;
    border-bottom-style: solid;
}
 
p {
    outline: #00FF00 10px outset;
}
Anzeigebeispiel
Anzeigebeispiel



Außenabstand

Oft wird ein Außenabstand verwendet um Text von Bildern fernzuhalten oder dass Objekte nicht zu dicht an den Bildschirmrand gelangen. Es gibt insgesamt 5 verschiedene Eigenschaften für das Bestimmen der Außenränder. Es gibt die Möglichkeit den oberen Außen-Rand, den rechten Außen-Rand, den unteren Außen-Rand, den linken Außen-Rand und den allgemeinen Außen-Rand extra anzusprechen. Bei allen den 5 verschieden Außen-Rand-Arten muss man nummerische Angaben inkl. der Maßeinheit (px, em, %, ...) verwenden. Bei der allgemeinen Außen-Rand-Eigenschaft haben Sie folgende Möglichkeiten: eine Angabe (gilt für alle), zwei Angaben (1. Angabe entspricht oben und unten - 2. Angabe entspricht rechts und links), drei Angaben (1. Angabe entspricht oben - 2. Angabe entspricht rechts und links - 3. Angabe entspricht unten) oder vier Angaben (1. Angabe entspricht oben - 2. Angabe entspricht rechts - 3. Angabe entspricht unten - 4. Angabe entspricht links). Hier noch die Eigenschaften mit denen Sie die CSS-Gestaltung nutzen können: margin-top (Außen-Rand oben), margin-left (Außen-Rand links), margin-bottom (Außen-Rand unten), margin-right (Außen-Rand rechts) und margin (Außen-Rand allgemein). Wenn negative Werte verwendet werden, überlappen sich die Elemente. Dies kann in manchen Fällen relativ gestalterisch aussehen. In unserem Beispiel weisen wir den Überschriften (h2) spezielle Randeffekte zu:

h2 {
    margin-left: 30px;
    margin-top: 15px;
    margin-bottom: 40px;
}
Anzeigebeispiel
Anzeigebeispiel



Innenabstand

Innenabstand Der Innenabstand ist ähnlich zu handhaben wie der Außenabstand. Es gibt den oberen, rechten, unteren, linken und allgemeinen Innenabstand. Statt dem Wort margin müssen Sie padding verwenden. Bei dem allgemeinen Innenabstand gelten die gleichen Zahlenregeln wie oben. Auf dem Bild können Sie sehen, dass "margin" der Abstand vom Rahmen bis zum nächsten Element bzw. einem Elternelement ist. "padding" dagegen ist der Abstand vom Inhalt-Element (z. B. Text oder Bild) bis zum Rahmen. In unserem Beispiel geben wir allen Bildern einen Rahmen und einen Innenabstand. Als Beispielbild verwenden wir ein einfarbiges Bild, sodass Sie den weißen Innenabstand sofort erkennen.

img {
    border: #FF0000 12px solid;
    padding-bottom: 1em;
    padding-left: 2em;
    padding-right: 2em;
    padding-top: 0.5em;
}
Anzeigebeispiel
Anzeigebeispiel



Design:
 


Logo
Benjamin Jung
Krummstr. 9/3
73054 Eislingen

E-Mail: info@homepage-webhilfe.de
Webseite: www.homepage-webhilfe.de