FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten

mazzo · #1 (**permalink**) 08.06.2006, 12:34

Bitte schaut hier hinein, bevor ein neues Thema eröffnet wird.
Weitergehende Fragen können dann, mit Darstellung der bisherigen Versuche, in einem eigenen Thema diskutiert werden.

Bitte stellt spezielle Fragen im Forum, nicht hier.

Die FAQ-Liste wird beizeiten erweitert.

FAQ - häufige Fragen und deren Antworten

------------------------------------------------------------------------
CSS-Prolog - Welche (globalen) Definitionen sind wichtig und nützlich?
F: Wieso stimmt der Abstand da nicht? Wieso zeigt der IE das anders an als andere Browser?
A: Es ist sinnvoll am Anfang des CSS mit dem Universalselektor alle browserseitig unterschiedlichen Defaultabstände auf Null zu setzen:

Code:

* { margin: 0; padding: 0; }

Im weiteren CSS können dann nur die gewünschten Abstände explizit definiert werden.

ABER: Formularelemente sollten evtl. beim "globalen Nullen" außen vor gelassen werden, indem man alle übrigen einzeln aufführt (mühsam, aber u.U. sinnvoll):

Code:

 html, body, p, ul, h1, h2, ... {
margin: 0;
padding: 0;
}

Begründung: http://xhtmlforum.de/47438-frage-zum...-dem-html.html

F: Die Abstände sind immer noch verschieden.
A: Stimmt auch der Doctype? Wenn dieser nicht korrekt angegeben ist, befindet sich der IE im Quirksmodus (auch hier beschrieben) und das Boxmodell wird falsch darstellt.

Weitere Anregungen zu einem sinnvollen "CSS-Prolog"

------------------------------------------------------------------------

1) Container sollen "mitwachsen" - Faux Columns

F: Wie kann ein Container die Höhe eines anderen Containers annehmen, der je nach Inhalt verschiedene Höhen hat?
Beispiel:

A: Nebeneinander stehende Container können nicht wirklich "mitwachsen". Mit Hintergrundfarben- oder Bildern, welche mit der Faux Columns-Technik eingebunden werden erreicht man, dass es so aussieht, als ob der Container gleich hoch sei.

------------------------------------------------------------------------

2) Container ragen aus anderen heraus - Clearing floats/Easy Clearing/Clearen ohne Markup

F: Container ragen aus anderen heraus, was mache ich falsch? (Problem tritt nicht im IE auf)
Beispiel:

A: Es wird nicht oder falsch gecleart. Der Container, der floatierte Elemente beinhaltet, benötigt am Ende ein clearendes Element. Der IE fasst diese floatierten Elemente ohne clearen ein, was aber den Webstandards widerspricht.
Hier zwei Erklärungen zu float und clear: Cascading Style Sheets { Vollreferenz zu CSS 1 und CSS 2.1 : FLOAT } und Cascading Style Sheets { Vollreferenz zu CSS 1 und CSS 2.1 : CLEAR } .
Wie immer gilt:

Erst die Grundlagen verstehen, dann diese vertiefen, und Easy-Clearing anwenden (deutsche Übersetzung). Auch hier im Forum in der Knowledge-base ist ein Beispiel vorhanden.
Wichtiges Update: Im obigen Artikel wird display: inline-table; verwendet, was mit dem IE7 nicht mehr funktioniert. Statt dessen sollte es display: inline-block heissen. Hier ein ausführlicher Artikel zum easy-clearing im IE7

------------------------------------------------------------------------

3) Tabellenloses Layout / 2- oder 3-Spalten-Layout mit CSS

F: Wie erstellt man ein reines CSS-Layout ohne Tabellen?
Beispiel:

A: Einfaches Beispiel ohne Beschreibung: Flexible 3 Spalten mit Kopf und Fuss
Tutorial für 2- oder 3-Spalten-Layout: "The holy grail" (Vorsicht: der IE7 könnte damit Probleme haben)
Komplexe Lösung zum herunterladen: Yet another Multicolumn Layout

------------------------------------------------------------------------

4) 100% Höhe
F: Wie ereicht man, dass eine Seite immer 100% Höhe hat, auch wenn der Inhalt weniger Platz einnimmt?
Beispiel::

A: Wichtig ist zu verstehen, dass eine prozentuale Höhen- oder Breitenangabe sich immer auf die Maße des Elternlements bezieht (so diese dort definiert ist, sonst geht es zu den Grosseltern usw. bis zum <body>). Mit 100% height oder width ist _nicht_ die restliche zur Verfügung stehende Höhe/Breite gemeint. Ein 100px hoher Header und ein 100% hoher Content darunter sind zusammen grösser als 100%, nämlich 100%+100px, es enstünde dann also ein Scrollbalken!
Lösungen:
100% Höhe mit floatierenden DIVs
100% Höhe mit Footer stets am unteren Rand, Stichwort "Footer Stick Alt"

------------------------------------------------------------------------

5) Vertikal zentrieren
F: Wie ereicht man horizontale und vertikale Zentrierung?
Beispiel::

A: Wenn ein HTML-Element vertikal zentriert werden soll, geht das mit der CSS-Eigenschaft vertical-align. Diese kann aber nur auf Inline-Elemente oder Tabellenzellen angewendet werden.
Vertikales und horizontales zentrieren einer kompletten Webseite
und vertikal zentrierte Bilder
------------------------------------------------------------------------

6) Min- und Max-width auch für den IE
F: Der IE kennt weder min- noch max-width. Wie kann man er diese Breiten dennoch einhalten, ohne ihn in den Quirksmodus zu schicken?
A: Das geht nur mit etwas JavaScript und Conditional Comments als Browserweiche. Ulle hat in der Knowledge-Base ein sehr gutes Beispiel erstellt. Variante 2: Per ConditionalComment und darin befindlichen einzelligen Tabellen kann dem IE eine max-width untergejubelt werden.

-------------------------------------------------------------------------

7) Fusszeile immer am unteren Rand / "Footer Stick Alt"
F: Wie ereicht man, dass eine Fusszeile immer am unteren Rand "klebt" (egal, ob der Inhalt die Seite ausfüllt)?
Beispiel:: Contentbereich leer, Fusszeile aber trotzdem am unteren Rand und
Viel Inhalt, dann Fusszeile am unteren Rand
A: Eine einfache und effektive Technik ist "Footer Stick Alt".
Kurze Erläuterung: Der "non-footer"-Bereich erhält eine min-height von 100% (und eine height: 100% für den IE der min-height nicht kennt). Im HTML-Code wird #non-footer dann geschlossen. Erst danach (wichtig!) folgt #footer. Dieser wird mit negativem margin-top "hochgeholt". Die verlinkte Seite beschreibt es ausführlich.

-------------------------------------------------------------------------

8) "Fly-Out" oder "Drop-Down" Menus mit CSS erstellen (und ohne Javascript)
F: Wie erstellt man ein Fly-Out / Drop-Down Menu mit CSS (und nach Möglichkeit ohne Javascript)?
Beispiel:: Das Suckerfish-Menu (mit JavaScript für den IE)
StuNicholls Menus (zu finden unter "Menus - Multi-Level CSS Only" -> ganz ohne JavaScript, aber mit ConditionalComments für den IE)
... und mit JS aber Barrierefrei
Barrierefries Dropdown mit JS
Dazu lesen: Barrierefreies JavaScript, aber besser keine JavaScript-Effekthascherei

------------------------------------------------------------------------
9) Entwicklungsumgebung

Sehr zu empfehlen ist, Webseiten zunächst im Firefox zu testen und erst später den IE anzupassen. In aller Regel zeigt der IE Webseiten nicht korrekt an, wenn die Darstellung im IE dem Wunsch des Gestalters entspricht, ist dies kein Hinweis auf eine korrekt erstellte Seite!

Sinnvoller ist es, Seiten erst mit Firefox zu testen und diese später an den IE anzupassen.

Essentielles Tool für den Firefox: Der "Web Developer". Damit lässt sich unter anderem das CSS einer Seite live editieren (in der Menubar -> CSS ->Edit CSS) was Änderungen sofort sichtbar macht.
Sehr praktisch ist auch das Highlighten der Elemente, auf denen sich die Maus gerade befindet. Dazu in der Web-Developer-Menubar "->Outline->Outline current Element" aktivieren und mal mit der Maus über die Seite gehen. Viele Fragen zu Positionierungen, Breiten, Höhen und Abständen erklären sich dann von selbst.

Noch komplexer und detaillierter als der Web-Developer funktioniert die Firefox-Erweiterung Firebug. Wer einmal damit gearbeitet hat, kann nicht mehr ohne. Ein muss für professionelle Entwickler und eine unbezahlbare Hilfe bei der Analyse komplexer Webseiten.

Für den Firefox ist der "HTML Validator" ein wichtiges Tool um stets den Quellcode zu validieren und bei Fehlern und Warnungen gleich Hilfestellungen zu erhalten (inzwischen validiert dieses Tool zuverlässig). Zuverlässiges Validieren des Codes geht auch online unter W3C-Validator (oder auch hier)..

Oft ist es nötig mit Conditional Comments im HTML-Code, bestimmte IE-Versionen anzusprechen oder auszuschliessen. Um überhaupt für die verschiedenn Versionen des InternetExplorers testen zu können, ist die lokale Installation von multiplen IE-Versionen sehr sinnvoll.
Ein Artikel auf positioniseverything beschreibt das vorgehen mit multiplen IE-Versionen und Conditional Commetns

Noch ein genereller Tipp: CSS und HTML-Code sollten auch in der Test- und Entwicklungsphase stets getestet und validiert sein, um damit verbundene Darstellungsfehler zu vermeiden!

heiko_rs · #2 (**permalink**) 14.06.2006, 16:55

Erstellung von Menüs - und welche Extra-Regeln der Internet Explorer < 8 dafür benötigt
(am 16.08.09 um weitere Abschnitte ergänzt)

Vorab einige Anmerkungen: Sämtliche hier erklärten Methoden und Techniken habe ich erfolgreich getestet im IE-Win ab 5.0 (der IE-Mac bleibt außenvor), Opera ab 7.0, Gecko (z.B. Firefox und Netscape) ab Netscape 7, sowie Safari. Auch der IE 8 stellt erfreulicherweise alles auf Anhieb korrekt dar, also werden Hacks nur für die IE-Versionen 7 und kleiner benötigt. Voraussetzung dafür ist natürlich ein Doctype, der die IE-Versionen 6 bis 8 im Standardsmode rendern lässt.

Und obwohl die meisten der nachfolgend beschriebenen Bugs den IE < 7 betreffen, kann zeitweilig auch der IE 7 betroffen sein (und sei es auch nur ansatzweise). In diesen Fällen helfen die für den IE 6 beschriebenen Methoden auch für den IE 7 einwandfrei. Allerdings muss berücksichtigt werden, dass "hasLayout" (deutsche Übersetzung) beim IE 7 nicht durch das für den IE < 7 beschriebene height: 1px; ausgelöst werden darf, sondern auf eine der anderen in dem verlinkten Artikel beschriebenen Weisen.

10) Vertikale Menüs

Um dieses Markup

Code:

<ul id="navi">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>

als vertikales Menü mit über die volle Menü-Breite anklickbaren Links darzustellen, reicht nach einer "Grundeinstellung" (zur ersten Regel bitte auch "CSS-Prolog" in mazzos Posting beachten) in Form von

Code:

* {
	margin: 0;
	padding: 0;
	}

#navi {
	list-style: none;
	width: 15em;
	}

strenggenommen bereits folgende CSS-Regel:

Code:

#navi a {
	display: block;
	}

(Texteinrückung und Höhe der Links werden durch padding erzeugt. Zwar kann die Höhe auch durch line-height beeinflusst bzw. erzeugt werden, jedoch wirkt sich diese Maßnahme bei Zeilenumbruch meist durch ungünstig dimensionierte Zeilenabstände aus.)

Da Links nicht auf sich selber zeigen sollten, bietet sich an, auf der jeweils betrachteten Seite den entsprechenden Menülink zu entfernen und durch z.B. oder zu ersetzen, nach dem Prinzip <li>Home</li>, und dieses Element grundsätzlich genauso zu stylen wie <a>, nach folgendem Prinzip:

Code:

#navi a,
#navi strong {
	display: block;
	padding: 0.5em;
	}

(Abweichende Formatierungen für , z.B. Farben oder font-weight, werden gesondert deklariert.)

Das sollte übrigens immer gemacht werden, auch bei allen nachfolgend erklärten IE-Hacks: Alle Maßnahmen für <a> müssen immer auch auf angewandt werden (auch wenn ich es nicht jedesmal explizit schreibe).

Alle Browser stellen das Menü damit gleichermaßen dar, mit Ausnahme des IE < 7 für Windows, dessen Darstellung in folgenden Punkten abweicht:

1. Die Links sind nicht über die volle Breite anklickbar (sondern nur ihr Text)
2. Der IE < 7 erzeugt unerwünschte Abstände zwischen den Links (verursacht durch den "Whitespace-Bug", der durch die Zeilenumbrüche im Quelltext ausgelöst wird)

Für den IE 6 wird beides behoben, indem die Links hasLayout bekommen, beispielsweise durch eine Dimension in Form von width oder height. Da es allerdings meist umständlich (und ohnehin überflüssig) ist, eine Breite für die Links zu definieren (zumal dies unter Umständen auch eine Boxmodell-Korrektur für den IE 5.x erfordert), kann man den Links auch durch eine Minimalhöhe hasLayout geben. Dies geschieht beim IE < 7 durch height: 1px; (da diese Versionen height wie min-height interpretieren).

IE 5.5 und 5.0 stellen das Menü allerdings immer noch nicht einwandfrei dar: Beide rücken die Links etwas nach rechts (genau an die Position, die sie bei der Darstellung mit Listenpunkt einnähmen). Dies geschieht übrigens auch im IE 6, falls #navi floatet und wegen des "Doubled-Float-Margin-Bugs" display: inline; bekommt. Darüberhinaus zeigt der IE 5.0 immer noch kleine Lücken zwischen den Links. Abhilfe für alle Punkte schafft:

Code:

#navi li {
	display: inline;
	}

(Die Links stehen durch ihr display: block; weiterhin untereinander.)

In manchen Fällen kann es allerdings wichtig sein, dass #navi li z.B. margin- oder padding-Deklarationen bekommt, die es als Inline-Element natürlich nicht mehr uneingeschränkt annimmt. In diesen Fällen kann eine Alternative zu display: inline; angewandt werden:

Code:

#navi li {
	width: 15em;
	float: left;
	clear: left;
	}

clear: left; kann strenggenommen entfallen, da eine horizontale Anordnung von <li> durch die definierte Breite ihres Elternelementes <ul> verhindert wird. Außerdem kann - sofern <li> keine seitlichen border-, padding- oder margin-Werte bekommt - als Alternative zu width: 15em; auch der Wert 100% genommen werden (denn dann muss z.B. bei einer späteren Änderung der Breite von <ul> die Breite von <li> im IE-CSS nicht angepasst werden).

11) Einbindung der Extra-Regeln für den IE

Alle oben genannten Extra-Regeln dürfen nur vom IE < 7 gelesen werden; dies wird am Besten durch einen Conditional Comment (CC) innerhalb von <head> erreicht (der CC steht hinter - d.h. unter - der Einbindung des Standard-Stylesheets):

Code:

<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

(Ggf. sollte noch das media-Attribut ergänzt werden.)

Das so eingebundene Stylesheet "ie.css" wird ausschließlich vom IE gelesen, in den Versionen von 5.0 bis 7, während der IE 8 außenvor bleibt ("lt IE 8" bedeutet "less than IE 8"), da dieser - wie eingangs bereits erwähnt - für alle hier erklärten Techniken keinerlei Hacks benötigt. Weiterhin bleiben auch der IE 4 (und kleiner) sowie der IE-Mac (alle Versionen) außenvor, denn diese Browser kennen keine CCs.

Ich empfehle übrigens, nicht jede IE-Version mit einem eigenen CC anzusprechen, sondern ausschließlich den genannten CC zu verwenden und die verschiedenen IE-Versionen darin mit den üblichen Hacks anzusprechen, um nicht am Ende drei oder noch mehr CCs innerhalb von <head> zu haben.

Im konkreten Fall enthält das IE-Stylesheet folgende Regeln:

Code:

* html #navi li {
	display: inline;
	}

* html #navi a,
* html #navi strong {
	height: 1px;
	}

Und damit wird das Menü sogar vom IE 5.0 genauso dargestellt wie im neuesten Firefox oder Opera.

12) Horizontale Menüs

Es gibt zwei Möglichkeiten für die horizontale Darstellung:

1. #navi li bekommt display: inline; (die Links dürfen dann nicht als Block dargestellt werden)
2. #navi li bekommt float: left;

12.1) Die inline-Variante

Bei dieser Variante wird in der Regel #navi a margin und padding zugewiesen, damit sich die anklickbare Link-Fläche vergrößert und die Links ggf. einen kleinen Abstand zueinander haben:

Code:

* {
	margin: 0;
	padding: 0;
	}

#navi {
	list-style: none;
	text-align: center;
	}

#navi li {
	display: inline;
	}

#navi a,
#navi strong {
	margin: 0 1em;
	padding: 0.5em;
	}

(list-style: none; kann strenggenommen entfallen, da die Listenpunkte bereits durch display: inline; für <li> verschwinden. Anmerkung dazu: Das Element <li> hat den display-Initialwert "list-item".)

Der IE 7 zeigt bei dieser Variante einen Bug beim Zoomen der Seite: Die seitlichen Abstände der Links verschwinden, so dass sie unmittelbar nebeneinander stehen. Abhilfe schafft zoom: 1; für #navi a. Falls sowohl #navi als auch #navi a vertikales padding haben, müssen die Werte von #navi nun angepasst (d.h. etwas verringert) werden, denn im IE werden inline-Elemente durch zoom prinzipiell zu inline-block-Elementen, und werden dadurch von ihrem Elternelement auch anders behandelt. Es schadet übrigens nicht (und ist in manchen Fällen sogar sinnvoll), diese Änderungen auch allen älteren IE-Versionen zu zeigen.

Man muss zwar beachten, dass die Eigenschaft "zoom" Microsoft-proprietär und daher nicht valide ist, aber da das entsprechende CSS dem IE per CC zugewiesen wird (siehe oben), kann man darüber hinwegsehen - der CSS-Validator tut dies schließlich auch

Der IE 5.0 kennt die Eigenschaft zoom nicht, lässt sich aber durch height: 1px; zu einem identischen Verhalten bewegen. Und genau diese Deklaration ist im konkreten Fall auch für #navi a nötig, denn fehlt sie, akzeptiert der IE 5.0 (im Gegensatz zu allen späteren Versionen) weder margin noch padding für die Links, so dass das Menü dort quasi in sich zusammenfällt.

Nutzt man für sein horizontales Menü die Variante per display: inline; für #navi li, stellt man fest, dass (selbst bei Reduzierung jeglicher margins auf Null) immer ein kleiner horizontaler Abstand zwischen den einzelnen Links bleibt. Dieser entsteht durch den Quelltext-Whitespace (Leerzeichen bzw. Zeilenumbrüche im HTML-Quelltext) zwischen den einzelnen li-Elementen. Was auf den ersten Blick verwundern mag, ist ein normales und völlig logisches Verhalten: Inline-Elemente werden hier ähnlich wie Fließtext behandelt, und bei diesem möchte man ja auch, dass ein Quelltext-Leerzeichen zwischen 2 Wörtern einen kleinen horizontalen Abstand zwischen ihnen bewirkt.

Eine mögliche Abhilfe wäre, jeglichen Whitespace zwischen den li-Elementen auszukommentieren oder ihn zu entfernen, indem man alle <li> in einer Zeile direkt aneinander schreibt, aber diese Methode hat den Nachteil, dass dadurch kein Umbruch mehr entsteht, wenn die Links z.B. durch Textvergrößerung nicht mehr nebeneinander in das Menü passen - stattdessen bleiben sie in einer Reihe stehen und "sprengen" das Menü, genau wie ein "endlos" langes Wort. Eine weitere Möglichkeit wäre z.B. margin-right: -.25em; für #navi li, aber auch das ist keine gute Lösung, da nicht alle Browser identische default-Werte für den Abstand der inline dargestellten <li> zueinander haben.

Daher ist die sinnvollste Methode zur Entfernung der kleinen horizontalen Zwischenräume, #navi li ohne width-Deklaration floaten zu lassen (siehe nächster Abschnitt), denn bei Blockelementen wirkt sich Quelltext-Whitespace natürlich nicht mehr aus.

12.2) Die float-Variante

Die horizontale Menü-Darstellung per Float bietet einige Vorteile, da man es ausschließlich mit Blockelementen zu tun und dadurch mehr Kontrolle über ihre Darstellung hat. #navi li floatet links und kann beispielsweise eine Breite bekommen (die für Links mit längeren Texten auch nach dem Prinzip #navi li.breit anpassbar ist, oder vollständig individuell per ID), und die als Block dargestellten Links nehmen automatisch die volle Breite von #navi li ein.

Code:

* {
	margin: 0;
	padding: 0;
	}

#navi {
	list-style: none;
	}

#navi li {
	float: left;
	width: 5em;
	}

#navi a,
#navi strong {
	display: block;
	text-align: center;
	padding: 0.5em;
	}

Dies funktioniert in allen Browsern außer dem IE < 7, in dem die Links nicht über die volle Breite von #navi li anklickbar sind. Abhilfe schafft auch hier wieder hasLayout für #navi a.

Ab CSS 2.1 darf auch ohne width gefloatet werden, und damit kann das sogenannte "shrink-to-fit-width"-Verhalten genutzt werden: Floatende Elemente ohne width-Deklaration werden auf eine ihrem Inhalt entsprechende Minimalbreite "zusammengeschrumpft" (vergleichbar mit Tabellenzellen, wenn weder für sie noch für <table> eine Breite definiert ist).

Achtung: Zwar verhalten sich IE/Win ab 5.0, Gecko ab Netscape 7.0, Opera ab 7.0 und Safari hier grundsätzlich identisch (bei mehreren Wörtern innerhalb des Menülinks kann es zwar in absoluten Ausnahmefällen einen Zeilenumbruch geben, jedoch kann diesem mit white-space: nowrap; vorgebeugt werden), aber der IE für Mac stellt Floats ohne width über die volle Breite ihres Elternelements dar, so dass bei einem horizontalen Menü die Menülinks untereinander stehen (als würde ihnen die float-Eigenschaft fehlen).

Zu dieser Darstellung kommt es übrigens auch im IE < 7, wenn #navi a display: block; hat und hasLayout gesetzt ist, es allerdings keine width-Deklaration hat. In diesem Falle schafft Abhilfe, außer <li> auch <a> zu floaten (natürlich ebenfalls ohne width). Ich empfehle übrigens, bei ohne width floatenden <li> immer auch <a> ohne width floaten zu lassen, auch für den IE 7.

Zuguterletzt ist bei der Float-Variante in jedem Falle wichtig, dass #navi die innerhalb floatenden #navi li einschließt. Dazu gibt es zwei gute Möglichkeiten:

1. #navi floatet ebenfalls (Prinzip "Float Nearly Everything"). Bei dieser Variante sollte #navi unbedingt eine Breite bekommen (u.a. wegen älterer Opera-Versionen), und falls auf #navi ein nicht floatendes Element folgt, braucht dieses ein "clear".

2. Falls man #navi nicht floaten lassen möchte, kann auch "Easy Clearing" auf #navi angewandt werden (siehe oben, Punkt 2 von mazzos Posting, sowie mein nächster Abschnitt).

12.3) Anmerkungen zum "Easy Clearing"

"Easy Clearing" (auch als "Clearfix" bekannt) wird von vielen Leuten als kompliziert und/oder "dirty" empfunden, was in erster Linie an der Berücksichtung des IE-Mac liegt, die einige Zusatz-Hacks erfordert. Da sie allerdings nur Sinn ergibt, wenn ein CSS-Autor den IE-Mac auch in allen übrigen (CSS-)Belangen berücksichtigt (und folgerichtig auch in diesem Browser testet), dies aber kaum noch jemand tut, stelle ich nachfolgend eine Variante vor, die den IE-Mac außenvor lässt und dadurch wesentlich kürzer und leichter verständlich wird. Außerdem füge ich noch zwei Deklarationen hinzu, die zeitweilig auftretende Probleme beheben.

Vorab noch eine Erklärung, wie "Clearfix" überhaupt funktioniert: Das Pseudo-Element :after fügt unmittelbar vor dem schließenden tag (z.B. </div>) des Elementes, auf das es angewandt wird, einen Inhalt ein. Stellt man diesen als Block dar und lässt ihn clearen, ist der Effekt derselbe, als hätte man im Markup ein leeres, clearendes div eingefügt. Zwar kennt der IE < 8 :after nicht, doch lässt er ein Element seine enthaltenen Floats einschließen, wenn für dieses Element hasLayout gesetzt ist.

Die allgemein bekannte clearfix-"Grundregel" ist folgende:

Code:

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	}

Durch die Höhe 0 passt der Punkt nicht mehr in das Element und wird daher unter diesem dargestellt. Dies ist in der Regel kein Problem, da er ja unsichtbar ist, doch in manchen Konstellationen verschafft er sich Platz und verursacht dadurch Fehldarstellungen. Abhilfe schafft die Hinzunahme von font-size: 0; und overflow: hidden;. Diese Deklarationen machen zwar für ältere Gecko-Browser eine Höhe > 0 erforderlich, jedoch reicht bereits der Wert 0.1px, der genauso wie der Wert 0 dargestellt wird, aber dennoch für ältere Geckos seinen Zweck erfüllt.

Die komplette Regel lautet also:

Code:

.clearfix:after {
	content: ".";
	display: block;
	height: .1px;
	clear: both;
	visibility: hidden;
	font-size: 0;
	overflow: hidden;
	}

Damit schließt das betreffende Element seine enthaltenden Floats in allen Browsern inkl. IE 8 ein, nur für IE 7 und kleiner muss für das Element noch hasLayout gesetzt werden, daher ergänzt man sein IE-CSS z.B. wie folgt:

Code:

.clearfix {
	min-height: 0;
	}

* html .clearfix {
	height: 1px;
	}

Wer den IE 5.0 ignoriert, benötigt sogar nur eine Regel:

Code:

.clearfix {
	zoom: 1;
	}

(denn wie bereits erwähnt, kennt der IE die Eigenschaft "zoom" erst ab Version 5.5.)

Übrigens sehe ich oft eine unbedachte bzw. unnütze Verwendung der clearfix-Klasse: Man muss im HTML-Code nicht z.B. <ul id="navi" class="clearfix"> schreiben, wenn man im CSS auch #navi:after schreiben und sich dadurch die Klasse im HTML sparen kann. Durch Kommatrennung können der clearfix-Regel beliebig viele Selektoren hinzugefügt werden (z.B. #navi:after, #content:after etc.). Für den IE < 8 müssen dann nur noch die betreffenden Elemente hasLayout bekommen - sofern das überhaupt noch nötig ist, denn hat ein Element z.B. bereits eine width-Deklaration, ist hasLayout ohnehin bereits gesetzt.

13) Ohne width gefloatet und dennoch horizontal zentriert

(Vorab sei bemerkt, dass die nachfolgende Methode auf Stu Nicholls | CSSplay | Centering Floats basiert, aber dennoch anders ist - Dank geht dabei auch an fricca

)

Per display: inline; angeordnete li-Elemente lassen sich unabhängig von ihrer Breite ganz einfach durch text-align: center; für das ul-Element horizontal zentrieren. Doch lässt man #navi li nun floaten, ist dies natürlich nicht mehr möglich. Aber auch dafür gibt es Abhilfe: Wenn man #navi auf die für die enthaltenen Links erforderliche Breite zusammenschrumpfen lässt, kann man #navi per margin: 0 auto; zentrieren. Die dafür nützliche "shrink-to-fit-width" wurde bereits angesprochen, allerdings nur als Folge von float ohne width, was hier leider nicht hilft, da eine floatende ul natürlich nicht per margin: 0 auto; zentriert werden kann.

Doch glücklicherweise gibt es noch weitere Eigenschaften, die das "shrink-to-fit-width"-Verhalten hervorrufen - am besten geeignet ist in diesem Falle display: table; für #navi. Dadurch schrumpft #navi auf die Gesamtbreite der horizontal angeordneten li-Elemente zusammen und lässt sich außerdem per margin: 0 auto; horizontal zentrieren.

Allerdings erzwingt ein Bug im Firefox hier ein zusätzliches div, denn wie auf der verlinkten Seite beschrieben, kann es dem angedachten CSS-Konstrukt widerfahren, dass der Firefox die li-Elemente zweizeilig anordnet, und um dies zu verhindern, muss eine "echte" Tabellenzeile her, die die Darstellung der li-Elemente in einer Reihe erzwingt. Diesen wird im Zuge dessen auch das float genommen und durch display: table-cell; ersetzt, um eine "saubere" CSS-Tabelle zu bekommen. Das geänderte Markup sieht folgendermaßen aus:

Code:

<div id="navi">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>

Und das dazugehörige CSS:

Code:

#navi {
	display: table;
	margin: 0 auto;
	}

#navi ul {
	display: table-row;
	}

#navi li {
	display: table-cell;
	}

#navi a,
#navi strong {
	display: block;
	padding: 0.5em;
	}

Doch leider stellt sich auch hier wieder der IE (inkl. 7, jedoch nicht 8 ) quer, da er sämtliche table-Eigenschaften nicht kennt, so dass für ihn ein anderer Ansatz gefunden werden muss. Ein mit display: inline-block; vergleichbares Verhalten wäre hilfreich (sowohl für ul als auch li), und dieses kann im IE auch tatsächlich durch display: inline; zusammen mit zoom: 1; erzeugt werden. Letzteres kennt zwar der IE 5.0 nicht, doch wird bei diesem ein äquivalentes Verhalten durch das bereits bekannte height: 1px; ausgelöst. Folgende Zusatz-Regeln sind nötig und dürfen nur vom IE gelesen werden:

Code:

#navi {
	text-align: center;
	}

#navi ul,
#navi li {
	display: inline;
	zoom: 1;
	}

#navi a,
#navi strong {
	float: left;
	}

* html #navi ul,
* html #navi li {
	height: 1px;
	}

Da die CSS-Tabelle in den standardkonformen Browsern natürlich auch bei Überbreite keinen Umbruch der <li> zulässt, kann man dem IE-CSS noch white-space: nowrap; für ul zuweisen, so dass sich der IE auch in dieser Hinsicht äquivalent zu den übrigen Browsern verhält (ausgenommen der IE 5.0, der die Eigenschaft white-space nicht kennt).

Noch ein allgemeiner Hinweis zu dieser Navigation: Falls sie trotz zentrierter Links immer die volle verfügbare Breite einnehmen soll (z.B. für eine durchgehende Hintergrundfarbe), ist das zusammengeschrumpfte #navi natürlich zu schmal. Abhilfe schafft ein div, das um #navi gelegt wird. Zwar sollte man nach Möglichkeit nie einzelne Elemente mit einem div umgeben (wenngleich dies hier bei der Navigationsliste leider unvermeidbar ist), aber da es u.a. für die Nutzer von Screenreadern sinnvoll ist, auch die Navigation mit einer Überschrift zu versehen, wäre folgendes Markup bestens geeignet:

Code:

<div id="navi">

<h2>Navigation</h2>

<div>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>

</div>

Die Selektoren der vorigen CSS-Beispiele müssen dann natürlich angepasst werden (Stichwort "Nachfahrenselektor").

Möchte man die h2 vor den Nutzern grafischer Browser verstecken, tut man dies einfach durch

Code:

#navi h2 {
	position: absolute;
	left: -9999px;
	top: -9999px;
	}

display: none; wäre zwar ebenfalls möglich, jedoch wird die Überschrift dann von einigen (älteren) Screenreadern nicht mehr vorgelesen.

14) Horizontales Menü mit vertikal zentrierten ein- und zweizeiligen Links

Eine Vertikalzentrierung der Linktexte ist kein Problem, solange sie einzeilig sind, doch sobald auch zweizeilige hinzukommen, muss ein deutlich höherer Aufwand betrieben werden. Für alle guten Browser liegt die Lösung in den table-Eigenschaften, die die gewünschte Vertikalzentrierung problemlos ermöglichen. Da der IE < 8 diese Eigenschaften nicht kennt, wird er nach diesem Prinzip dazu gebracht, den Text immer vertikal zentriert darzustellen.

Vorab einige Anmerkungen zu dem nachfolgend gezeigten Code-Beispiel:

1. Auch wenn man möglichst nie einem Element, das Text enthält, eine height-Deklaration geben sollte, ist dies in diesem Falle leider für #navi a nötig, da es keine andere Möglichkeit gibt, alle Links auf dieselbe Höhe zu bringen. Ohne height-Deklaration wären die zweizeiligen Links immer höher als die einzeiligen, und das würde eine Umsetzung des gewünschten Designs unmöglich machen. Verwendet man für height allerdings einen Wert in em und testet das Textzoom-Verhalten seines Menü ausgiebig, ist die height-Deklaration kein Problem.

2. ist für den IE < 8 nötig (damit er den kompletten Text vertikal an ausrichtet, das immer die volle Link-Höhe einnimmt), kann gleichzeitig aber auch sinnvoll für alle guten Browser eingesetzt werden, indem es display: table-cell; bekommt und sein Elternelement #navi a display: table;.

3. Ob man per CC versteckt oder nicht nicht, ist Ermessensache - versteckt man es nicht, ist der Code schlanker, aber dafür steht ein leeres Element im Markup, mit dem einzigen Zweck, dem IE < 8 nachzuhelfen.

Hier nun der komplette Code (die durch die 1px-border strenggenommen nötigen minimalen Boxmodell-Korrekturen für den IE < 6 lasse ich außenvor):

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Menü-Beispiel</title>
<style type="text/css">

* {
	margin: 0;
	padding: 0;
	border: none;
	font: 100%/1.3 Arial, sans-serif;
	text-decoration: none;
	}

body {
	font-size: .8em;
	padding: 15px;
	}

ul {
	list-style: none;
	width: 37.5em;
	float: left;
	background: #ffd500;
	color: inherit;
	border: 1px solid #000;
	padding-left: 7em;
	}

li {
	float: left;
	width: 6em;
	border-left: 1px solid #000;
	}

#last {
	border-right: 1px solid #000;
	}

li * {
	text-align: center;
	vertical-align: middle;
	}

a,
strong {
	display: table;
	width: 100%;
	height: 3.5em;
	background: #c00;
	color: #fff;
	}

span {
	display: table-cell;
	padding: 0 1em;
	}

a:hover,
strong {
	background: #fff;
	color: #000;
	}

</style>
<!--[if lt IE 8]>
<style type="text/css">

a,
strong {
	display: block;
	width: auto;
	padding: 0 1em;
	}

span,
b {
	zoom: 1;
	padding: 0;
	}

a span,
a b {
	cursor: pointer;
	}

b {
	height: 100%;
	}

* html ul {
	width /**/: 44.5em;
	}

* html a span,
* html a b {
	cursor /**/: hand;
	}

* html span {
	height /**/: /**/1px;
	}

</style>
<![endif]-->
</head>

<body>

<ul>
<li><a href="#"><span>Text</span><!--[if lt IE 8]><b></b><![endif]--></a></li>
<li><strong><span>Text</span><!--[if lt IE 8]><b></b><![endif]--></strong></li>
<li><a href="#"><span>mehr Text</span><!--[if lt IE 8]><b></b><![endif]--></a></li>
<li><a href="#"><span>Text</span><!--[if lt IE 8]><b></b><![endif]--></a></li>
<li id="last"><a href="#"><span>Text</span><!--[if lt IE 8]><b></b><![endif]--></a></li>
</ul>

</body>

</html>

15) Grafische Menüs

Ein Menü, das seinen Text in Form von Hintergrundgrafiken enthält, hat den Nachteil, dass für Besucher, die in ihrem Browser das Laden von Grafiken deaktiviert haben, keinerlei Link-Texte mehr sichtbar wären und die Seite daher nicht mehr navigierbar wäre. Eine einfache Abhilfe wäre natürlich, die Grafiken als <img> mit "alt"-Attribut einzubinden, aber das widerspricht der Trennung von Inhalt und Design, denn bereits eine Grafik mit spezieller Schrift (ganz zu schweigen von zusätzlichen Schatten oder ähnlichen Effekten) ist ausschließlich ein Design-Mittel und gehört daher nicht ins Markup, sondern ins CSS.

Doch es gibt glücklicherweise auch die Möglichkeit, zwar Hintergrundgrafiken zu verwenden, aber dennoch bei deaktivierten Grafiken den regulären Link-Text anzeigen zu lassen: Durch die "Gilder/Levin-Methode", auf der meine nachfolgend erläuterte Variante basiert. Diese stellt das Menü in horizontaler Form dar (da diese Variante aufwendiger ist, so dass sie für die vertikale Darstellung nur noch vereinfacht werden muss).

Als erstes bekommt jedes Element #navi li seine eigene ID, da ja später individuelle Hintergrundgrafiken zugewiesen werden sollen:

Code:

<ul id="navi">
<li id="home"><strong>Home<span></span></strong></li>
<li id="team"><a href="#">Team<span></span></a></li>
<li id="kontakt"><a href="#">Kontakt<span></span></a></li>
</ul>

Dann wird #navi li links gefloatet, und kann dank seiner ID auch eine individuelle Breite bekommen, falls die Links der Länge ihres jeweiligen Textes angepasst werden sollen. Eine Höhe benötigt #navi li nicht, da diese durch die Höhe des enthaltenen <a> bestimmt wird. <a> bekommt außerdem noch width: 100%; sowie position: relative;, da sich (das im folgenden Absatz in Erscheinung treten wird) hinsichtlich Größe und Positionierung auf sein Elternelement <a> beziehen muss.

Code:

#navi li {
	float: left;
	width: 50px;
	}

#navi #kontakt {
	width: 60px;
	}

#navi a,
#navi strong {
	display: block;
	height: 30px;
	width: 100%;
	position: relative;
	}

Jetzt kommt ins Spiel. Es soll sich über die gesamte Link-Fläche erstrecken, und diese (samt dem regulären Link-Text) mit einem Hintergrundbild überdecken (das natürlich keinerlei Transparenz enthalten darf). Fehlt das Bild (z.B. bei vom Besucher deaktivierten Grafiken), ist der darunter liegende Text dagegen uneingeschränkt sichtbar.

Als erstes wird nun eine allgemeine Regel aufgestellt, so dass anschließend nur die noch Regeln für die Anzeige der individuellen Hintergrundgrafiken benötigt werden.

Code:

#navi span {
	position: absolute;
	width: 100%;
	height: 30px;
	top: 0;
	left: 0;
	background: url(navi.png);
	}

Anmerkung: Wegen eines Bugs in Opera 8.x wird hier bewusst auf (das prinzipiell naheliegende) "no-repeat" verzichtet, denn andernfalls zeigen diese Opera-Versionen beim ersten Aufruf der Seite die Grafik nur bei dem an, für das background-position: 0 0; deklariert ist, während sie bei allen übrigen -Elementen erst z.B. beim Scrollen der Seite oder beim Hovern der Links erscheint. Das Fehlen von "no-repeat" ist kein Problem, da ohnehin nur ein kleiner Ausschnitt der Grafik zu sehen ist, so dass es egal ist, ob sie sich außerhalb des sichtbaren Bereiches nun wiederholt oder nicht.

Da empfohlen wird, zu Gunsten einer optimalen Website-Performance die Anzahl der HTTP-Anfragen zu reduzieren (sprich: durch möglichst wenig zu übertragende Dateien), bietet es sich an, alle Grafiken zu einer einzigen zusammenzufassen (die im vorstehenden CSS-Code schlicht "navi.png" heißt), und den jeweils gewünschten Teil per background-position in den sichtbaren Bereich des dazugehörigen Links zu rücken. Weitere Vorteile dabei: Es ist keinerlei Preload für die Hover-Effekte mehr nötig, und die Dateigröße einer Grafik, die alle Zustände enthält, ist auch geringer als die Summe der entsprechenden Einzel-Grafiken (u.a. da es insgesamt nur einen Grafik-Header gibt).

In dieser Link-Grafik können z.B. in der oberen Reihe alle Link-Texte nebeneinander stehen. Diese Reihe wird dann dupliziert und nach unten versetzt, und bekommt dort z.B. die geänderte Farbe für die Hover-Effekte, so dass man auf der fertiggestellten Grafik schließlich das gesamte Menü zweimal sieht, z.B. einmal oben mit weißem Text, und darunter noch einmal mit rotem Text.

Nun muss die Grafik nur noch für jeden einzelnen Link sowie seinen Hover-Effekt an die richtige Position gebracht werden. Dies geschieht nach folgendem Prinzip:

Code:

#navi #home a span {
	background-position: 0 0;
	}

#navi #home a:hover span,
#navi #home strong span {
	background-position: 0 -30px;
	}

Natürlich sollte man aber auch den von der Grafik verdeckten Text nicht vernachlässigen, denn unter Umständen ist dieser ja sichtbar (in jedem Falle aber während des ersten Aufrufs der Website, d.h. bevor die Navi-Grafik geladen wurde und sich anschließend im Browser-Cache befindet). Der reguläre Link-Text wird also wie gewohnt formatiert (möglichst passend zu den Grafiken), und damit er bei Textvergrößerung nicht irgendwann unter der span-Grafik hervorschaut, bekommt #navi a noch overflow: hidden;.

Der CSS-Code sieht schließlich wie folgt aus:

Code:

#navi li {
	float: left;
	width: 50px;
	}

#navi #kontakt {
	width: 60px;
	}

#navi a,
#navi strong {
	display: block;
	height: 30px;
	width: 100%;
	position: relative;
	overflow: hidden;
	}
	
#navi span {
	position: absolute;
	width: 100%;
	height: 30px;
	top: 0;
	left: 0;
	background: url(navi.png);
	}

#navi #home a span {
	background-position: 0 0;
	}

#navi #home a:hover span,
#navi #home strong span {
	background-position: 0 -30px;
	}

Aber es wäre ja fast schon ein Wunder, wenn der IE damit bereits zufrieden wäre

Und tatsächlich: Obwohl sich span innerhalb von #navi a befindet, zeigt der Cursor des IE (inkl. 7, jedoch nicht 8 ) beim Link-Hovern nicht mehr die übliche "Hand-Form". Diese muss ihm also wieder "beigebracht" werden, durch

Code:

#navi a span {
	cursor: pointer;
	}

Und auch der IE 5.x schießt hier noch einmal quer, denn er kennt den Wert "pointer" nicht - er möchte hier "hand" gesagt bekommen. Dieser Wert ist zwar leider kein gültiges CSS, aber wie bereits weiter oben gesagt: Da das entsprechende CSS dem IE per Conditional Comment zugewiesen wird, kann man darüber hinwegsehen - der CSS-Validator tut dies schließlich auch

Und zuguterletzt gibt es noch einen ärgerlichen Bug des IE 6, der Hintergrundgrafiken beim Hovern "flackern" lässt. Achtung: Er tut dies nur bei einer bestimmten Einstellung des IE, also selbst wenn beim abschließenden Test nichts flackert, bei anderen Nutzern wird dies definitiv passieren! Alle Infos zu diesem Problem stehen auf http://www.fivesevensix.com/studies/ie6flicker/, und ebenso die Ideallösung per .htaccess (zu finden unter "Update - 06/03/2004").

Peter Klein · #3 (**permalink**) 29.06.2007, 18:50

16) Doctype - Dokumenttyp Deklaration

So, ich werde hier mal eine kleine Einführung ( Dokumenttyp Deklaration ) schreiben, in der ich den Doctype etwas erkläre, ausserdem etwas zum Doctype Switch.

Ein Doctype sieht wie folgt aus:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

-------------------------------------------------------------------

Er setzt sich folgendermaßen zusammen:für das obige Beispiel erklärt!

DOCTYPE HTML PUBLIC - bedeutet das man sich auf die öffentlich HTML Dokumenttyp Deklaration bezieht.

"-//W3C//DTD HTML 4.01//EN" - W3C ( W3-Konsortium ) ist der Herausgeber der Dokumententyp Deklaration.
DTD XHTML 1.0 strict bedeutet, das man den Dokumenttyp XHTML nutzt, dieses in der Version 1.0 und dessen Version strict.
Das EN zeigt die Sprache an, in der die Tags etc geschrieben werden, die ist immer englisch.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" - Die URL im Dokumenttyp muss nicht angegeben werden, sie kann. Dort ist die Dokumenttyp Definition hinterlegt. Kurz DTD.

-------------------------------------------------------------------
Er ist fester Bestandteil einer (X)HTML-Datei und muss enthalten sein.
Dieser sitzt im (X)HTML-Dokument an erster Stelle und gibt an nach welcher (X)HTML-Version die Seite erstellt wurde.
Ebenso legt der Doctype fest, welche Elemente und Attribute in eben diesem Dokument vorkommen dürfen. Um eine Webseite validieren zu können, muss der Doctype unbedingt angegeben sein.

Wen man ihn nicht angibt, wird man damit "bestraft" daß der Browser sich in den sog. "Quirks-Modus" schaltet, d.h. er stellt das Dokument dar, wie es im Internet Explorer 4 aussehen würde.

Es gibt 3 verschiedene Darstellungsmodi (schreibt man das so?), den Full-Standard Mode, Almost-Standard Mode und den Quirks Mode.

Mit folgenden Doctypes befindet sich der Browser im Full Standard Mode:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> (*) <--lässt man diese Auszeichnung weg, so führt das dazu, daß der der IE5 im Mac das Dokument im Quirks Modus darstellt!


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

Diese 2 bewirken den Almost Standard Mode:

Code:

    
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

Und zum Schluß der Quirks Mode:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Ich weiss, daß sehr viele Leute die (X)HTML-Dokumente erstellen gar nicht wissen, daß moderne Browser umschalten können zwischen den einzelnen Modi. Auch dadurch werden viele Fehler gemacht beim Umsetzen einer Webseite, weil der Browser evtl. im falschen Modus arbeitet, die eigentlich vermieden werden könnten.

Peter

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Interview : Fragen und Antworten	vik.alive	Serveradministration und serverseitige Scripte	3	31.03.2009 12:09

LinkBacks (?) LinkBack to this Thread: http://xhtmlforum.de/40267-faq-h-ufig-gestellte-fragen-und.html
Erstellt von	For	Type	Datum
CSS-Frage - Off-Topic - WoltLab Supportforum	This thread	Refback	28.02.2009 10:22
Zwei gefloatete div´s gleich lang - HTML & CSS - Eurostyle Online	This thread	Refback	12.09.2008 14:33
CSS - Cynamite.de-Foren	This thread	Pingback	04.09.2008 19:50
safari vertauscht reihenfolge der divs - Adobe UserGroup Dreamworker.de	This thread	Refback	21.08.2008 13:35
Div ganz unten an der Seite positionieren - PSD-Tutorials.de - Forum	This thread	Pingback	02.07.2008 15:11
onmouseoverbild gleich in laden - Die Stämme - Forum	This thread	Refback	29.06.2008 00:15
Elemente in einem div-Container vertikal ausrichten? :: phpBB.de	This thread	Refback	25.06.2008 14:19
CSS alle divs VergrÃ¶ÃŸern - ForumBase	This thread	Refback	19.06.2008 18:57
divs nebeneinander und Zentriert - Fragen zum Erstellen von Stilen - WoltLab Community Forum	This thread	Refback	12.06.2008 13:52
CSS Problem: Waagerechte Navigation mit Hintergrund - mediengestalter.info	This thread	Refback	27.05.2008 11:08
mein code/ zuviele blockelemente - Seite 2 - html.de Forum - HTML für Anfänger & Fortgeschrittene	This thread	Pingback	20.05.2008 07:00
wrapper - Höhe des Iframe	This thread	Refback	07.05.2008 16:48
Divisions - Forum - CHIP Online	This thread	Refback	25.04.2008 22:54
IE-Probleme mit ul-Men - CSS @ tutorials.de: Forum, Tutorial, Anleitung, Schulung & Hilfe	This thread	Pingback	28.03.2008 12:23
» dn - Footer immer am unteren Rand der Seite	This thread	Refback	25.03.2008 12:42
Problem float und div - PSD-Tutorials.de - Forum	This thread	Pingback	22.03.2008 19:25
Lsung gefunden- HTML/CSS - www.spotlight-wissen.de	This thread	Refback	26.02.2008 10:05
Brauche Hilfe zum Template - Joomla CMS Support Forum	This thread	Refback	25.02.2008 16:48
[Problem] - DIV-Hhe dynamisch anpassen - support-community.net - Support rund um ihren Computer	This thread	Refback	19.12.2007 22:18
Wie blende ich einen CSS Layer mit Ajax aus? - AJAX (Asynchronous JavaScripting and XML) Forum	Post #1	Pingback	30.11.2007 10:23
9dots.de Webdesign Community - Thema anzeigen - css oder tabellen?	This thread	Refback	22.11.2007 00:38
Opera-Info.de Forum \| Homepagegestaltung \| Tabellen oder Boxen verwenden?	This thread	Refback	19.11.2007 20:06
css: resthöhe ausfüllen - Forum - CHIP Online	This thread	Refback	08.11.2007 01:17
Wie im Forum am besten geholfen werden kann - XHTMLwiki	This thread	Refback	10.09.2007 16:57
#content reagiert nicht auch height: 100%; - Forum: phpforum.de	This thread	Refback	05.09.2007 12:38
Wrapper-DIV wächst nicht richtig mit - Developer's Guide	This thread	Refback	22.08.2007 23:15
100% nach unten? - PSD-Tutorials.de - Forum	This thread	Refback	18.07.2007 22:13
CSS Problem mit DD-Plastic im IE6! - Joomla CMS Support Forum	This thread	Refback	26.06.2007 16:12
Navigationsproblem Darstellung IE 6 - TP Hilfe Forum	Post #2	Refback	20.06.2007 16:25
C/C++ Forum :: Frage zu CSS Möglichkeiten	This thread	Refback	08.06.2007 10:47
Kurmann Webdesign	This thread	Refback	30.05.2007 16:15
CSS-Frage - Off-Topic - WoltLab Burning Board 3.0 Beta	This thread	Refback	28.05.2007 11:31
Dynamisch, Fehler. - PSD-Tutorials.de - Forum	This thread	Pingback	07.05.2007 15:30
footer mit div? - Seite 2 - Forum: phpforum.de	This thread	Refback	05.05.2007 11:59
div-container 100% - Seite 2 - PSD-Tutorials.de - Forum	This thread	Pingback	26.04.2007 15:47
kennzeichnung des aktuellen menÃ¼punktes - Forum: phpforum.de	This thread	Refback	19.04.2007 16:37
CSS - Menü - margin IE vs. FF - WordPress Deutschland Forum	Post #2	Refback	14.04.2007 00:15
Tabelle auf volle Browsergröße bringen - PSD-Tutorials.de - Forum	This thread	Pingback	31.03.2007 14:15
Delphi-PRAXiS :: [PHP] Automatischer Zeilenumbruch im DIV-Bereich	This thread	Refback	19.03.2007 16:45
Safari verschiebt die Navi - Adobe UserGroup Dreamworker.de	This thread	Refback	08.03.2007 15:18
Design Nation / WEBMASTER FORUM -> Probleme mit Layout (CSS) bei Browsern	This thread	Refback	06.03.2007 21:35
Probleme mit DIV - AJAX-Community Forum	This thread	Refback	02.03.2007 16:41
h1 als Überschrift + Bild -> Spalte zwischen Bild und Border - Inspire-World Forum	This thread	Refback	27.01.2007 12:59
C/C++ Forum :: Frage zu CSS Möglichkeiten	This thread	Refback	25.01.2007 21:54
CSS - Menü - margin IE vs. FF - WordPress Deutschland Forum	Post #2	Refback	24.01.2007 15:29
PHP script resource [CSS] 2 DIV Container mit gleicher Höhe - wie geht das?	This thread	Refback	21.01.2007 15:50
Lösung gefunden - www.spotlight-wissen.de	This thread	Refback	05.01.2007 13:11
Elemente in einem div-Container vertikal ausrichten? :: phpBB.de - Aktuelle Version: phpBB2.0.22	This thread	Refback	31.12.2006 22:14
Link-Tipp: CSS : niedermayr.cc	This thread	Refback	25.12.2006 11:51
Opera-Info.de Forum \| Homepagegestaltung \| Tabellen oder Boxen verwenden?	This thread	Refback	23.12.2006 09:47
Design Nation / WEBMASTER FORUM -> CSS-Layout ....	This thread	Refback	25.11.2006 13:01
PHP script resource - [CSS] 2 DIV Container mit gleicher Höhe - wie geht das?	This thread	Refback	10.11.2006 09:24
HTML und PHP Beispiele	This thread	Refback	28.10.2006 20:51