CSS-Tricks und Tipps
Ich bin CSS-Fanatiker, das gebe ich zu. Ein paar immer wieder gerne genutzte CSS-Kniffe möchte ich hier zusammenstellen. Die meisten dieser Codeschnipsel werden auch auf fmbjoern.de eingesetzt. Die Sammlung wird immer wieder um neue Ideen erweitert.
# ⬆ Der feste Footer
Ganz einfach, aber trotzdem nützlich: der feste Footer. Mit Footer meine ich die schmale Leiste mit dem Link zum Impressum und anderen nützlichen Informationen am unteren Ende der Seite. Auf fmbjoern.de scrollt dieser Footer immer mit, das heißt er ist immer im Bild und steht dem Nutzer der Seite direkt zur Verfügung. Die Realisierung über CSS ist denkbar einfach.
<div id="footer">Hier steht mein Footertext.</div>
Um den Footer jetzt unten auf der Seite "festzutackern" reicht schon dieses einfach Statement, es erzeugt einen 20 Pixel hohen Footer ganz unten an der Seite. Achte darauf, dass der Seiteninhalt (also dein Haupttext) nach unten 20 Pixel frei lässt, damit der Footer nicht nachher vor deinem Text steht!
#footer {
position:fixed;
bottom:0px;
left:0px;
width:100%;
height:20px;
}
# ⬆ Finde Deine Mitte
Immer wieder hübsch sind mittig positionierte Seiten. Auch das ist mit CSS ein Kinderspiel. Folgendes Grundgerüst brauchen wir dazu:
<div id="page"> - Dein mittiger Seiteninhalt - </div>
Nehmen wir einmal an, die Seite soll immer 500 Pixel der Fensterbreite in Anspruch nehmen, und dabei mittig im Fenster stehen - das hier reicht da schon:
#page {
width:500px;
margin:0px auto 0px auto;
}
Noch mehr schöne Beispiele und Tricks findest Du auf The StyleWorks. Die Seite kann ich jedem, der sich ein wenig mit CSS auseinandersetzen will, nur empfehlen.
# ⬆ Auf Ideenklau
Im Gegensatz zu PHP-Code kann man sich den CSS-Code einer Website wunderbar angucken und daraus lernen, wie bestimmte Effekte und Positionierungen erzielt wurden. Dazu lässt man sich einfach den HTML-Quellcode im Browser anzeigen und sucht ziemlich weit oben im header nach Zeilen, die so ähnlich aussehen:
<link rel="stylesheet" type="text/css" href="/style.css" />
Jetzt nur noch die unter href="" angegebene Datei öffnen und in Ruhe studieren. Übrigens: als Mac-Nutzer solltest Du Dir unbedingt das Programm CSSEdit besorgen. Schau Dir die Demo an, Du wirst schnell einsehen, warum.
# ⬆ Der «Böse-Falle-Browser»
Man stelle sich vor: das nagelneue Seitendesign, W3C-Valide und im Safari, Firefox und Opera getestet, geht online. Und Minuten später hagelt es Proteste von Windows-Nutzer, die sich immer noch mit dem Internet-Explorer ins Netz trauen: Nix geht! Leider ist der IE besonders in seinen älteren Versionen nicht besonders Standarts-Treu und macht in vielen Fällen ein Kuddelmuddel aus dem mühsam zusammengepuzzelten Seitendesign. Es ist also auch für Mac-Besitzer ein Muss, das Design einer Homepage auf IE-Rechnern zu testen. Glücklicherweise gibt es einen praktischen Online-Dienst, der einem die Arbeit abnehmen kann: Browsershots.
Die Konsequenzen aus den netten Screenshots muss dann jeder für sich selber ziehen - ich vertrete inzwischen die Meinung dass die Seiten valide sein müssen und dann ruhig im IE etwas weniger hübsch aussehen können. Selber schuld!
Mein neues Design nutzt beispielsweise für den Header und den Seitentitel ein paar nette CSS-Effekte, schau Dir mal an, was die Browser daraus machen - besonders der Unterschied Safari zu IE ist interessant...
Klicke auf die Bilder um einen Screenshot der ganzen Seite zu sehen
Der eingesetzte CSS-Code hält sich an die Vorgaben des W3C und wird von allen modernen Browsern umgesetzt. Der InternetExplorer 7 und die Demo vom IE 8 stellen immerhin das halbtransparente Logo dar, haben aber immer noch ziemliche Probleme mit den Text-Effekten (Schatten und Transparenz). Wer - wie ich - auf die schicken Safari-Auswahlboxen steht sollte ihm eine Chance geben und wird fmbjoern.de und viele andere Homepages in einem völlig neuen Licht erblicken!