Unmögliche div-Reihenfolge, wenn float benötigt wird

[Thiemo]

Ich habe eine Aufgabe, von der ich inzwischen denke, dass sie unmöglich ist. Ausgangspunkt ist ein Design mit einer floatenden Box rechts. Der Fließtext fließt um diese Box herum, nimmt also nach dem Ende der Box wieder die volle Breite ein. Das ist so gewollt.

Hier zur Veranschaulichung:
http://maettig.com/code/css/accessible-infobox.html

Jetzt will ich die Reihenfolge der div-Container so optimieren, dass der erste Absatz des Fließtextes im HTML-Quelltext vorn steht, vor der floatenden Box. Das hat entscheidende Vorteile beim Vorlesen durch Screenreader.

Ich habe viel versucht: Negative Margins, absolute Positionierung. Ich denke inzwischen wie gesagt, dass mein Wunsch unmöglich ist.

[Steel]

Hi!

Wenn ich dich richtig verstehe fliesst der Text links an der Box vorbei, ja?

Nun moechtest Du aber das der erste Absatz des Textes im Dokument noch vor der floatenden Box kommt, hast baer das Problem das ein float sich immer auf die nachfolgenden elemente bezieht. Das seh ich doch richtig?

Meine Frage: Warum setzt du dann den ersten Absatz nicht mit einem float:left vor die Box? Was passiert dann?

[Christoph Schnauß]

hallo Steel,

Das seh ich doch richtig?

Nicht wirklich. Schau dir den Code seiner Seite nochmal genau an.

Grüße aus Berlin

Christoph S.

[Thiemo]

Nun moechtest Du aber das der erste Absatz des Textes im Dokument noch vor der floatenden Box kommt, hast baer das Problem das ein float sich immer auf die nachfolgenden elemente bezieht. Das seh ich doch richtig?

Ja, völlig korrekt.

Ich habe mein Beispiel (http://maettig.com/code/css/accessible-infobox.html) einmal stark erweitert und meine beiden bisherigen, misslungenen Versuche mit float: left; und position: absolute; dargestellt.

Ich wäre für jeden Hinweis dankbar, egal welchen zusätzlichen HTML- oder CSS-Code er erfordert.

[Christoph Schnauß]

hallo,

Jetzt will ich die Reihenfolge der div-Container so optimieren, dass der erste Absatz des Fließtextes im HTML-Quelltext vorn steht, vor der floatenden Box.

Dann mach das doch mal, und gib ihm auch noch ein paar CSS-Formatierungen. Bisher ist, so weit ich sehen kann, nur

#introduction{  
}

angegeben. Daß das zuwenig und auch wenig nützlich ist, siehst du ja selber sofort.

Das hat entscheidende Vorteile beim Vorlesen durch Screenreader.

Interessanter Hinweis. Ich würde (wegen "Barrierefreiheit") liebend gern häufiger auf Screenreader Rücksicht nehmen, aber da ich keinen habe, weiß ich einfach nicht, wie das geschehen sollte.

Im übrigen: wenn du dir auch nur die Unterschiede der Darstellung deiner jetzigen Fassung in IE und Firefox anschaust (und andere Browser außer acht läßt) dürfte dir noch weit mehr auffallen.

Grüße aus Berlin

Christoph S.

[Gunnar Bittersmann]

Hello out there!

Interessanter Hinweis. Ich würde (wegen "Barrierefreiheit") liebend gern häufiger auf Screenreader Rücksicht nehmen, aber da ich keinen habe, weiß ich einfach nicht, wie das geschehen sollte.

Das Abschalten des Autorenstylesheets (Firefox: Ansicht > Webseiten-Stil > kein Stil) sollte eine Vorstellung vermitteln, was ein Screenreader vorlesen könnte.

See ya up the road,
Gunnar