Eine Fußzeile mit CSS

Zu den Anfängen des Internets kannte man nur HTML. Alle Webseiten bestanden komplett aus HTML-Code, manchmal kam ein bisschen JavaScript für MouseOver-Effekte hinzu, aber das war's dann auch schon. Um Strukturen und Layout in die Seiten zu bringen (z.B. Header oben, Navigation links, Footer unten) wurden Tabellen verwendet, deren Rahmen auf eine Breite von 0 Pixeln konfiguriert wurden.

Jedoch war HTML eigentlich nur als Strukturierungssprache gedacht, und die Vermischung von Struktur und Layout z.B. für blinde Menschen und/oder Textbrowser wirklich problematisch. Heutzutage verwendet man daher Cascading Style Sheets (CSS), die heute von allen modernen Browsern problemlos interpretiert werden. Sie erlauben eine vollständige Trennung von Struktur (HTML-Code) und Layout (CSS-Code).

Nun ist das ja eine wirklich feine Sache, aber ein aktuelles Projekt stellte mich vor eine Herausvorderung. Das (vorgegebene) Layout sieht eine Fußzeile vor, die bei wenig Inhalt an der Unterseite des Browsers, bei viel Inhalt jedoch am Ende der Seite stehen sollte. Natürlich soll sie sich auch nicht mit dem Inhalt überlappen. Einfache Sache, sollte man meinen. Früher hätte man dazu einfach eine Tabelle genommen, und diese mit height="100%" (mindestens gesamtes Fenster) aufgeblasen. Heute natürlich nicht mehr. Stattdessen nimmt man CSS, also etwa so:

<div id="contents">
  Some contents....
</div>

<div id="footer">
  Some footer
</div>

Will man gültiges HTML 4.01 schreiben, könnte die erste Idee für die passenden CSS-Anweisungen vielleicht so aussehen:

(continue reading)

• #html
• #hack

heise.de im neuen Schmalbild-Design

Deutschlands größtes Nachrichtenportal für IT-News, heise.de erstrahlt seit heute in einem neuen Design. Als Positiv sind die hellen Farben und das endlich valide XHTML/CSS anzusehen (die bisherige tabellenbasierte Struktur war einfach nur peinlich für ein IT-Portal).

Negativ finde ich jedoch die feste Seitenbreite, und dass das ganze dann auch noch linksbündig ausgerichtet ist - dadurch befindet sich die Werbung bei höheren Auflösungen in der Mitte des Bildschirms! Laut Jürgen Kuri soll bald eine Vollbild-Version nachgereicht werden. Wer dies nicht erwarten kann (und Opera verwendet), kommt folgendermaßen schon heute zu einer solchen Ansicht:

1. Die Datei heisecss.txt herunterladen und in 'heise.css' umbenennen
2. heise.de aufrufen, Rechtsklick auf die Seite und 'Edit Site Preferences' auswählen
3. Auf das Tab 'Display' wechseln
4. Unter 'My style sheet' die heruntergeladene Datei auswählen
5. 'OK' drücken und fertig

Die CSS-Datei überschreibt einige der vorgebenen Anweisungen, um die Seitenbreite auf 100% zu bringen (für den rechten Rand werden dabei 375px reserviert). Nebenbei entfernt es auch noch den Banner über der Seite.

Für Verbessungen bin ich jederzeit offen!

Update: Für Firefox gibt es eine ähnliche Lösung.

Update 2: Den Teaser stark zusammengefasst und einen Workaround für das von cycore beschriebene Problem eingebaut.

Update 3: Heise hat eine Reihe von Änderungen vorgenommen, welche die ursprünglichen Korrekturen obsolet werden lassen. Aber ein paar Kleinigkeiten gibts da doch noch, und deshalb hier meine heise2.css. Entfernt ein paar Werbebanner, reduziert den Platzverbrauch des Top-Teasers und macht besuchte Artikel in der Übersicht besser erkennbar.

• #hack
• #html

"Gefällt mir"-Button mit Opera blockieren

Viele haben vernünftigerweise gar keinen Facebook-Account, aber die, die sich doch angemeldet haben, werden nach dem Login für Facebook furchtbar transparent - dank des "Gefällt mir" / "Like"-Buttons. Dieser stammt im normalfall direkt vom Facebook-Server und beinhaltet auch die URL der aufgerufenen Seite:

<iframe
    src="http://www.facebook.com/plugins/like.php?
       href=http://www.blogs.uni-osnabrueck.de/rotapken/&[...]"
    scrolling="no"
    frameborder="0"
    style="border:none; overflow:hidden; width:450px; height:35px;"
    allowTransparency="true"></iframe>

Dieser Dienst, der viele wohl so gut kennt wie niemand sonst, erhält auf diese Weise also auch noch ein fast flächendeckendes Bewegungsprofil im normalen Netz - Nachtrag: selbst wenn man den Button nicht anklickt!. Vorratsdatenspeicherung ist nichts dagegen :-). Wer kein Interesse an Facebook hat, kann das einfach durch einen Eintrag in die hosts-Datei des Systems blockieren:

127.0.0.101 facebook.com www.facebook.com

Leider wird dadurch Facebook generell unbenutzbar. Wer dort also doch in und wieder mal reinschauen möchte, der kommt um eine Alternative nicht herum. Opera bietet hierzu von Haus aus die Datei urlfilter.ini an. Den genauen Pfad der Datei bekommt man durch den Aufruf der Seite "opera:config#urlfilter" (Wordpress macht den Link leider kaputt) heraus, auf Unix-Systemen ist es $HOME/.opera/urlfilter.ini. Dort kann man sehr fein gesteuert die erlaubten und verbotenen Seiten festlegen:

Opera Preferences version 2.1
; Do not edit this file while Opera is running
; This file is stored in UTF-8 encoding

[prefs]
prioritize excludelist=1

[include]
*

[exclude]
*://*.facebook.com/plugins/like.php*
*://*.facebook.com/plugins/likebox.php*
*://*.facebook.com/plugins/*

Die Änderungen werden nach einem Neustart von Opera wirksam, der Gefällt-Mir-Button sollte dann von allen Seiten verschwunden sein. Wenn man auch gleich den ein oder anderen Werbedienst blockieren möchte, kombiniert man dies einfach mit bestehenden Filterlisten, etwa von urlfilter.de.

Nachtrag: Da es offenbar auch noch weitere Facebook-Anwendungen gibt, die in die eigene Seite eingebettet werden können (z.B. Kommentare) habe ich eine dritte exclude-Zeile hinzugefügt, die alle "plugins" blockiert. Der normale Facebook-Betrieb scheint diese nicht zu nutzen.

• #howto
• #browser
• #html