Hilfe - Bekomme Textblock nicht in die Mitte eines Bildes

Funwave

Hallo Team & Community,

nachdem ich nun fast 2 Tage Google zum glühen brachte, die Seiten hier und ähnliche durchsucht habe, mus ich mit meinen minimalen Kenntnissen aufgeben.

**Die Aufgabenstellung ist:**

- beim anklicken eines html-links (http://meinehtml.html) soll direkt ein Popup aufgehen (evtl. mit Verzögerung wg. Blocker)

- dieses Popup soll 650x580px groß sein und mittig auf dem Monitor aufploppen.

- Hintergrundbild soll ein Eisbaerbild sein

- in dieses Bild widerum soll ein Text-Eingabe-Block h/v-mittig rein

- dieser Block muss verbreitert werden vom orginal Block/Maß

[Blockierte Grafik: http://i1192.photobucket.com/albums/aa328/funwave1/Baerli/textfeld1.png]

- beide Komponenten sollen am Ende bei klicken der html aufploppen und das Eingabefeld anzeigen, was so aussehen sollte:

[Blockierte Grafik: http://i1192.photobucket.com/albums/aa328/funwave1/Baerli/eisbaer%20textfeld.png]

**Hier mal mein Code:**
http://baerli.eu5.org/baerli/wunschbox%20css%20test.html

Ich hatte den Textblock mal kurzfristig sogar im Bild drinnen, allerdings oben links im Eck, aber nun ist das auch weg und liegt nun irgendwie daneben:

[Blockierte Grafik: http://i1192.photobucket.com/albums/aa328/funwave1/Baerli/text%20eisbaer%20leere%20seite.png]

Ich hoffe, das die Profis mir hier kurzfristig helfen können, da wir das sehr gern bei unserem Jubiläum nutzen würden.

Danke im Voraus

djheke

Hier eine Möglichkeit.

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">


<style>


.form_container {
 width:650px;
 height:580px;
 background:url("http://i1192.photobucket.com/albums/aa328/funwave1/Baerli/bar%20wb%20bg.jpg") no-repeat;
 display:inline-block;
 text-align:center;
}
.form_container:before {
 content:"";
 display:inline-block;
 vertical-align:middle;
 height:100%;
}
form {
 display:inline-block;
 vertical-align:middle;
 text-align:center;
}
label , input, textarea {
 padding:2px;
 display:block;
 width:100%;
 border:none;
 background:transparent;
}
label {
 padding:4px;
}
input, textarea {
 background:blue;
 color:yellow;
 text-align:center;
}


input[type='submit'] {
 margin-top:5px;
 color:yellow;
 display:inline-block;
 width:auto;
}


</style>
<title></title>




</head>
<body>
<div class="form_container">
<form method="post" action="../ticker/wunsch_gruss_frame.php?a=&amp;box_tabelle=_">
<input name="action" type="hidden" value="1">
<input name="wunsch_box_sendeplan_an" type="hidden" value="1">
<label for="wunschzettel">Wunschzettel</label><input id="wunschzettel" type="text" name="wunschtitel" value=""> 
<label for="wen">Für wen ?</label><input id="wen" type="text" name="wen" value=""> 
<label for="von">von</label><input id="von" type="text" name="von" value=""> 
<label for="sender">Gruß an</label><textarea id="sender"  name="sender" ></textarea>
<input type="submit"  value="Gruss senden">
</form>
</div> 
</body>
</html>

Alles anzeigen

Funwave

Hallo djheke,

das hat sehr gut geklappt - Dankeeee

Super Support +1

Hilfe - Bekomme Textblock nicht in die Mitte eines Bildes

Tags

Benutzer online in diesem Thema