Es haben sich ein paar bloggenswerte Code-Snippets bei mir angesammelt. Die werde ich heute mal geballt auf die Welt loslassen. Erstmal das Ziel vor Augen:
Ergebnis
2x border dank outline
Es gibt eine mir bis dato unbekannte Technik, um recht einfach an einen zweiten Border zu kommen: outline.
#doubledborder {
border:2px solid #666;
outline:1px solid #aaa;
}
Vertikales Zentrieren – auch für mehrzeilige Texte
Bisher wusste ich, dass ich Text vertikal zentrieren kann, indem ich die line-height auf den gleichen Wert setze wie die Höhe des entsprechenden Containers.
#center-it {
height:30px;
line-height:30px;
}
Das funktioniert allerdings nur für einzeiligen Text. Für Inhalt, der sich über mehrere Zeilen erstreckt, muss man Tabellenverhalten imitieren. Was? Tabellen? Ja, hier ist das ok. Schließlich handelt es sich beim vertikalen Zentrieren um einen gestalterischen Aspekt, nicht um einen Strukturellen. Entsprechend dürfen wir bei der Gestaltung (=CSS) auch den Tabellen-Hack verwenden. Solange das table-Tag unserem HTML-Markup fern bleibt, ist alles im Lot.
Wir brauchen dazu jedoch einen Wrapper, der die Tabelle spielt. Der eigentlich zu zentrierende Inhalt ist dann unsere Tabellenzelle.
#wrapper {
display: table;
}
#content {
display:table-cell;
vertical-align:middle;
}
Umbrechen langer Wörter
Um sicherzustellen, dass episch lange Wörter nicht das Layout zerhauen, bietet sich diese bei Elmastudio gefundene CSS-Eigenschaft an:
word-wrap: break-word;
Ergebnis
Hier noch ein kleines Live-Beispiel für alle, denen das Bild oben nicht hands-on genug ist oder die einfach ein wenig mit Firebug o.ä. rumschnüffeln wollen 😉
Noch ein kurzer Blick auf den Browser-… sagen wir besser Internet-Explorer-Support:
- vertikales Zentrieren: ab IE 6
- lange Wörter umbrechen: ab IE 7
- doppelte Ränder: ab IE 8
Der Vollständigkeit halber: die ersten beiden Hinweise stammen übrigens von Nettuts+.
