html Text an bestimmter Postition in image anzeigen

Gast #5766248
Lesenswert?
• ▲
▼
Hi

Ich baue zur Zeit an einer Webseite herum. Auf der Seite wird u.A. ein 
img angezeigt. In diesem Bild befindet sich ein Feld, in dem ein Text 
agezeigt werden soll.

Wie definiere ich in html dass ein Text mit bestimmten, in Relation zum 
img Koordinaten angezeigt werden soll?
Gast #5766504
Lesenswert?
• ▲
▼
vielen Dank, das hat mich schon mal weiter gebracht.

Ich habe 2 Bilder, das eine wird am linken Rand angezeigt, bei diesem 
stimmt auch der Text überein.
Beim anderen, das am rechten Rand angezeigt wird, verschiebt sich der 
Text je nachdem wie breit das Fenster ist. WIe bekomme ich auch dies in 
den Griff?
Die Fensterbreite muss variabel bleiben, damit die Seite auch auf 
Mobilgeräten richtig angeziegt wird



.image_left {
  position: absolute;
  left: 10px;
}

.text_image_left {
  position: relative;
  color:white;
  top: 63px;
  left: 25px;
}

.image_right {
  position: absolute;
  right: 10px;

}
.text_image_right {
  position: relative;
  color:white;
  top: 63px;
  left: 100px;
}
#5766550
Lesenswert?
• ▲
▼
Klaus Gartner schrieb:
> Ich baue zur Zeit an einer Webseite herum. Auf der Seite wird u.A. ein
> img angezeigt. In diesem Bild befindet sich ein Feld, in dem ein Text
> agezeigt werden soll.
>
> Wie definiere ich in html dass ein Text mit bestimmten, in Relation zum
> img Koordinaten angezeigt werden soll?

warum so kompliziert mit img und text?
mach ein div, das bild als background und den text in span/div als child 
node.
das innere div dann entweder über position oder mit margin 
positionieren.

Antwort schreiben

Hinweis: der ursprüngliche Beitrag ist mehr als 6 Monate alt. Bitte hier nur auf die ursprüngliche Frage antworten, für neue Fragen einen neuen Beitrag erstellen.

Formatierung
  • [c]C-Code[/c]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] – Link zu einem Artikel
  • Verweis auf einen anderen Beitrag: Rechtsklick auf dessen Beitrags-ID (#8078628), „Adresse kopieren“, in den Text einfügen

Mehr zur Formatierung

Längeren Sourcecode als Anhang, nicht in den Text. JPG nur für Fotos und Scans; Zeichnungen und Screenshots als PNG oder GIF. Siehe Bildformate.

Schon registriert? Anmelden

Wird nicht angezeigt. Wir schicken dir einen Link; sobald du damit bestätigst, erscheint dein Beitrag.

Mit dem Abschicken legst du einen kostenlosen Account an und erkennst die Nutzungsbedingungen und die Datenschutzerklärung an.