Lineman: Wenn man schon Text *über* einem Bild haben will, so kann man ziemlich sicher davon ausgehen, dass das Bild nur zierde ist. Und all diese Grafiken gehören nicht in <img> Tags! Die braucht man weder auszudrucken noch nem Textbrowser oder Screenreader vorlegen.

__________________
Bitte keine PN's - schreibt mir ne anständige Mail oder sprecht mich über Msn / Icq an
Milian Wolff | Markdownify | Typogridder

Du sprichst von Skalierbarkeit und empfiehlst position: absolute; für ein Element, das Text enthält? Denk nächstes Mal bitte etwas nach, bevor Du hier "so ein quatsch" in den Raum wirfst und Dich mit Deiner weiteren Aussage als vorlauter Anfänger outest.

Von Skalierbarkeit stand zwar nichts im OP, aber wenn es dennoch möglich sein soll, nimmt man img (mit Alt-Text) und Text in a, stellt a und img als Block dar und gibt img negativen margin-bottom (ggf. durch positiven margin-bottom für a wieder ausgleichen). Ein Selbstgänger ist diese Lösung jedoch nicht, d.h. je nach Kontext sind ggf. weitere Anpassungen nötig.

Alternative mit Zusatz-Markup: Man setzt nur das Bild absolut, setzt den Text in span oder strong o.ä., stellt dieses als Block dar und gibt ihm position: relative; und ggf. z-index, sowie min-height bzw. height für IE 5/6 (entsprechend der Bildhöhe); letzteres kann stattdessen auch a bekommen. Alternative ohne Skalierbarkeit, aber auch ohne Zusatz-Markup: img mit Alt-Text, das man per CSS verschwinden und stattdessen als Hintergrundbild erscheinen läßt.

Wenn das Bild nun aber - wie bereits mehrfach angesprochen - eh keine inhaltliche Relevanz hat, macht man es so wie in meinem ersten Posting beschrieben.

heiko_rs: reiß dich mal zusammen. ob negatives margin-bottom oder position absolute ist doch gehupft wie gesprungen! Ein "vorlauter Anfänger" muss er dadurch ja nicht sein - auch wenn seine Aussage irgendwo Murks ist.

__________________
Bitte keine PN's - schreibt mir ne anständige Mail oder sprecht mich über Msn / Icq an
Milian Wolff | Markdownify | Typogridder

also ich werd jetzt bestimmt nicht zurück rudern, sondern es gibt durchaus fälle in denen meine angesprochene lösung durchaus sinn macht... (davon ab ist sie extrem einfach umzusetzen -> ohne z-index) z.B. wenn man mit cms systemen arbeitet. wenn bilder und text eben nicht im css/html und beim handgedängel zu setzen sind. lösungen die workarounds erfordern, von denen du hier gerade auch einige genannt hast. aber selbige sind eben nicht immer machbar. und ein einfacher workaround für ein image, welches eine bedeutung hat und eben eine andere als der text der darüber steht gibt es in verschiedensten designs zu hauf... du scheinst ein gegner von position:absolute zu sein... Aber nur weil Du damit nicht umgehen kannst hat diese style-anweisung durchaus seine daseinsberechtigung!

meine angesprochene lösung funktioniert in allen browsern und die reihenfolge des markups als auch die auszeichnungen sind genau die, die es braucht um einen vernünftigen und barrierenfreien code abzuliefern. davon ab hast du eine ganz ähnliche (position:abolute, position:relative, z-index -> was aber nicht immer so funktioniert, wie ich es manchmal brauche) selbst angesprochen und ja es ist eben EINE Lösung... Und ich habe auch gesagt, wenn das Bild lediglich eine Schmuckgrafik ist, dann doch bitte als Hintergrundbild, ausser man muss mit einem CMS arbeiten, welches keine dynamischen styles schreiben kann (falls dieses bild redaktionell austauschbar sein soll)... aber ich glaube darum geht es in diesem forum grundsätzlich selten (was auch ok ist)...

wenn du mein posting gelesen hättest, dann hättest du gemerkt, dass ich nie von einem element geredet habe, welches text enthält... sondern einem bild AUF dem text steht, das aber selber eine andere aussage hat! das ist ein kleiner aber feiner unterschied. und letztlich gibt es browser die mit position:relative teilweise nicht zurecht kommen (netscape 6)... man aber diese browser trotzdem bedienen muss. (vielleicht nicht in diesem fall)...

bei css geht es doch nicht darum sich möglichst verworrene lösungen mit raus und wieder reinschieben auszudeneknen sondern den kompatibelsten weg zu gehen und dabei im markup der html-seite sauber zu bleiben. aber deine aussagen sind doch reichlich selbstgefällig... (bist du ein css-guru?) und man sollte doch aufpassen andere zu beleidigen, wenn man einfach nicht versteht, was sie meinten und eine hilfestellung des anderen als unnötig da stehen lässt (obwohl es funktioniert)... bitte denke du erstmal nach bevor du etwas schreibst. schließlich hast du angefangen:

kleine anmerkung zur zweiten aussage... ich habe im unteren beispiel ein p um das a weil ich text-browser nicht ignoriere... und nicht möchte, dass der link direkt hinter dem alt-text steht... und ja.. ich bediene auch netscape6 (wenn ich muss)

Kleines Beispiel gefällig (Es gibt Kunden die sowas wollen.. ja auch mit opacity und redaktionell pflegbar, skalierbar und richtige bilder mit richtigen alt-tags):

Position:Absolute

__________________
Mein Bug, Dein Bug, Bugs sind für uns alle da...

Natürlich ist Text enthalten, lies das OP. Wenn Du das komplette Konstrukt absolut positionierst, wird es für sich funktionieren (nichts leichter als das), aber nicht in normalem Kontext, da sich die übrigen Elemente nicht an seine Skalierung anpassen werden (von der übrigens - ich sage es nochmal - im OP nicht die Rede ist).

Das hat auch nichts mit "nicht damit umgehen können" zu tun, sondern mit den klaren Nachteilen absoluter Positionierung. Dennoch habe ich auch eine Lösung mit position: absolute; genannt, allerdings ist diese komplett skalierbar, d.h. auch alle übrigen Elemente passen sich an, da das umgebende Element nicht absolut positioniert ist.

Nach diesem Prinzip funktioniert übrigens auch das Beispiel auf dem von Dir geposteten Link (dessen Prinzip meinem genannten Vorschlag entspricht): Das umgebende Element ist nicht absolut positioniert. Abgesehen davon ist das Markup des Beispiels allerdings ziemlich übel und nicht besonders schlau: wozu ein leeres span (das sich darüberhinaus nicht anpaßt, wenn mal mehr Text enthalten ist), wenn gleichzeitig das den Text enthaltende p ungenutzt bleibt?

Abschließend noch etwas allgemeines: Wenn Du jemandem "so ein quatsch" an den Kopf wirfst, darfst anschließend nicht rumjammern, daß seine Antwort Dich "beleidigt" hätte. Damit mußt Du rechnen.

Wie auch immer, für eine weitere Diskussion mit Dir ist mir meine Zeit zu schade.

Wenn mir jemand "so ein quatsch" an den Kopf wirft, und dann eine Aussage folgen läßt, die auch Du als Murks bezeichnest, reiße ich mich nicht zusammen.

Nein, da bei letzterer Lösung die Elemente ihren Bezug zueinander verlieren, bei ersterer dagegen nicht: Bei negativem margin passen sich die folgenden Elemente einer Vergrößerung des verschobenen Elementes ganz normal an, bei einem absolut positioniertem Element dagegen nicht.

Das ist bei einer Grafik ja auch kein Problem (da ihre Höhe bekannt ist), bei Text dagegen schon, daher mein Vorschlag, den Text nicht absolut zu positionieren, sondern allenfalls per margin zu verschieben - auch wenn ich hier ein absolut positioniertes img (aber eben nicht absolut positionierten Text) vorziehen würde, wie in meinem weiteren Beispiel genannt.

natürlich muss dann z.B. um ein solches Element noch ein position:relative... es wäre auch dieses überflüssige div notwendig, welches um das bild und den text gelegt werden muss, um es in einer webseite vernünftig zu positionieren... z.B. per float... was glaubst du wovon ich rede? dieses beispiel sollte nur zeigen, dass position:absolute recht sinnvoll sein kann, wenn man eben text auf ein bild legt... Auch ist klar, das bei einem absolut positionierten Element die Textlänge (Anzahl der Worte) nicht beliebig ist... wie auch immer.

ok, stimmt... es war etwas OffTopic und hatte mit dem eigentlichen beispiel nur indirekt etwas zu tun... (wobei die technik auch bei diesem beispiel angewand werden kann, auch wenn ich es bei einem logo grundsätzlich anders machen würde). Aber Murks ist mein Vorschlag nicht...

ich glaube wir haben hier einfach aneiander vorbei geredet (oder ich eben an euch)...

__________________
Mein Bug, Dein Bug, Bugs sind für uns alle da...

Hallo,
Wenn ich dein Problem richtig verstanden habe , habe ich das selbe Problem.
Meine Notloesung kannst du weiter unten sehen.
Bin aber selbst nicht sehr zufrieden damit. z.B. ist der Text nicht zentriert.(text-align: center funktioniert nicht)

Also hier ein Auszug aus meinem Websitecode.
die Seite ist IcCT Intercultural Consulting and Trading Ltd.**-* China, Deutschland Germany ...*.

Du kannst sehen, dass ich nicht viel Ahnung von css/xhtml habe.
Und Du wirst warscheinlich "Pruegel" von den Stilisten bekommen, wenn du so vorgehst.
Aber von den Profis konnte mir auch keiner eine bessere Loesung anbieten.

Bitte schick ne mail an mich wenn Du eine Loesung gefunden hast.


mfG.
Dirk

PS
Falls meine Antwort etwas hilfreich war schau doch bitte mal kurz
Problem an.
Wie bekomme ich die Zwischenraeume zwischen den Tabellenfeldern weg.
Im Internetexplorer und Firefox.
Sollte xhtml strict bleiben.

Bei sowas sollte man eigentlich keinen CSS-Vorschlag machen, sondern lieber anmerken, daß der HTML-Code, äh ja, unschön ist.

Irgendwie ist das Board doch nicht mehr ganz das, was es mal war.