nicht angemeldet
Text auf Bild positionieren
Hallo!
Weiss jemand, wie man einen Text fest über ein Bild positionieren kann ohne dass sich der Text beim Verkleinern des Browserfensters verschiebt? Ich habe das so gemacht, um versch. BildschirmAuflösungen zu berücksichtigen aber irgendwie bleibt der Text nicht fest auf dem Bild wenn man das Fenster testweise verkleintert oder in einer anderen Auflösung betrachtet. Das Bild an sich befindet sich in einer Tabellenzelle, der Text soll mittig auf dem Bild positioniert werden:
<td>
<div align="center">
<img border="0" height="22" src="bild.gif">
<script language="Javascript">
if (screen.width == 1024)
document.write("<div style='position:absolute; top:10px;left:100px;'>Text</div>");
else if (screen.width == 1152) .... usw
</script>
</div>
</td>
mit position:relative macht er unter dem Bild eine leerzeile und schreibt den Text darein! Warum auch immer!
Ich habs auch schon mit background-image versucht aber dann wird das Hintergrundbild verkleinert. min-height bringt nichts. Die Höhe soll fest sein, aber die Breite je nach Textlänge variieren. Habe die CSS-position-Seiten hier bei selfhtml hoch und runter-ausprobiert aber die positionierung will nich klappen. Auch als TD-Hintergund hab ichs ausprobiert. Das bild wird immer verkleinert.
Vielleicht kennt jemand das Problem oder ich seh den Wald vor lauter Bäumen nich mehr..
Danke für jede Hilfe!!!
Rondra
-
Hallo,
Weiss jemand, wie man einen Text fest über ein Bild positionieren kann ohne dass sich der Text beim Verkleinern des Browserfensters verschiebt?
Ganz ohne JavaScript:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>[Titel]</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<h1>Ein Bild mit Text drauf, horizontal in der Mitte des Bildschirms</h1>
<div style="position:relative; width:200px; height:200px; margin:auto;">
<img src="STONES.JPG" alt="Steine" title="rollende Steine" style="position:absolute; top:0; left:0; width:100%; height:100%;">
<!--Der nachfolgende Text wird im umgebenden DIV positioniert. Da die linke obere Ecke des Bildes genau mit der linken oberen Ecke des DIV-Elements übereinstimmt, entspricht die Position des Textes (top:45px; left:30px;) auch der Position top:45px; left:30px; auf dem Bild-->
<div style="position:absolute; top:45px; left:30px; width:100px;">Ein Text auf dem Bild</div>
</div>
<p>Hier gehts weiter ...</p>
</body>
</html>viele Grüße
Axel
-
WOW !!
DANKE Axel, das hat mir SEHR geholfen!!!!!!! *FREU*liebe Grüsse
Rondra
-