Stefans Webseite - Blog - CSS

Tabelle auf ganze Seitenhöhe ausdehnen

nospam@example.com (Stefan Jahn) — Tue, 19 Feb 2008 21:17:26 +0100

Für das Layout einer Webseite werden oft noch Tabellen, sogenannte Layout-Tabellen, genutzt (im Gegensatz zu div-Containern in Verbindung mit CSS).

So kann man z.B. eine Webseite mit zwei Spalten gestalten. In der linken schmalen Spalte kommt die Navigation und in der rechten breiteren Spalte landet der eigentliche Inhalt. Jede Spalte bekommt nun noch eine passende Hintergrundfarbe.

+--+------+
|  |      |
|  |      |
|  |      |
+--+------+

So lange die Spalten genügend Inhalt (Text) haben, so das die Tabellenhöhe größer ist als die Höhe des Browserfensters, hat man kein Problem. Kaum ist aber die Tabellenhöhe zu klein, so sieht das Design der Webseite nicht mehr unbedingt den Vorstellungen entsprechend aus. In diesem Fall hat man im oberen Teil des Browserfensters die Tabelle mit dem hübschen Hintergrund, danach aber eine leere einfarbige Fläche die ganz und gar nicht zum Design passt.

+--+------+
|  |      |
|  |      |
+--+------+
###########

Wie schafft man es nun das die Tabelle immer die komplette Höhe des Browserfenster einnimmt. Die Angabe von height:100% in CSS bringt nicht den gewünschten Erfolg.

Dies liegt daran das sich die Höhe in diesem Fall nach dem darunterliegenden Container richtet. In diesem Fall <body> das wiederum in <html> eingebettet ist. Bei allen Container macht der Browser eine automatische Höhenanpassung und stellt die Höhe auf den größten gemeinsamen Nenner ein. Mit der CSS-Angabe height:100% für die Tabelle nimmt die Tabelle somit 100% Höhe von <body> ein, das Element <body> aber nicht 100% Höhe des Browserfensters.

Aber es gibt Abhilfe:

Das obige Beispiel gilt für die Layout-Tabelle der Klasse layout.

Buttons stylen oder nicht?

nospam@example.com (Stefan Jahn) — Thu, 18 May 2006 18:48:53 +0200

Soll man auf seiner Webseite die Buttons und Formularfelder mit Hilfe von CSS stylen? Also nicht nur die Position und Größe ändern sondern auch das Aussehen wie Umrandung, Schriftgröße, Hintergrundfarbe? Oder sogar eigene Grafiken für die Buttons entwerfen?

Hab dazu den lesenswerten Artikel Designtaktikten im Formularkrieg auf praegnanz.de gefunden.

Nun, in folge dessen, und da ich bei diversen Browsern (z.B. Safari) eh keinen großen EInfluß auf die Buttons habe, habe ich alle optischen Änderungen an meinen Formularfeldern und Buttons aus meiner CSS-Datei entfernt. Der Besucher hat somit einen "Aha-Effekt" da er ja die Buttons am Erscheinungsbild sofort wiedererkennt.

Peek-a-boo Bug - oder Inhalt der im Internet Explorer verschwindet

nospam@example.com (Stefan Jahn) — Sun, 12 Mar 2006 01:21:16 +0100

Das der Internet Explorer leider einige Fehler hat ist wohl jedem Webdesigner oder Webmaster bekannt. Ein Rätsel war mir bis jetzt aber immer noch das diverse Inhalte - also Text und Links - im Internet Explorer teilweise gar nicht angezeigt werden oder beim Scrollen verschwinden und die Hintegrundfarben teilweise aus den Boxen herauslaufen. Hübsch zu beobachten auf der Homepager der Rhy-Deufel Öflingen.

Mittlerweile bin ich etwas schlauer, denn ich weiß jetzt wie der Bug heisst. Es ist der Peak-a-boo Bug und hängt mit der Verwendung des CSS-Befehl float zusammen. Mal schauen ob sich mit der Information etwas anfangen lässt.

SelfHTML 8.1.1 als chm-Datei verfügbar

nospam@example.com (Stefan Jahn) — Sun, 05 Feb 2006 11:17:25 +0100

Die bekannte Dokumentation rund um HTML, CSS und Javascript SelfHTML ist nun in der neusten Version 8.1.1 als chm-Datei (Compiled HTML Help) verfügbar. Auf der entsprechenden Download-Seite kann man die Datei runterladen und findet noch einige Informationen über die Benutzung und verschiedene chm-Betrachter.

Quelle: SelfHTML aktuell Weblog

CSS-Definitionen für Drucker

nospam@example.com (Stefan Jahn) — Thu, 19 Jan 2006 22:06:55 +0100

Wie ich vor ein paar Tagen geschrieben habe waren die CSS-Definitionen für den Ausdruck dieser Webseiten auf einem Drucker - bedingt durch die Menüspalte - etwas fehlerhaft. Dieses kleine unschöne Detail hat sich hiermit erledigt. Die CSS-Datei für den Ausdruck wurde entsprechend angepasst, so das der Inhalt dieser Homepage formschön auf einem Drucker ausgedruckt werden kann.

Für die Aussenstehenden die nichts mit HTML, CSS oder Webdesign am Hut haben eine kurze Erklärung: Die Webseiten die du hier siehst bestehen aus zwei Informationen. Einmal der Inhalt - also dieser Text hier - und des weiteren aus Angaben wie der Text dargestellt werden soll - Farben, Layout, Schriftgröße, Hintergründe, Abstände, ... Diese Angaben der Darstellung werden mit Hilfe von CSS verwirklicht, dabei stehen sämtliche Angaben in einer oder mehreren CSS-Dateien. Das hat den großen Vorteil, daß man mit der Änderung der CSS-Dateien bei allen Webseiten gleichzeitig das Aussehen ändern kann. Ein weitere Vorteil von CSS ist, daß man für verschiedene Ausgabegeräte verschiedene CSS-Definitionen (oder Dateien) hinterlegen kann. Der Browser nutzt die CSS-Datei für den Bildschirm (was der Normalfall und Standard ist), für den Drucker kann man aber eine eigene CSS-Datei angeben. Diese Technik wird auf dieser Homepage genutzt. So kann ich den Ausdruck komplett anders aussehen lassen als die Anzeige auf dem Bildschirm. Das beste Beispiel dafür ist die Schriftart. Hier auf dem Bildschirm ist sie serifenlos (wie z.B. Helvetica oder Arial), auf dem Ausdruck hat sie aber nachher Serifen (wie z.B. Times New Roman).

Natürlich kann man noch weitere CSS-Definitionen für andere Ausgabegeräte angeben, so z.B. für einen Beamer, Fernseher oder PDA. Kommt natürlich immer darauf an ob der Browser die Funktion auch unterstütz.

Textschatten mit CSS2

nospam@example.com (Stefan Jahn) — Tue, 10 Jan 2006 22:53:52 +0100

Mit dem CSS2-Befehl "text-shadow" ist es Möglich Text mit einem Schatten zu hinterlegen. Laut SelfHTML unterstützten momentan nur die Browser Safari ab Version 1.2 und Konqueror ab Version 3.4 diesen Befehl. Beide Browser basieren auf der Rendering-Engine KHTML. Dies bedeutet natürlich auch das alle anderen Programme die KHTML nutzen den Effekt ebenfalls anzeigen können. Das der leidige Internet Explorer sowas nicht kann brauch ich ja wohl nicht erst erwähnen. Für all diejenigen die den Effekt nicht sehen können hier ein kleines Bild davon:

Für diese Darstellung wird folgender Eintrag in der CSS-Datei verwendet: