Auf ein Bild schreiben - Textform (LoginForm)

isengard · 10.02.2012

Hallo, erstmal.
Ich bin neu hier und grüße jeden der hier vorbei schaut

Ich will nicht lang drum herum schwafeln....ich hab ein Loginform erhalten, das mit Photoshop erstellt wurde.

In zwei Felder soll man seine Benutzerdaten eingeben.
Wie kann man das realisieren?
Ich habe die PSD bereits geslict, heraus kamen dann einige Bilder und eine html Datei.

HTML:

<html>
<head>
<title>Unbenannt-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Unbenannt-2) -->
<table id="Tabelle_01" width="800" height="801" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="5">
			<img src="Bilder/Unbenannt-2_01.gif" width="800" height="168" alt=""></td>
	</tr>
	<tr>
		<td rowspan="6">
			<img src="Bilder/Unbenannt-2_02.gif" width="297" height="632" alt=""></td>
		<td colspan="2">
			<img src="Bilder/NAME.gif" width="159" height="30" alt=""></td>
		<td colspan="2" rowspan="4">
			<img src="Bilder/Unbenannt-2_04.gif" width="344" height="80" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="Bilder/Unbenannt-2_05.gif" width="159" height="10" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="Bilder/PASSWORD.gif" width="159" height="30" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="Bilder/Unbenannt-2_07.gif" width="159" height="10" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="Bilder/Unbenannt-2_08.gif" width="113" height="552" alt=""></td>
		<td colspan="2">
			<img src="Bilder/LOGIN.gif" width="90" height="30" alt=""></td>
		<td rowspan="2">
			<img src="Bilder/Unbenannt-2_10.gif" width="300" height="552" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="Bilder/Unbenannt-2_11.gif" width="90" height="522" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="297" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="113" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="46" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="44" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="300" height="1" alt=""></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

Ich möchte nun das man in die beiden Felder LOGIN.gif und PASSWORD.gif reinschreiben kann. Ich nehme mal an das die einzige Möglichkeit darin besteht ein Textfeld darüber zu legen?! Wie funktioniert das?

Regards, isengard

blizzart88 · 10.02.2012

AW: Auf ein Bild schreiben - Textform (LoginForm)

Hallo,
das ist ein wenig schwierig, ohne das Bild zu kennen.

Aber erstmal solltest du das Formular mit CSS gestalten, also auf das Tabellenlayout in der HTML verzichten. Infos hierzu findest du unter

Mit CSS kannst du den Hintergrund der Textfelder auch mit einer Hintergrundgrafik unterlegen.

isengard · 10.02.2012

AW: Auf ein Bild schreiben - Textform (LoginForm)

Ja, das hab ich auch versucht ^^
Allerdings waren meine Erfolge mäßig.
Die Felder haben sich dauernd verschoben und haben sich auf die restlichen sliced Grafiken überlagert.

Ich habe hier die Bilddateien und die HTML-Datei hochgeladen, inklusive meiner Veränderungen:

isengard · 11.02.2012

AW: Auf ein Bild schreiben - Textform (LoginForm)

Ah, nevermind, hab's selbst hinbekommen

blizzart88 · 11.02.2012

AW: Auf ein Bild schreiben - Textform (LoginForm)

Na dann ist ja alles in Butter. Viel Glück weiterhin

Grimmy · 11.02.2012

AW: Auf ein Bild schreiben - Textform (LoginForm)

Schreib doch mal wie du es hinbekommen hast. So kann vielleicht ein anderer Benutzer mit gleicher Fragestellung davon patizipieren.