 1) Außenränder mit CSS
|
|
Insbersondere die Formatierung eines Tabellenrandes wurde bisher mit HTML umgesetzt, von den unterschiedlichen Browser(-versionen) aber nicht einheitlich angezeigt. Heute formatiert man Ränder mit CSS. Die gängigen Browser beherrschen die richtige und einheitliche Auslegung solcher Anweisungen!
| |
Ränder mit CSS
Ränder für Seitenelemente wie z.B. für <div>, <p>, <span> oder <table> mit CSS formatieren. Auf dieser Seite werden einige Beispiele zum Thema Randformatierung dargestellt. Farbe, Breite und Rahmentyp (style) wird unterschieden, Varianten in der Notierung werden aufgezeigt.
Außenränder mit CSS-Inlineanweisungen
Die CSS-Lösung für einen farbigen Rand ist recht simpel und kann für folgende Bereiche festgelegt werden:
|
- Rahmenbreite
- Ramentyp (style)
- Rahmenfarbe
|
Beispiel einer CSS-Inlineanweisung für einen Rahmen (Außenrand). Die Inlineanweisung steht im HTML-Tag und gilt deshalb nur für das betreffende Element.
<table style="border:1px solid #9E8DE3;" ... >
<p style="border:1px solid #9E8DE3;">
<div style="border:1px solid #9E8DE3;">
<span style="border:1px solid #9E8DE3;">
<td style="border:1px solid #9E8DE3;">
|
|
Beispiel einer CSS-Inlineanweisung für einen Rahmen (Außenrand), die mit weiteren CSS-Anweisungen für Breite und Innenabstand kombiniert weurde. Die Inlineanweisung steht im <div>-Tag und gilt deshalb ausschließlich für dieses Seitenlement.
<div border:1px dotted #0070C0;width:100px;padding:10px;" ...
|
|
Außenränder mit globaler Definition
Im <head>-Bereich notiert gilt die CSS-Anweisung für alle betreffenden Elemente innerhalb des HTML-Dokuments. Als Beispiele nehme ich hier das <table>-Element und eine freie Klasse mit dem Bezeichner 'RandRot'.
im Head-Bereich:
<style type="text/css">
<!--
table {
border:3px double #AFAFAF;
}
.RandRot {
border:2px double #FF0000;
}
-->
</style>
im Body-Bereich:
<table class="RandRot" ...
<p class="RandRot" ...
<div class="RandRot" ...
|
|
Varianten der Notierung und Formatierung
Als Beispiel nehme ich hier wieder eine CSS-Formatierung für das <table>-Element. Ebenso können Sie die Ränder und Rahmen für andere Elemente oder für freie Klassen definieren.
1 Strichstärken
Die Kurzschreibweise - alle Ränder gleich
table {
border:3px double #FFB9C0;
}
|
|
unterschiedliche Strichstärken
Die Strichstärken der Seitenränder sind hier separat notiert und könnten dann unterschiedlich stark festgelegt werden.
table {
border-color: #846ADD;
border-style: solid;
border-top-width: 1px; */ Randbreite oben /*
border-right-width: 3px; */ Randbreite rechts /*
border-bottom-width: 3px; */ Randbreite unten /*
border-left-width: 1px; */ Randbreite links /*
}
|
|
2 Rahmenfarben
unterschiedliche Rahmenfarben
Die Rahmenfarben der Seitenränder sind hier separat notiert und können dann unterschiedlich festgelegt werden.
table {
border-style: dashed;
border-width: 1px;
border-top-color: #00AFFF; */ Rahmenfarbe oben /*
border-right-color: #0070C0; */ Rahmenfarbe rechts /*
border-bottom-color: #AF00FF; */ Rahmenfarbe unten /*
border-left-color: #FF9F00; */ Rahmenfarbe links /*
}
|
|
3 Rahmentypen
Rahmentypen (style) 3D Typen
Gilt für Rahmen mit 3D-Effekt: Aus dem eingetragenen Farbwert für den Tabellenrahmen errechnet der FF und der IE die Farbe für die 'beleuchtete' Seite und die Farbe für die Schattenseite auf seine eigenenwillige Art und Weise. Daher sind unterschiedliche Darstellungen in den Browsern nicht zu vermeiden! Nicht alle 3D Effekte sind für sehr helle Farben geeignet.
Übersicht 1 border-styles:
- groove = 3D-Effekt
- ridge = 3D-Effekt
- inset = 3D-Effekt
- outset = 3D-Effekt
table {
border:8px groove #B3AAEC;
}
|
|
table {
border:8px ridge #B3AAEC;
}
|
|
table {
border:8px inset #B3AAEC;
}
|
|
table {
border:8px outset #B3AAEC;
}
|
|
Rahmentypen (style) Strich-Typen
Übersicht 2 border-styles:
- dotted = gepunktet
- dashed = gestrichelt
- solid = durchgezogen
- double = doppelt durchgezogen
table {
border:6px dotted #B3AAEC;
}
|
|
table {
border:6px dashed #B3AAEC;
}
|
|
table {
border:6px solid #B3AAEC;
}
|
|
table {
border:6px double #B3AAEC;
}
|
|
Auch die Rahmentypen der Seitenränder kann man separat notieren und könnten dann unterschiedlich festgelegt werden. Das macht aber in den wenigsten Fällen Sinn.
<style type="text/css">
<!--
table {
border-color: #B3AAEC;
border-width: 6px;
border-top-style: groove; */ Rahmentyp oben /*
border-right-style: ridge; */ Rahmentyp rechts /*
border-bottom-style: groove; */ Rahmentyp unten /*
border-left-style: ridge; */ Rahmentyp links /*
}
-->
</style>
 2) Zellenrandformatierung mit CSS
3) Tabellen + Zellenrand mit CSS
4) Tabellenrand mit HTML
Seitenelemente mit Rand - CSS formatiert
Ränder für Grafiken mit CSS formatieren
anschauliche Beispiele für Rahmentypen mit CSS
Grafik optisch vergrößern Ränder mit CSS formatieren
Darstellungsprobleme durch 'whitespaces'
Problembehandlung - Ränder von Grafik-Verweisen
Tabellen-Attribute
|
Home • CSS • Außenränder mit CSS