Dabei ist i.d.R. kein böser Wille im Spiel sondern Unwissenheit.

Vielleicht kann ich euch da mit ein paar simplen Tips hilfreich zur Seite stehen:

Schriftgröße in em oder Prozent

In diesem Artikel habe ich das schon einmal beschrieben.

Skiplinks

Damit wird dem Besucher die Möglichkeit gegeben Bereiche der Website zu überspringen, um direkt zur Navigation oder zum Inhalt zu springen.

Oben auf der Seite werden die Skiplinks idealerweise unter der h1-Überschrift plaziert. Man sollte sich da auf maximal drei beschränken, um keine Verwirrung zu stiften. Am Ende der Seite (im Fussbereich) gibt es die Skiplinks noch einmal, diesmal um zu den jeweiligen Bereichen zurückzuspringen.

Beispiel:

Wenn die Navigation direkt nach der Hauptüberschrift kommt reicht ein Skiplink zum Inhalt imho aus. Die Bereiche die angesprungen werden sollen brauchen id’s, um sie anspringbar zu machen.

Die Skiplinks können für normale Besucher per CSS ausgeblendet werden:

Solche Codeschnipsel könnt ihr in einer Vorlagendatei speichern, damit sie bei Bedarf per copy/paste rasch eingefügt und angepaßt werden können.

Nach oben

Skiplinktabs für Durchtabber

Menschen mit motorischen Einschränkungen haben oft Probleme mit der Mausbedienung, deshalb hangeln sie sich oft mit der Tab-Taste durch eine Seite. Diese Tabs kann man ganz einfach sichtbar machen.

Um auch die Skiplinks dabei ans Licht zu holen ergänzen wir den Quelltext derselben um eine Klasse und fügen noch etwas CSS dazu:

Quellcode:

CSS dazu:

Die vorher aus dem Bild geschobenen Skiplinks werden beim Betätigen der Tab-Taste eingeblendet. Das funktioniert zumindest im Firefox und im Internet Explorer.

Nach oben

Text,- und Hintergrundkontrast mit CCA prüfen

ca. 8-10% der männlichen Bevölkerung leidet mehr oder weniger unter einer Farbfehlsichtigkeit. Viele Ältere sehen nicht mehr so gut und haben beim Lesen Probleme, wenn der Kontrast zwischen der Schriftfarbe und der Hintergrundfarbe zu gering ist.

Mit dem Colour Contrast Analyzer könnt ihr schnell checken, ob da alles in Ordnung ist.

Für jedes label ein for

Um eine logische Bezeihung zwischen einem Eingabefeld (input) und der entsprechenden Beschriftung (label) herzustellen sollte label mit dem for-Attribut versehen werden.

Beispiel:

for von label und id des input-Feldes sind gleich und die logische Beziehung damit hergestellt.

title-Attribute bei Links nur mit Bezug zum Link!

Wenn der Link ein title-Attribut mit ensprechendem Text besitzt dieser dieser Text einen direkten Bezug zum Link haben. Ältere Screenreader lesen den Linktext nicht mehr vor, wenn es ein title-Attribut gibt.

Dropdown- oder Flyout-Menüs nicht mit display:none; oder visibility:hidden; gestalten.

Die Links, die auf diese Art gestaltet sind, werden von den meisten Screenreadern nicht mehr vorgelesen.

Ein erklärender Link dazu. Eine alternative Formatierungsmöglichkeit ohne diese Nachteile gibt es.

Nach oben

Zusammenfassung des Tabelleninhaltes durch das Attribut summary

Dadurch kann sich der Screenreaderuser einen Überblick über den Inhalt der Tabelle verschaffen.

Kopf,- und -Fusszeilen für Tabellen definieren

Erleichtert ebenfalls die Lesbarkeit für die Screenreaderuser.

Wechselnde Seitentitel

Das jede Seite einen spezifischen Seitentitel erhalten sollte ist eigentlich selbstverständlich. Dies erhöht die Usability für alle Besucher.

Valider Quelltext

Nicht valide Seiten verlassen sich auf die Fehlerkorrekturmechanismen der Browser oder Screenreader. Das ist deshalb sicher suboptimal.

Zum Schluß noch ein allgemeiner Hinweis, um die Usability für alle zu verbessern:

Definiert eine druck.css!!

Die Browser haben eine Druckfunktion mit deren Hilfe man sich die aufgerufene Seite auch ausdrucken kann. Da ist es doch einfach ärgerlich wenn alle Bilder oder das Menü mit ausgedruckt werden. Weisser Text auf schwarzem Hintergrund kann für viel Freude beim Besucher sorgen, wenn das dann auch so ausgedruckt wird.

Die Tips erheben keinen Anspruch auf Vollständigkeit, aber helfen vielleicht dem einen oder anderen. Solltet ihr noch Tips zu diesem Thema haben, nur heraus damit!

Nach oben

Als erstes legen wir ein weißes Blatt Papier vor uns auf den Schreibtisch, zücken einen Bleistift (Kuli ist lt. Designprofis verboten!) und horchen ganz tief in uns hinein.

Irgendwo da muss das Plätschern der Kreativitätsquelle doch zu hören sein?

Mmmh………, ich hör nix. Ach und zeichnen kann ich auch nicht.

Ein Lineal wird dazugelegt…………noch immer nix zu hören!

Letzter Versuch! Von http://www.raincreativelab.com/paperbrowser/ lade ich mir ein landscape + notes herunter, drucke es aus und lege es auf den Schreibtisch. Schön und jetzt??

So geht es nicht, für mich jedenfalls nicht.

Also mach ich es wie immer:

Ich treffe den Kunden zu einem ersten Gespräch, was ungefähr 2 – 3 Std. dauert. Durch Fragen bekomme ich erst ein Profil des Unternehmens.

Wie will sich der Kunde im Internet präsentiert sehen? Was für Farben kommen in Frage oder gibt es Unternehmensfarben? Layout verspielt oder sachlich? Wie viel Unterseiten werden gebraucht und wie könnte die Navigationsstruktur aussehen? Usw. usw.

Wichtig ist imho sich vorher über den Kunden etwas zu informieren oder zumindest über die Branche, in der er tätig ist. Daraus ergibt sich ein Fragenkatalog, der während des Gesprächs mehr oder weniger abgearbeitet wird.

Je nachdem bekomme ich die Texte geliefert, oder teilweise geliefert und muss den Rest dazu fabulieren. Vielleicht gibt es noch Logo und/oder diverse Fotos dazu, in oft übersichtlicher Qualität.

Jetzt setze ich mich hin und erstelle den Quelltext für die Startseite. Ist das getan versuche ich ein paar Farben festzulegen. Dabei ist der Color Scheme Designer oft ganz hilfreich.

Manchmal greife ich dann tatsächlich zu Papier und Stift, um etwas hinzu kritzeln. Meistens vergeblich. Das Gekrakelte wandert in den Papierkorb und ich schaue mir im Internet einen Haufen Templates an, diverse Sites gibt es ja genug.

Formt sich dann noch keine Vorstellung in mir, lasse ich es mindestens 24 Std. liegen.

So können mehrere Tage vergehen, bis ich endlich einen Ansatz gefunden habe.

Er kann kommen wenn ich im Photoshop missmutig ein paar Kästchen hin- und herschiebe, oder beim Templateschauen , oder wenn ich ratlos anfange die CSS-Datei auszubauen, oder einfach so wenn ich grad was anderes mache.

Den einen wahren Weg gibt es bei mir nicht. Geplant wird aber trotzdem, auf meine eigene Weise.

Vladimir Simovic hat in einem älteren Artikel beschrieben, wie man das mithilfe eines Plugins getrennt ausgeben kann. Das Plugin gibt es wohl nicht mehr, deshalb habe ich ausgehend von Vladimirs Artikel das mal für mich in Szene gesetzt.

Meine Methode ist einfach und sicher etwas grobschlächtig, aber sie funktioniert einwandfrei.

Ursprüngliche comments.php Classic-Theme Ausschnitt:

Das ist der entscheidende Ausschnitt meiner comments.php. Die für die Änderung unwichtigen Codezeilen habe ich einfach durch zwei Zeilen Bindestriche ersetzt.

Nach der Änderung sah der entscheidende Abschnitt meiner comments.php dann so aus:

Die foreach-Zeile habe ich durch eine if-Abfrage ergänzt und diese unmittelbar vor endforeach mit endif beendet.

Diesen kompletten Codeabschnitt habe ich kopiert und direkt unterhalb davon wieder eingefügt.

Anschließend habe von den doppelten Gleichheitszeichen (==) der foreach-Zeile eines durch ein Ausrufezeichen ersetzt (!=). Damit wird aus gleich dann ungleich.

An dieser Stelle wird dann alles ausgegeben was kein Kommentar ist, also die Pingbacks und Trackbacks.

Ihr könnt die Reihenfolge natürlich austauschen, sodass zuerst Ping-/Trackbacks ausgegeben werden.

Weil einige von euch vielleicht die comments-php des Kubrick-Themes nutzen, habe ich die notwendigen Änderungen dafür anschließend dokumentiert.

Ursprüngliche comments.php Kubrick-Theme Ausschnitt:

Geänderte comments.php Kubrick-Theme Ausschnitt:

Das ist fast schon selbsterklärend. pings heißt übrigens Pingbacks und Pingbacks zusammen!

Wenn die Ping-/Trackbacks überhaupt nicht angezeigt werden sollen, dann lasst den entsprechenden Codeabschnitt einfach weg. Allerdings habt ihr dann das Problem das Ping-/Trackbacks trotzdem mitgezählt werden.

Ihr könnt euch damit behelfen indem ihr in eurer comments.php die Zeile mit <h3 id="comments">------</h3> sucht. Im classic-Theme ist das ca. Zeile 5 und im Kubrick-Theme ca. Zeile 21.

Löscht den Inhalt des h3-Tags und ersetzt ihn z.B. durch das Wort Kommentare. Das sieht dann allerdings nicht so toll aus, wenn keine Kommentare vorhanden sind.

Oder ihr löscht die ganze h3-Zeile raus. Die Kommentare sind ja i.d.R. schon optisch hervorgehoben dargestellt.

Sollte jemand von euch erklären können, wie nur die Kommentare gezählt werden können, wenn Track-/Pingbacks nicht mit ausgegeben werden, nur heraus damit!

Ich will mit Wordpress zu einer neuen Domain umziehen und nutze dabei die Export/Import-Funktion von WP.

Zuerst sichert ihr die alte WP-Installation inkl. der Datenbank.

Im Backend der alten WP-Domain geht ihr zu Werkzeuge – Daten exportieren und ladet den kompletten Inhalt eures Blogs inkl. aller Artikel, Kommentare, Kategorien, Tags, Seiten und benutzerdefinierter Felder in einer XML-Datei runter.

Beim späteren Import seht ihr, dass die maximale Größe der Datei 200 MB sein darf. Ist sie größer empfiehlt es sich, die Exportdatei pro Autor aufzuteilen und später einzeln zu importieren.

Ladet die aktuelle Wordpressversion herunter und entpackt sie im lokalen Ordner der neuen Domain.

Nehmt von eurer gesicherten WP-Installation die Ordner plugins, uploads und euren Themeordner. Die schiebt ihr an die entsprechenden Stellen der frischen WP-Version. Vielleicht müßt ihr noch eure .htaccess anpassen und rüberschieben, je nach dem was da für Umleitungen etc.drinstehen.

Die wp-config-sample.php wird in wp-config.php umbenannt und modifiziert:

Datenbankname, DB-Benutzername und das DB-Passwort werden eingetragen, die gesalzenen Passwörter an die richtige Stelle einkopiert und der Datenbankpräfix aus Sicherheitsgründen ergänzt.

Da wird dann z.B. aus wp_ einfach wp_y15xg7v3.

Ladet die frisch ergänzte WP-Version mit eurem FTP-Programm auf den neuen Webserverplatz eurer neuen Domain hoch. Ändert die Dateiberechtigung für die .htaccess auf 666 und mindestens für den Ordner uploads auf 777.

Ruft wie gehabt im Browser die http://neuedomain.de/wp-admin/install.php auf und installiert Wordpress.

Hat das geklappt und ihr befindet euch auf der Startseite des Backends (neue Domain!) öffnet ihr bitte in einem neuen Fenster das Backend eurer alten Domain.

Diese beiden Fenster stellt ihr zum Vergleich nebeneinander, sofern euer Viewport groß genug ist. Aktiviert im neuen Backend euer Theme und alle Plugins. Passt alle Einstellungen (Allgemein, Schreiben, Lesen, etc.) und die Einstellungen der Plugins an. Mit den beiden Fenstern nebeneinander zum Vergleich geht das ganz fix.

Bevor ihr eure Daten importiert, öffnet bitte die Exportdatei mit einem geeigneten Editor, notepad++ z.B..

Alle vernünftigen Editoren haben einen Menüpunkt der entweder Suchen und/oder Suchen und Ersetzen heißt. Dort tragt ihr unter Suchen nach: den alten Domainnamen und unter Ersetzen durch den neuen Domainnamen ein. Überlegt vorher genau was da reingehört, damit es hinterher keine böse Überraschung gibt!

Ist das erledigt könnt ihr die geänderte XML-Datei von eurem neuen Backend aus importieren (Werkzeuge – Daten importieren).

Normal war’s das, aber was ist schon normal?

Prüft genau ob alles wunschgemäß funktioniert. Schaut vor allen Dingen noch mal in die PHP-Dateien eures Themes, ob da irgendwann mal von Hand euer alter Domainname aus welchen Gründen auch immer verewigt wurde.

Stimmen die Pfade dort alle? Wenn die alte WP-Installation z.B. in einem Unterordner lag, kann dieser oder jener Pfad evtl. nicht mehr richtig sein. Korrigiert die noch vorhandenen Fehler.

Zuerst braucht ihr ein Google Konto, welches ihr in der Google-Maske oben rechts unter dem Menüpunkt Anmelden und dann unter Legen Sie jetzt ein Konto an erledigen könnt.

Unter Mein Konto könnt ihr bei dem Punkt Maps Eigene Karten anlegen. Wollt ihr für euer Unternehmen so ein blaues Fähnchen mit dem Standort eurer Firma in Google Maps meldet Ihr euch beim Lokalen Branchencenter an. Das kann ein paar Tage dauern, wenn ihr den Weg über die Postkarte mit dem Verifizierungscode wählt.

Habt ihr das erledigt besucht euren Google Account und geht dort bei Maps auf Meine Karten. Auf der linken Seiten könnt ihr im darauffolgenden Fenster normalerweise den Namen eurer Karte anklicken.

Die Karte mit eurem zentrierten Fähnchen sollte nun erscheinen.

Oben rechts den Menüpunkt Links anklicken und im sich öffnenden Fenster Eingebettete Karte anpassen und Vorschau anzeigen auswählen.

Es öffnet sich ein neues Fenster, wo ihr die Kartengröße anpaßt und weiter unten den entsprechenden Code herauskopiert und an geeigneter Stelle in eurer Dokument einfügt.

Der Code schaut ungefähr so aus:

Sehr praktisch finde ich das man nur das Fähnchen anklicken muss, damit sich ein kleines Popup mit der Anschrift öffnet. Unter Route berechnen: Hierher gibt man nur die Startadresse ein und einer Routenberechnung steht nichts mehr im Wege.

Habt ihr einen Strict-Doctype ist die Seite nicht mehr valide, weil da keine iframes erlaubt sind. In diesem Fall ändert ihr den Doctype einfach auf Transitional.

An der zweiten Codezeile würde ich noch ein paar Modifikationen vornehmen:

small gegen p austauschen und die Inline-Styles entfernen, damit eure normalen Formatierungen wieder greifen.

Grundsätzlich kann ich iframes nicht ausstehen, aber manchmal ist ein gesunder Pragmatismus auch nicht verkehrt.

Eine Menge Zeit spart man sich wenn man die navi per include einbindet. Diese Methode ist relativ simpel und effektiv. Man führt die Änderung an einer Datei durch und fertig.

Man hat zwar noch den Deppenlink (Link der auf sich selber zeigt), aber was soll’s.

In diesem, auch für PHP-Vollpfosten geeigneten Tutorial beschreibe ich euch, wie ihr die navi includet und trotzdem den Deppenlink vermeidet.

So sieht euer Menü normalerweise aus:

Wie es sich gehört ist das Menü eine ungeordnete Liste. Bei der aktuellen Seite wurde a gegen strong ausgetauscht, um den Deppenlink zu vermeiden.

Um die navi zu includen, benenne ich die beteiligten Dateien von .htm in .php um. Aus der index.htm wird also index.php, usw.

Wo die ungeordnete Liste mit dem Menü stand trage ich folgendes ein:

Den Inhalt der navi.php, die anstelle von dem, was da vorher stand eingebunden wird werfe ich euch mal direkt vor die Füße:

Um zu verstehen was wo eingetragen wird, lohnt es sich einmal etwas genauer hinzuschauen.

Zuerst wird in einem array die Adresse root-relativ eingetragen, d.h. es wird vom Wurzelverzeichnis des Webservers ausgegangen, was ja i.d.R. immer / ist.

Rechts daneben steht in Hochkommata der Text des Menüpunktes.

Wenn die angewählte URL gleich der URL des Menüpunktes ist wird a gegen strong ausgetauscht, ansonsten über die else der Link hingeechot.

Das array kann beliebig erweitert werden, je nachdem wieviel Menüpunkte die Navigation hat.

Wenn ihr mehrere Menüs auf eurer Seite habt, braucht ihr z.B. eine topnavi.php, eine seitennavi.php und/oder eine fuss-navi.php. Der Inhalt ist bis auf die Punkte des arrays gleich, ihr müßt nur die richtige PHP-Datei an der richtigen Stelle includen.

Das ist die einfachste Art eines Menüs, welches includet wird. Da ich euch noch mehrere Varianten zur Verfügung stellen will, habe ich alles zum Download in den Ordner include.zip gepackt.

Die enthaltene navi-normal.php ist die hier vorgestellte Variante.

Bei der navi-title.php gibt es zusätzlich den title-Tag für a

Bei der navi-klasse.php hat a noch eine zusätzliche Klasse und die navi-id.php hält für jeden Listenpunkt eine id bereit.

Funktioniert problemlos mit statischen Seiten. Ob das mit einem CMS so ohne weiteres geht glaube ich eher nicht.

Wenn ihr das Gleiche für eine Wordpressinstallation wollt, kann ich euch den schönen Artikel von Thomas dazu ans Herz legen.

Von Markus stammt die Ursprungsversion des Scriptes. Heiko hat es verfeinert und David hat mir beim Verstehen des Scriptes geholfen.

Vielen Dank dafür euch dreien!

Ihr habt mir abgesehen von diesem Script schön öfter geholfen. Auch dafür nochmal an dieser Stelle meinen besonderen Dank! Ich habe viel von euch gelernt.

Jetzt fehlt noch die fixierte Positionierung, die im Grunde eine Unterabteilung der absoluten Positionierung ist.

D.h. es gelten fast die gleichen Regeln wie für position:absolute;, außer das dort immer body als Bezugspunkt für Positionsangaben gilt. Außerdem kennt der IE 6 position:fixed; nicht und ignoriert es deshalb.

Hier findest du die position-fixed-anfang.htm zum Quelltext rauskopieren.

Bilder gibt es diesmal leider nicht, aber ich denke diesmal geht es auch ohne.

Bitte CSS ergänzen:

Wenn ihr jetzt im Browser nach unten scrollt, kommt das fixierte Element mit. Setzt ihr die Positionsangaben auf null drängelt sich das fixierte Element ganz nach oben links, kommt aber beim Scrollen immer noch mit.

Beim IE 6 passiert nix. Das fixierte Element kommt einfach nicht mit.

Zum einen kann man den IE6 dabei einfach ignorieren, es gäbe allerdings z.B. die Möglichkeit ihm per Javascript auf die Sprünge zu helfen.

Oder ihr verzichtet auf position:fixed;.

Hier findest du die position-relative-anfang.htm zum Quelltext rauskopieren.

Im Browser schaut es so aus:

Drei farbige Boxen in einer hellgrauen Box untereinander. Alles ist im normalen Textfluß.

Bitte CSS ergänzen:

Das ergibt folgendes Bild im Browser:

Nun ja, nicht sehr spektakulär.

Genaugenommen gibt es auch nach intensivem Studium keinen Vorher/Nachher-Effekt.

Durch position:relative; haben wir die Box zwar aus dem normalen Textfluß entfernt, sie hockt aber immer noch am gleichen Platz.

Bitte CSS ergänzen:

Das ergibt folgendes Bild im Browser:

Ihr seht, das die grüne Box die 200px von links und 50px von oben ausgehend von ihrem alten Standpunkt aus gemessen hat, einen Zaun um den alten Platz gelegt hat, damit während ihrer Abwesenheit keine andere Box dahin kann und dann erst an ihren neuen Platz marschiert ist.

Mit position:relative; könnt ihr die Reihenfolge auf der z-Achse verändern. Infos dazu bietet dieser Artikel.

Absolut positionierte Boxen orientieren sich bei Positionsangaben an ihren relativ positionierten Vorfahren und nicht mehr an body.

Außerdem kann man öfter mal Darstellungsfehler im Internet Explorer beseitigen, wenn man die entsprechende Box relativ positioniert.

Manchmal wird allerdings durch relative Positionierung einer Box erst ein Darstellungsfehler im IE ausgelöst.

Das heißt in jedem Fall, das sorgfältiges Testen vonnöten ist, wenn man relativ positioniert.

Meist einigt man sich auf drei Styles.Das beugt optischem Wildwuchs vor und soll gleichzeitig vor Degenerierung wegen unzureichender Artenvielfalt schützen.

Der Klassiker schlechthin, hier noch unbestückt.

Ist am häufigsten anzutreffen. Eignet sich hervorragend um zu langen, paßgenau ausgerichteten Reihen angeordnet zu werden.

Das Modell mit seitlicher Öffnungsmöglichkeit.

Tritt besonders häufig als Freßbude auf.

Das freistehende Modell.

Hat Öffnungen nach allen Seiten und wird an besonderen Stellen plaziert, um der langweiligen Uniformität der aufgereihten Buden einen kreativen Kontrapunkt entgegenzusetzen.

Eine schöne Reihe, sauber ausgerichtet.

Manchmal auch mit romantischem Einschub.

Das Angebot ist groß und oft putzig.

Manchmal erschlägt es einen geradezu.

Oder man sieht den Baum vor lauter …äh…., Wäldern nicht.

Der nackte Baum, ganz ohne Firlefanz.

Die Wurst, unter einem halben Meter kaum noch zu bekommen.

Endlich mal was besonderes. Hier gibts Sengzelten.

Eine Sengzelte. Die niederbayerische Pizza

Pizza gibt es erst ca. seit der Mitte des 18. Jahrhunderts. Sengzelten hat’s glaub ich schon immer gegeben

Im 18. Jahrhundert kamen große Mengen von italienischen Baumeistern und Arbeitern nach Bayern, um diverse Kirchen,- und Domprojekte in Angriff zu nehmen.

Da liegt die Vermutung nahe, das den freundlichen Niederbayern das Rezept entwendet wurde. Damit es nicht gleich so auffiel hat man a weng am Rezept rumgeschraubt und das Ganze dann Pizza genannt.

Wenn es um Erklärungen geht, wo man anhand einer Beispieldatei sofort mit basteln kann wird die Luft schon ziemlich dünn.

Deshalb sorge ich mit dem folgenden Tutorial dafür, dass die Luft in dem Bereich a weng dicker wird.

Legen wir direkt los:

Hier findest du die position-absolute-anfang.htm zum Quelltext rauskopieren.

Im Browser schaut es so aus:

Drei farbige Boxen in einer hellgrauen Box untereinander. Alles ist im normalen Textfluß. Für alle gilt position:static;. Das ist die Standardeinstellung (default-Einstellung) der Browser, die immer dann zum Tragen kommt, wenn man nix gemacht hat.

Das position:static; wird vom Browser praktisch unsichtbar eingefügt, ohne das er uns bescheid sagt.

Jetzt wollen wir den Textfluß mal durcheinanderwirbeln indem wir ein Element positionieren und damit die Standardeinstellung der Browser überschreiben.

Bitte CSS ergänzen:

Im Browser schaut es so aus:

Umpff! Die rote Box ist weg.

Egal, wir haben die Möglichkeit für die Positionierung Werte zu vergeben.

Bitte CSS ergänzen:

Das ergibt folgendes Bild im Browser:

Aha, die rote Box hat sich also nur hinter der grünen versteckt. Allerdings springt die grüne Box nach ganz oben links ins Browserfenster, wenn wir als Wert für die Positionierung jeweils null eintragen.

Das heißt erst mal, das sich die absolut positionierte Box an body orientiert wenn man Werte für top und left eingibt.

Die nächste Erkenntnis die sich uns aufdrängt ist die, dass die absolute Box von den anderen Boxen ignoriert wird. Die anderen Boxen tun so als wäre die absolute Box nicht vorhanden.

Also sind absolut positionierte Elemente komplett aus dem normalen Textfluß raus.

Wenn sich die absolute Box immer an body orientiert ist das doch ganz schön nervig, weil man immer erst die richtigen Werte ausbaldowern muss, um eine Darstellung an der gewünschten Stelle zu erreichen.

Das geht einfacher:

Bitte CSS ergänzen:

Das ergibt folgendes Bild im Browser:

Wenn der umgebende Container (#wrapper) position:relative; bekommt orientiert sich die absolute Box daran und nicht mehr an body.

Zu beachten ist dabei, dass die relative Box HasLayout für den IE 6 u. 7 bekommen sollte, da es passieren kann, dass die Positionsangaben sonst evtl. nicht richtig ausgeführt werden.

Für Anfänger ist das durchaus verführerisch alle Elemente mit position:absolute; festzutackern, um so die gewünschte Darstellung zu erhalten.

Okay, dann nehmt mal position:relative; weg und setzt die Werte für top/left auf null. Danach verkleinert ihr mal das Browserfenster stark.

Ihr seht dann hoffentlich was ich meine.

position:absolute; sollte man mit Bedacht einsetzen, denn damit ändert ihr wie gesehen auch die Stapelreihenfolge auf der z-Achse, d.h. zu euch hin oder von euch weg.

Wenn ihr an weiteren Infos über Stapelung interessiert seid könnte dieser Artikel von mir noch in Frage kommen.

Was gibts noch zu sagen?

Es kann vorkommen das absolut positionierte Boxen Im IE 6 u. 7 nicht angezeigt werden, wenn sie im Quelltext unmittelbar neben einem Float liegen.

Abhilfe schafft entweder ein leeres divzwischen dem Float und der absoluten Box in den Quelltext zu schreiben, oder entweder den Float oder die absolute Box in ein div zu wickeln. Entscheidend dabei ist die unmittelbare Nachbarschaft von Float und absoluter Box aufzulösen.

Erhellendes dazu findet ihr in dieser Untersuchung von Bruno Fassini.

Zur relativen Positionierung gibt es mittlerweile schon einen Artikel.

Die fixierte Positionierung habe ich auch nicht vergessen.