Sie sind hier: Startseite · über diese Seiten · Tips'n Tricks · CSS

Tips und Tricks zum Thema CSS

• Die Trennlinie <hr> gestalten
• Wie "cleared" man floats? - oder:
  ein div so weit verlängern, daß es den ganzen Inhalt umschließt
• Ich hab einem div 100% Höhe mitgegeben. Warum funktioniert das nicht? Die derzeit wohl häufigste Anfängerfrage zum Thema CSS.
  Ein Beitrag dazu in Kürze hier.

Wie kann man die Trennlinie als 1px Linie darstellen?

hr {
 color : #000;
 height : 1px;
 padding : 0;
 border-color : #000;
 border-width : 1px 0 0 0;
 border-style : solid;
 margin: 1em 0;
}

Wie kann man ein Bild als Trennlinie verwenden?

<div class="hr1"><hr /></div>

und ins CSS:

.hr1 {
 margin : 1em 0;
 height: 10px;
 background: transparent url(bild.gif);
}

.hr1 hr {
 display: none;
}

Eine CSS box so weit "verlängern", daß sie den ganzen Inhalt umschließt.
oder
wie "cleared" man floats?

in dieser oder ähnlicher Form eine der häufigsten Fragen in diversen Foren rund um CSS. Eine sehr schöne Lösung des Problems findet sich bei externer Link: positioniseverything.net

Zum Verständnis kurz die Einleitung dieses Beitrags:

Ein float innerhalb eines Containers zwingt den unteren Rand des umschließenden Containers nicht automatisch so weit nach unten, daß der floatende Inhalt vom Container umschlossen wird ...

Die Lösung sieht dann am Beispiel eines divs namens "wrap" so aus:

	
#wrap:after {
	content : ".";
	display : block;
	height : 0;
	clear : both;
	visibility : hidden;
}

* html #wrap {height: 1%;}
*:first-child+html #wrap {height:1%;}