✔ Bilder über Textarea ausrichten..

Status
Nicht offen für weitere Antworten.
G

Geflügel

Erfahrenes Mitglied
Guten Morgen!

Ich habe eine Textarea mit den Maßen 100 * 200 Pixeln.
Diese hat die id "demo":
Code: 
<textarea id="demo"></textarea>

Jetzt soll über der Textarea (neue Ebene):
1. an der oberen linken Ecke der Textarea ein Bild angezeigt werden.
2. an der unteren linken Ecke der Textarea ein Bild angezeigt werden.

Wichtig ist, dass bei der Ausrichtung der 2 Grafiken nicht bekannt ist, wo sich Textarea nun genau befindet, das bedeutet, dass ich nicht über die absoluten X/Y Koordinaten der Textarea verfüge.

Ich hoffe ihr könnt mir helfen. Bin langsam am verzweifeln hier. :confused:
Danke
 
Dieses Vorhaben lässt sich mit negativen margin-Werten für die beiden Grafiken realisieren. Zudem wird die CSS-Eigenschaft position:relative benötigt, um für die Grafiken eine höhere Schichtposition z-index bestimmen zu können.

In diesem Beispiel sind die Grafiken 10 Pixel hoch:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
form, textarea
{
margin: 0;
padding: 0;
}

textarea#demo
{
width: 100px;
height: 200px;
}

img#top, img#bottom
{
position: relative;
z-index: 2;
height: 10px;
display: block;
}

img#top
{
margin-bottom: -10px;
}

img#bottom
{
margin-top: -10px;
}
-->
</style>

</head>
<body>

<img src="[Grafik-URI]" id="top">
<form>
      <textarea id="demo"></textarea>
</form>
<img src="[Grafik-URI]" id="bottom">


</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück