senäh

17senäh und so…

Code Snippet Thumb

HTML/CSS/JS
11. Mai 2012
Kommentare: 0

CSS-Code-Snippet-Friday: 2 Ränder, Wörter zum Umbrechen zwingen und vertikales Zentrieren mehrzeiliger Texte

Kategorien: HTML/CSS/JS | 11. Mai 2012 | Kommentare: 0

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

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+.

Autor: Enno

Ich bin Enno. PHP ist mein Ding, aber auch alles Neue rund um die Themen HTML5, CSS3 & Co finde ich interessant. Ich mag es Leuten zu helfen und mein Wissen weiterzugeben. Sollte dir mein Beitrag gefallen haben, lass doch nen Kommentar da oder benutze einen der Social Buttons, um deinen Dank auszudrücken ;)