textblock über ein jpg legen ?

[webwebweb]

hallo!

ich versuche einen text (der auch noch overflow hat) über ein jpg zu legen.
das bild wird mit align=center zentriert und der text muss natürlich immer genau drauf liegen, also die gleiche position haben.

ich schaff das einfach nich und im forum hab ich auch nichts gefunden!

wäre sehr nett wenn mir da jamand von euch cracks helfen könnte :-)

lieber gruss
sven

[Jens(L)]

hallo!

ich versuche einen text (der auch noch overflow hat) über ein jpg zu legen.
das bild wird mit align=center zentriert und der text muss natürlich immer genau drauf liegen, also die gleiche position haben.

ich schaff das einfach nich und im forum hab ich auch nichts gefunden!

wäre sehr nett wenn mir da jamand von euch cracks helfen könnte :-)

lieber gruss
sven

Mahlzeit,

Ich hoffe jetzt einfach mal, dass ich Dich richtig verstanden habe ;-) Du möchtest Ein JPG Bild hinter einen Text formatieren... (Berichtige mich, wenn das falsch sein sollte!!!)

Ich hab mal ein wenig gestöbert und bin nach kurzer Suche auf folgenden Link aufmerksam geworden: <http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_attachment@title=Versuch das mal damit>

Ansonsten würde mir nur noch einfallen, dass man das evtl als <div> mit eigenen Styles definieren könnte, aber da wäre das genauso ein background. Also einfach mal im selfhtml nach "background" oder Hintergrund-Bilder schauen ;-)

Hoffe, dass ich helfen konnte!

LG aus NRW
Jens

[webwebweb]

hallo,

vielen dank für die antworten! mit z-index habe ich es geschafft.

jetzt habe ich aber foglendes problem: der text der über dem bild liegt wird nicht mit verschoben, wenn das fenster kleiner oder größer wird. das bild verschiebt sich super, durch align-center und top=30%. die textblöcke müssen das aber nun auch tun, wie geht das?

lieber gruss
sven

[Auge]

Hallo

... mit z-index habe ich es geschafft.

... der text der über dem bild liegt wird nicht mit verschoben, wenn das fenster kleiner oder größer wird. das bild verschiebt sich super, durch align-center und top=30%. die textblöcke müssen das aber nun auch tun, wie geht das?

Genauso wie mit dem Bild? Du kannst auch Blockelemente zentrieren und ihnen Positionsangaben mitgeben.

Oder viel einfacher, du folgst den zahlreicheren Empfehlungen mit dem Hintergrundbild. Wie Thomas Luethi schrieb: "... position:absolute und z-index ... Aber das ist IMHO komplizierter und heikler.".

sven

Tschö, Auge

[Bademeister]

jetzt habe ich aber foglendes problem: der text der über dem bild liegt wird nicht mit verschoben, wenn das fenster kleiner oder größer wird. das bild verschiebt sich super, durch align-center und top=30%. die textblöcke müssen das aber nun auch tun, wie geht das?

Ich wuerde vorschlagen, dass Du nicht das Bild als <img> anzeigst, sondern ein <div> (oder <span>, falls das Bild in-line sein soll) gleicher Groesse machst, das das Bild als Hintergrundbild und den Text als Inhalt hat.

Viele Gruesse
der Bademeister

[suit]

Ich wuerde vorschlagen, dass Du nicht das Bild als <img> anzeigst, sondern ein <div> (oder <span>, falls das Bild in-line sein soll) gleicher Groesse machst, das das Bild als Hintergrundbild und den Text als Inhalt hat.

wenn das bild aber zum inhalt gehört, ist das informationsvernichtung

[Auge]

Hallo

Ich wuerde vorschlagen, dass Du nicht das Bild als <img> anzeigst, sondern ein <div> (oder <span>, falls das Bild in-line sein soll) gleicher Groesse machst, das das Bild als Hintergrundbild und den Text als Inhalt hat.

wenn das bild aber zum inhalt gehört, ist das informationsvernichtung

Aber _nur_ in diesem Fall. Warum sollte man aber das Bild, das Informationen transportiert, mit Text überdecken? Der Beschreibung nach geht es offensichtlich[1] _nicht_ um eine Beschriftung eines Diagramms oder ähnliches, sondern um einen (oder mehrere) Textblock/-blöcke vor/über einem Bild. Im ersten Fall gehörte (in einem Pixelbild) die Beschriftung direkt mit in's Bild hinein der zweite Fall schreit nach einem Hintergrundbild.

Wenn es wider Erwarten doch um einen gänzlich anderen Anwendungsfall gehen sollte, wäre eine Konkretisierung der Anforderungen sehr hilfreich.

[1] Das ist zumindest das, was ich aus der Beschreibung schließe, somit letzten Endes doch spekulativ. ;-)

Tschö, Auge

[suit]

[1] Das ist zumindest das, was ich aus der Beschreibung schließe, somit letzten Endes doch spekulativ. ;-)

ja - alles spekulativ, meine glaskugel sagt folgendes [1]:

+---------------------+
|                     |
|                     |
|                     |
|                     |
|                     |
|                     |
+---------------------+
|/////////////////////|
|/////////////////////|
+---------------------+

der ///-teil ist der text der mit halbtransparentem hintergrund über dem bild liegt und als beschriftung dieses bildes dient

[1] möglicherweise ist das drecksding aber schon wieder kaputt

[Auge]

Hallo

[1] Das ist zumindest das, was ich aus der Beschreibung schließe, somit letzten Endes doch spekulativ. ;-)

ja - alles spekulativ, meine glaskugel sagt folgendes [1]:
...
[1] möglicherweise ist das drecksding aber schon wieder kaputt

Naja, die Dinger werden ja (nicht nur hier) auch ganz schön gefordert. Angeblich soll ja Kristall widerstandsfähiger sein, wer weiß. ... Vielleicht sollte man upgraden.

Tschö, Auge

[Thomas Luethi]

Hallo,

ich versuche einen text (der auch noch overflow hat) über ein jpg zu legen.
das bild wird mit align=center zentriert und der text muss natürlich immer genau drauf liegen, also die gleiche position haben.

Was spricht dagegen, das Bild per CSS als Hintergrundbild einzubinden?
Das wäre vermutlich die einfachste Lösung.

Ansonsten gibt es noch position:absolute und z-index, um Dinge
"in mehreren Ebenen übereinander" an der gleichen Stelle
auf dem Bildschirm zu plazieren.
Aber das ist IMHO komplizierter und heikler.

HTH, mfg
Thomas

[Bademeister]

Hi,
wenn der Text logisch unmittelbar mit dem Bild zu tun hat und exakt an einer bestimmten Stelle im Bild stehen soll, dann kannst Du ihn auch grafisch in das Bild einfuegen (mit der GD-Erweiterung von PHP).

Du koenntest mit einem kleinen PHP-Script

das Bild dynamisch laden,
  -> imagecreatefromjpeg()

den Text in das Bild einfuegen,
  -> imagettftext()

und das Resultat als Bild ausgeben.
  -> imagejpeg()

Um eine exakte Positionierung des Textes zu erzeugen, ist das vielleicht das eleganteste. Schau z. B. mal unter http://uk.php.net/manual/de/book.image.php

Viele Gruesse,
der Bademeister

[Auge]

Hallo

wenn der Text logisch unmittelbar mit dem Bild zu tun hat und exakt an einer bestimmten Stelle im Bild stehen soll, dann kannst Du ihn auch grafisch in das Bild einfuegen (mit der GD-Erweiterung von PHP).

... womit der Text für viele verloren wäre. Dazu zählen Benutzer von nicht grafikfähigen Clients, Blinde, Suchmaschinenroboter, Benutzer, die der verwendeten Sprache nicht mächtig sind (die könnten ja sonst den Text kopieren und z.B. bei Google übersetzen lassen).

Tschö, Auge

[Bademeister]

... womit der Text für viele verloren wäre. Dazu zählen Benutzer von nicht grafikfähigen Clients, Blinde, Suchmaschinenroboter, Benutzer, die der verwendeten Sprache nicht mächtig sind (die könnten ja sonst den Text kopieren und z.B. bei Google übersetzen lassen).

Das stimmt teilweise. Eventuelle Suchamschinenroboter koennte man ohne weiteres zusaetzlich mit dem Text fuettern auf viele andere Weisen (z.B. das "alt"-Attribut des Bildes entsprechen setzen).
Es kommt natuerlich wie so oft auf den Zweck der ganzen Geschichte an. Wenn es einen Sinn hat, den Text ggf. auch ohne das Bild anzuzeugen, ist der grafische Weg der falsche.

Gruss an alle
der Bedemeister