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?
Zum Beispiel indem du beides in ein div tust und dann position:absolute setzt, und dann top: und left: für den Text.
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; }
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/
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.
Bitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.