StyleAssistant |
| Startseite |
 |
| Screenshot |
|
| Kurzanleitung |
|
| Download |
|
| Kurse & Infos |
|
| >Tipps & Tricks< |
|
| Unterstützer |
|
| TMXtensions |
|
| ?Freeware! |
|
| About TM |
|
Stand: 07.12.2002 |
Tipps & Tricks – Tipp 60
|
 |
 |
 |
|
60.
DIV-Blöcke in Netscape 4.x darstellen (16.08.2001)
Der Einsatz des HTML-Elements DIV ermöglicht die Seitenaufteilung in separate Blöcke, deren Positionierung und Formatierung sich mit CSS leicht bewerkstelligen lässt. Eine unrühmliche
Ausnahme stellt die Darstellung in allen Versionen von Netscape 4.x dar. Typischerweise werden solche Blöcke nur so weit aufgespannt, wie der Inhalt reicht (siehe die unten stehenden Vorher/Nachher-Abbildungen).
Abhilfe schafft die Verwendung der proprietären CSS-Definition Layer-Background-Color, die man an die gewählte Hintergrundfarbe anpasst. Da auch das noch nicht ausreicht, wird zusätzlich am Clipping
der DIV-Box "geschraubt" (siehe Tipp 57)
und die Breite bzw. Höhe des sichtbaren Ausschnitts auf die für Width und Height angegebenen Werte gesetzt. Absolute oder relative Positionierung ist eine weitere Voraussetzung,
um das gesteckte Ziel zu erreichen.
Im Beispiel 60 werden die DIV-Klassen "normal" und "spezial" definiert, wobei letztere die genannten Zusätze aufweist.
CSS:
DIV.normal
{
Color: #FFFFFF;
Background-Color: #FF0000;
Width: 200px;
Height: 100px;
Top: 10px;
Left: 50px;
Position: relative;
}
DIV.spezial
{
Color: #FFFFFF;
Background-Color: #FF0000;
Width: 200px;
Height: 100px;
Top: 10px;
Left: 50px;
Position: relative;
Layer-Background-Color: #FF0000;
Clip: rect(0,200px,100px,0);
}
Lohn der relativ kleinen Mühe – unter Inkaufnahme einer Netscape-only CSS-Eigenschaft – ist die Darstellung von DIV-Blöcken wie man es von anderen grafischen Browsern auch ohne Tricks erwarten kann.
|
|
 |
|
 |
