Category: CSS

CSS: Blockelement in HTML5 zentrieren

Zum Zentrieren eines Blockelementes (<div>) konnte man in HTML4 noch das Attribut align verwenden:

<div align="center">
  <div>
    ...

Damit wird der zweite div-Block bei Angabe einer festen Breite innerhalb des ersten Blocks zentriert.

Mit HTML5 ist allerdings das align-Attribut für div-Elemente nicht mehr zulässig, d.h. das Zentrieren muss in HTML5 über CSS realisiert werden.

 

CSS: Problem beim Rendern von Schriftgrößen in Safari (iPhone)

Die Safari-Version, welche im iOS (iPhone/iPodTouch/iPad) verwendet wird “ignoriert” teilweise beim Render von Webseiten die mit font-size definierten Schriftgrößen bzw. passt diese automatisch an, um die Lesbarkeit zu verbessern. An bestimmten Stellen ist dies nicht schlecht, allerdings kann das auch zu unschönen Veränderungen am Design führen. Diese automatische Anpassung kann jedoch durch folgende CSS-Zeilen verhindert werden:

 

CSS: Abschneiden zu langer Texte

Des öfteren kommt es vor, dass man Text-Ausgaben (beispielsweise für Tabellen) nur gekürzt darstellen möchte. Dies würde sich zwar schon beim Zusammenstellen des HTML-Codes serverseitig realisieren lassen, allerdings führt ein einfaches Abschneiden des Textes nach n Zeichen (besonders bei Nicht-Monospace-Schriftarten) nicht zu einer einheitlichen “Textlänge”. Eine Möglichkeit bietet hierbei die CSS-Eigenschaft text-overflow.

Hi-speed HTML/CSS mit zen-coding

“Hi-speed coding for HTML and CSS” lautet das Motto bei zen-coding. Tja, was soll ich noch groß dazu sagen: es stimmt. Die Entwickler von zen-coding haben einige Plugins für Text-Editoren entwickelt, die die Eingabe von HTML und CSS extrem vereinfachen. Neben Editoren wie NetBeans und einigen anderen, ist darunter natürlich auch der Mac-Editor TextMate mit zwei Bundles vertreten: TextMate.zen.CSS und TextMate.zen.HTML.