Tipps & Tricks rund ums Webdesign

Überschriften mit kurzen Linien versehen

Möchte man bei der Gestaltung von Überschriften die z.B. CSS Eigenschaft "border" zur Hilfe nehmen, so wird im Normalfall die Linie über die maximale Länge durchgezogen. Um dies zu verhindern, fügt man den Heading-Tags h1-h6 lediglich die Eigenschaft "display: inline-block" hinzu.

Ein Beispiel dafür finden Sie auf dieser Seite unter Leistungen.

Überschrift mit einer kurzen und unterschrichener Linie
h3 {
   border-bottom: 1px dashed #565656;
   display: inline-block;
}

Darstellung der Google Web Fonts im Internet Explorer

Die Verwendung von Web-Fonts hat in den letzten Jahren zunehmend an Bedeutung gewonnen. Wenn es mal nicht die Arial, Verdana, Courier oder die schlimmste von allen Comic Sans sein soll, dann bieten die Google Web Fonts mittlerweile genügend Alternativen. Im Übrigen stehen diese Schriften alle unter einer Open Source Lizenz und können somit kostenlos für private oder kommerzielle Zwecke verwendet werden.

Nun zu der eigentlichen Problematik im Zusammenspiel mit dem Internet Exporer. Bis einschließlich Version 10 (Stand Juli 2012) wird die Schrift nicht angezeigt, wenn man die Schrift nur per @font-face in der CSS-Datei lädt:

@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  src: local('PT Serif Bold'), local('PTSerif-Bold'), url('http://themes.googleusercontent.com/static/fonts/ptserif/v4/QABk9IxT-LFTJ_dQzv7xpLrIa-7acMAeDBVuclsi6Gc.woff') format('woff');
}

Die Lösung für das Problem, man bindet die Schrift per <link>-Tag im Header der HTML-Datei ein:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Serif:700">

Contao verfügt übrigens ab Version 2.11 über eine einfache Einbindung der Google Web Fonts. Dazu trägt man unter Layout > Themes > Seitenlayouts > Ihr-Layout die benötigten Schriften samt Größenangabe in das entsprechende Eingabefeld ein:

Google Web Fonts Einbindung in Contao

DIV mit 100% Höhe

Gerade Anfänger verzweifeln oftmals daran, dass ein Block-Element wie z.B. ein DIV nicht die volle Höhe erreicht, wenn man es per CSS auf 100% setzt.

Der Grund dafür ist schnell erklärt und ist lediglich eine Sache der Vererbung. Fehlt dem <html>- und <body>-Tag eine Angabe der Höhe, so können beide Tags dies nicht an ihre Kindelemente vererben und somit wissen diese nicht, bis wohin sie ihre Höhe von 100% ausdehnen können.

Die Lösung ist, dass man dem <html>- und <body>-Tag eine Höhe von 100% zuweist.

Nachfolgend ein kleines Beispiel dazu. Entfernen Sie im Editor z.B. den 100%-Wert beim <html>- bzw. <body>-Tag.

Hinweis! Zum Bearbeiten des Codes klicken Sie rechts auf "Edit in JSFiddle"