mikrocontroller.net

Forum: PC-Programmierung html Text an bestimmter Postition in image anzeigen


Autor: Klaus Gartner (Gast)
Datum:

Bewertung
0 lesenswert
nicht 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?

Autor: Sven B. (scummos)
Datum:

Bewertung
0 lesenswert
nicht lesenswert
Zum Beispiel indem du beides in ein div tust und dann position:absolute 
setzt, und dann top: und left: für den Text.

Autor: Klaus Gartner (Gast)
Datum:

Bewertung
0 lesenswert
nicht 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;
}

Autor: DPA (Gast)
Datum:

Bewertung
0 lesenswert
nicht lesenswert
Ersetze mal die position: relative; durch position: absolute;. position: 
absolute; ist immer vom ersten parent element aus, welches ein position 
attribut hat, ausser es ist position: static. 
https://jsfiddle.net/rqyks5b6/

Autor: Daniel F. (df311)
Datum:

Bewertung
1 lesenswert
nicht 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

Die Angabe einer E-Mail-Adresse ist freiwillig. Wenn Sie automatisch per E-Mail über Antworten auf Ihren Beitrag informiert werden möchten, melden Sie sich bitte an.

Wichtige Regeln - erst lesen, dann posten!

  • Groß- und Kleinschreibung verwenden
  • Längeren Sourcecode nicht im Text einfügen, sondern als Dateianhang

Formatierung (mehr Informationen...)

  • [c]C-Code[/c]
  • [avrasm]AVR-Assembler-Code[/avrasm]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] - Link zu Artikel
  • Verweis auf anderen Beitrag einfügen: Rechtsklick auf Beitragstitel,
    "Adresse kopieren", und in den Text einfügen




Bild automatisch verkleinern, falls nötig
Bitte das JPG-Format nur für Fotos und Scans verwenden!
Zeichnungen und Screenshots im PNG- oder
GIF-Format hochladen. Siehe Bildformate.

Mit dem Abschicken bestätigst du, die Nutzungsbedingungen anzuerkennen.