text: edu.volpe.ch · Interface Design · Information Architecture · Web Development · Nützliche CSS Techniken
  Nützliche CSS Techniken
  Erstellt: 03.02.2009 | Aktualisiert: 08.03.2009
  Dieses Snippet ist Teil des Seminars «Website (XHTML/CSS)» und befasst sich mit nützlichen CSS-Techniken für die Gestaltung von Web-Layouts.
  Weiterführende Artikel und Roundups zu nützlichen CSS-Techniken:
  Powerful CSS Techniques for Effective Coding (smashingmagazine.com)
  53 CSS-Techniques You Couldn't Live Without (smashingmagazine.com)
  101 CSS Techniques Of All Time – Part 1 (noupe.com)
  101 CSS Techniques Of All Time – Part 2 (noupe.com)
  Folgend einige ausgewählte Techniken, welche im Seminar «Website (XHTML/CSS)» angewendet werden.
  Unterschiedliche Browser interpretieren CSS nach verschiedenen Prinzipien. So werden beispielsweise Überschriften oder Abstände standardmässig, d.h. noch ohne CSS-Formatierung, unterschiedlich dargestellt.
  Damit man bei der Entwicklung von Websites bei einem 'neutralen' Zustand beginnen kann, empfiehlt es sich einen so genannte 'Global Reset' vorzunehmen, der Browser-Inkonsistenzen aufhebt. Empfohlen wird eine Variante von Eric Meyer:
  CSS Reset (meyerweb.com)
  Manchmal wünscht man sich, dass der Footer einer Website ganz unterst am Browserrand ausgerichtet wird, auch wenn nur wenig Inhalt auf der Website vorhanden ist und er ohne Dazutun sich irgendwo im Browserfenster befindet. Wie kann man also denn Footer dazu zwingen, sich immer zu unterst auszurichten, also so wie im folgenden Beispiel?
  Der Ansatz ist eigentlich relativ simple. Man gibt der Website eine Höhe von 100% und zieht einen dem Footer entsprechend Block von dieser Höhe wieder ab.
  XHMTL-Struktur
  <p>Inhalte der Website hier.</p>
  .footer, .push {height: 4em;}
  Mehr dazu auch in den folgenden Artikel:
  Make a Footer Stick to the Bottom of a Page (ryanfait.com)
  footerStickAlt (themaninblue.com)
  Es ist wichtig, dass man seine HTML-Struktur möglichst korrekt aufbaut und Elemente wie beispielsweise Überschriften entsprechend auszeichnet. Es macht aus diesem Grund Sinn der Name der Website in einen h1-Tag zu packen. Nun ist es aber des Öftern so, dass man anstelle normalen HTMLs lieber ein bestimmtes Logo verwenden würde. Wie kann man also semantisch korrekten HTML-Code schreiben und trotzdem Bilder verwenden? Oder noch einfacher formuliert, wie wird HTML-Text mit Bildern ersetzt?
  Für das so genannte Image Replacement bieten sich verschieden Methoden an. Bevorzugt wird eine Variante, welche diese Problem mit Hilfe von CSS löst.
  XHTML-Struktur
  <h1 class="logo">Logo der Firma</h1>
  Weitere Methoden in der Übersicht
  Revised Image Replacement (mezzoblue.com)
  Informationswebsites möchte man oft nicht nur im Browser anschauen, sondern spezifische Seiteninhalte auch ausdrucken. Wie lassen sich Websites für den Druck optimieren?
  Man schreibt ein externes CSS-Print-File, welches unnötige Seitenelemente ausschaltet und relevante Inhalte optimal für den Ausdruck darstellt. Das CSS-File lässt sich dann entsprechend in die HTML-Datei einbinden.
  Es bieten sich hierfür verschiedene Techniken an:
  Printing the Web: Solutions and Techniques (smashingmagazine.com)
  Nicht immer weiss man, was sich hinter einem Link genau verbirgt. Meistens handelt es sich um Verweise auf die eigen oder fremde Websites, es können aber auch PDF- oder Word-Files sein. Welche Möglichkeiten bieten sich an, Benutzer bereits vor dem Klicken darauf vorzubereiten?
  Roger Johansson beschreibt in seinem Blog 456 Berea Street eine elegante Lösung, welche ausschliesslich über CSS funktioniert.
  Reveal new window links and links to non-HTML files with a user stylesheet
  Umschliessende Blöcke von 'gefloateten' Elementen werden vertikal nicht entsprechend gestreckt. Wie lässt man übergeordnete Elemente wissen, wo sich das letzte 'gefloatete' Element genau befindet?
  Es braucht als Abschluss ein Blockelement, welches mit der CSS-Anweisung clear versehen wird. Allerdings ist es nicht immer erwünscht ein zusätzliches HMTL-Element einzufügen. Es bieten sich aus diesem Grund andere Methoden an.