layout via css: inhalts-verzeichnis

reset.css

neutralisiert unterschiedliches aussehen in unterschiedlichen browsern
einfach im <head>-bereich der jeweiligen seite referenzieren…
yahoo-reset.css
gezipptes yahoo-reset.css zum download

minimale screengröße

bis vor kurzem waren dies noch 800 x 600px – jetzt kann man von 1024 x 768px ausgehen…
dies ist die gesamt-höhe und -breite des bildschirms!
davon geht z.b. für menüleiste und navigations-elemente des browsers noch einiges ab…

lineare darstellung der website

Inhalt wird in gleicher Reihenfolge gezeigt wie im Source-Code
Screenreader und Suchmaschinen "sehen" Websites so!
Website muß auch in dieser Darstellung verständlich sein!
Semantisch richtiges xHTML hilft der Verständlichkeit

inline- und block-elemente

Block-Elemente erzwingen eine neue Zeile
<h1>…<h6>, <div>, <p>, <hr />, <table>, <ul>, <ol>, <dl>, <blockquote> …
Inline-Elemente nicht.
<a>, <img>, <strong>, <em>, <sub>, <sup>, <span>, <button>, <input>…
Via CSS kann man das Verhalten der Elemente verändern
dazu später mehr!

Demo

Margin zum Zentrieren

… ermöglicht es, dass der Inhalt einer Website immer zentriert dargestellt wird – egal wie groß das Browserfenster ist!
Dazu muß man folgendes in der CSS-Anweisung angeben:

/* css */
div#inhalt {
  width:600px; /* gesamtbreite des inhalts */
  /* via margin zentrieren, Kurzanweisung im Uhrzeigersinn (oben beginnend) 
      auto bedeutet, dass der browser selbst das maß errechnet
  */
  margin:10px auto 50px auto;
}

<!-- html -->
<body>
<div id="inhalt">
   -hier der inhalt der website-
</div>
</body>

Demo

relatives Positionieren

verschiebt die Position eines html-Element relative zur normalen Position
die Lücke, wo das Element normalerweise stehen würde, bleibt erhalten

/* css */ span.relText { position:relative; left:10em; top:-2em; background:blue; color:white; }  <p>Lorem ipsum… <span class="relText">Vix ei duis commune,</span> unum alterum disputando…</p>

Lorem ipsum ad sea denique sententiae. Nominati corrumpit honestatis sit ea,
posse atqui mei at. Vix ei duis commune, unum alterum disputando sed ei. Vix te novum exerci tractatos, nonumy scripserit ex nec. Eu vero illum salutatus vis. Qui cu fugit ancillae, eum in accusamus reprimique, his utamur civibus eloquentiam ea.

Demo

absolutes Positionieren [body]

pixelgenaues Positionieren
das absolut positionierte Element ist nicht mehr Teil des normalen Textflusses!
Vergleichbar mit: ein Element liegt in Photoshop auf einer eigenen Ebene…
die Positionsangabe bezieht sich auf das jeweilige Eltern-Element
wenn also nichts anderes angegeben ist, beziehen sich Positionsangaben auf <body>

/* css */ span.relText { position:absolute; right:20px; top:20px; width: 140px; }  <div id="elternElement"> <p>Lorem ipsum… <span class="relText">Vix ei duis commune,</span> unum alterum disputando…</p> </div>

Lorem ipsum ad sea denique sententiae. Nominati corrumpit honestatis sit ea, posse atqui mei at. Vix ei duis commune, unum alterum disputando sed ei. Vix te novum exerci tractatos, nonumy scripserit ex nec. Eu vero illum salutatus vis. Qui cu fugit ancillae, eum in accusamus reprimique, his utamur civibus eloquentiam ea.

absolutes Positionieren [Elternelement]

die Positionsangabe bezieht sich auf das jeweilige Eltern-Element – hier auf das <div>

/* css */ div#elternElement {position:relative; width:40%;} span.relText {display:block; position:absolute; right:20px; top:20px; width: 140px;}  <div id="elternElement"> <p>Lorem ipsum… <span class="relText">Vix ei duis commune,</span> unum alterum disputando…</p> </div>

Lorem ipsum ad sea denique sententiae. Nominati corrumpit honestatis sit ea, posse atqui mei at. Vix ei duis commune, unum alterum disputando sed ei. Vix te novum exerci tractatos, nonumy scripserit ex nec. Eu vero illum salutatus vis. Qui cu fugit ancillae, eum in accusamus reprimique, his utamur civibus eloquentiam ea.

Demo

fixiertes Positionieren

das fixierte Element behält seine Position bei – auch wenn man scrollt
wird von Internet Explorer < Version 7 ignoriert

/* css */ div#fixiertesElement { position:fixed; width:40%; margin-top:120px; }  <div id="fixiertesElement"> … Inhalt des fixierten Elementes … </div>

Demo

Floating Elements

es kann nach links oder nach rechts gefloatet werden
das im source-code oben liegende element floatet in das untere element
das gefloatete element muss eine breiten-angabe haben!

/* im css-bereich */
h2#floating {width:5em;float:left;color:#fff;background:red;
padding:0.3em;margin:0 10px 10px 0;}

<h2 id="floating">Floating Headline Text</h2>
<p>Lorem ipsum no eam iudicabit patrioque, liberavisse signiferumque [...]</p>

Floating Headline Text

Lorem ipsum no eam iudicabit patrioque, liberavisse signiferumque vel cu. Et sumo dolor disputando vix, error erroribus has cu, at his vivendum voluptaria philosophia.

Floating & Clearing

clear beendet das floaten eines elements
es gibt clear:left, clear:right und clear:both

/* im css-bereich */
h2#floating {float:left;[…]}
p.clearLeft {clear:left;}

<h2 id="floating">Floating Headline Text</h2>
<p>Lorem ipsum no eam iudicabit patrioque, liberavisse signiferumque vel cu.</p>
<p class="clearLeft">Et sumo dolor disputando vix, error erroribus […]</p>

Floating Headline Text

Lorem ipsum no eam iudicabit patrioque, liberavisse signiferumque vel cu.

Et sumo dolor disputando vix, error erroribus has cu, at his vivendum voluptaria philosophia.

Floating im Einsatz

Bilder, Zitate, Überschriften können elegant "umflossen" werden
Layouts können flexibel auf unterschiedliche Browser-Fenster-Breiten reagieren
Unverzichtbar, um mehrspaltige Layouts zu erzeugen
Vorsicht: ältere Browser (besonders der Internet Explorer < 6) haben teilweise Schwierigkeiten, Floats richtig darzustellen…

Demo 1

Demo 2

Overflow

legt fest, was passiert, wie übergroße innere elemente behandelt werde
visible = inhalt ragt aus dem element komplett heraus
hidden = inhalt wird abgeschnitten, wenn er die grenzen des elements überschreitet.
scroll = inhalt wird abgeschnitten, scroll-leisten erscheinen automatisch
auto = scroll-leisten erscheinen automatisch, wenn der inhalt nicht komplett darstellbar ist.
mehr dazu bei selfhtml

/* im css-bereich */
/* automatische scrollbalken */
div.demo {overflow:auto;}

<!--html-->
<div class="demo">Lorem ipsum nisl justo…</div>

Demo

Overflow: hidden

verhindert, dass bei gefloateten elementen das elternelement seine höhe verliert

Demo

unsichtbar & versteckt

elemente unsichtbar machen, um informationen – je nach ausgabemedium – unterschiedlich aufzubereiten
oder um z.b. dem benutzer informationen "in kleineren happen" zu präsentieren
unsichtbar (visibility:hidden) macht ein element unsichtbar
der dafür benötigte platz bleibt erhalten
versteckt (display:none) läßt ein element verschwinden
es bleibt keine lücke

Demo

Print-Stylesheets

legen fest, wie die jeweilige seite beim ausdrucken aussieht
achtung: unterstützung der print-styleheets ist nicht in allen browsern gut…
mit display:none kann man elemente, die man beim ausdrucken nicht braucht, ausblenden
das print-stylesheet sollte nach dem allgemeinen stylesheet geladen werden
dann braucht man dort nur die angaben ändern, die beim ausdrucken wichtig sind
sehr gute, englisch-sprachige zusammenfassung zu den möglichkeiten der print-stylesheets

Demo

CSS-Layouts: fixiert, fliessend, elastisch

bei fixierten Layouts verändert sich die Größe des Inhalts-Bereiches nicht
auch wenn man das Browserfenster vergrößert oder die Schriftgröße verändert
bei fliessenden Layouts verändert sich die Größe des Inhalts-Bereiches
entsprechend der Größe des Browserfensters
bei elastischen Layouts verändert sich die Größe des Inhalts-Bereiches,
wenn man die Schriftgröße verändert
im Safari auf "Apfel" und "+" oder "–" drücken um die Schriftgröße zu ändern

Mike Cherim hat die Vor- und Nachteil der unterschiedlichen Layouts sehr gut auf seinem Weblog zusammengefasst

webprogramming // layout via css // 02-2010 // © matthias edler-golla //

layout via css: inhalts-verzeichnis

reset.css

minimale screengröße

lineare darstellung der website

inline- und block-elemente

Margin zum Zentrieren

relatives Positionieren

absolutes Positionieren [body]

absolutes Positionieren [Elternelement]

fixiertes Positionieren

Floating Elements

Floating Headline Text

Floating & Clearing

Floating Headline Text

Floating im Einsatz

Overflow

Overflow: hidden

unsichtbar & versteckt

Print-Stylesheets

CSS-Layouts: fixiert, fliessend, elastisch