[RESUELTO] Formulario, boton imagen pero todo alineado (horizontal y vertical)

[pleter]

Buenos dias. tengo una consulta que hacerles.. tengo un pequeño problemilla y css no es mi fuerte. Justamente estoy aprendiendo por mi cuenta y me tope con este problema...

Tengo un div que contiene un formulario. El problema surge que el campo del formulario lo muestra "abajo" o mejor dicho "cortado por la mitad" y el boton (aprendi a ponerlo con una imagen) se muestra correctamente. ah! tampoco se porque sale separado el "boton" del formulario, como qe hay un "espacio"

Que le estoy fallando?

Les dejo imagen de como aparece mal error.png.
tambien imagen de que es lo que busco: idea.png
Y el codigo:

Código HTML:

<div style="width:300px;height:75px;position:absolute;overflow:hidden;top:149px">
	<div style="width:32px;height:32px;position:absolute;overflow:hidden;top:13px;left:13px;background-image:url('../img/iconos/mail32x32.png')">
	</div>
	<div style="width:250px;height:24px;position:absolute;overflow:hidden;top:7px;left:50px">
		<p style="font-family:'Courier New', Courier, 'espacio sencillo'; font-size:14px"><strong>RECIBE NUEVOS LANZAMIENTOS!</strong></p>				
	</div>
	<div style="width:250px;height:24px;position:absolute;overflow:hidden;top:31px;left:50px;vertical-align:middle">
			<form action="ext.php?t=signup" method="post">
					<input type="text" class="text_input" name="email" value="" style="width: 175px"/>
					<input name="submit0" value="Subscribe!" type="image" src="../img/iconos/boton-suscribir.png"/>
				<div style="width:1px;height:1px;overflow:hidden">
					<input type="radio" name="group_id[]0" value="2" checked style="width: 1px; height: 1px"/>
				</div>
			</form>			
	</div>
</div> 

Debe ser algo sencillo, pero... no se que puede ser.

Saludos y gracias por antemano.

[Carlangueitor]

Primero te recomiendo que saques los estilos a una hoja externa, te va a hacer lo mismo que si utilizaras estilos con HTML si los tienes así.

Solo aumenta el alto del input de texto, para los espacios ponles margin: 0; aunque eso se resolvería si usaras un reset.

Saludos

[TheDark03]

hola... bueno como ya te dijeron.. mejor seria trabajarlo en una hoja de estilos aparte pero bueno lo puedes corregir tmb con la propiedad size=12

<input type="text" class="text_input" name="email" value="" size="12"/>

no se si usas hoja de estilos pero creo q ya tienes una x la clase q agregas "text_input" pero si no esta de más

y un ejemplo de trabajarlo en una hoja de estilos seria algo asi

Código CSS:

.textbox{background-image:url(images/form_bg.jpg) repeat-x;border:1px solid #333333;width: 215px;color:#333333;font-family:"Calibri";}
 

Código HTML:

<input type="text" class="textbox" id="email" name="email" value="" />
 

Saludos

[pleter]

Casi... pero no!

Logre mejorarlo (el tema del espacio) poniendo todo junto (los items del formulario) pero en una misma linea de codigo, no haciendo multiples lineas.

Agrande como dijiste el campo de texto en alto a 27 (que es lo que mide la imagen) pero el texto que se escribe sigue saliendo un poco mas abajo, aca captura:

el codigo me quedo asi:

Código HTML:

<div style="width:250px;height:30px;position:absolute;overflow:hidden;top:25px;left:50px;vertical-align:middle">
<form action="ext.php?t=signup" method="post">
<input type="text" class="text_input" name="email" value="" style="width: 175px;height:30px;font-size:13px"/><input name="submit0" type="image" src="../img/iconos/boton-suscribir.png"/><div style="width:1px;height:1px;overflow:hidden"><input type="radio" name="group_id[]0" value="2" checked /></div>
</form>			
</div> 

otra cosita: Por ahora prefiero ir usando esta parte con los style en el html, tengo un archivo css para determinados div para ver como va quedando.



------------

Justo estaba escribiendo y se ve que thedark03 respondio jeje ahora pruebo lo que el puso.

[pleter]

Me arto! jaja mucho tiempo para algo tan ""simple""

al final.. agarre y meti div a todo jaja y el resultado es el que buscaba

use el siguiente codigo por si les interesa

Código HTML:

<div style="width:250px;height:30px;position:absolute;overflow:hidden;top:25px;left:50px;vertical-align:middle">
	<form action="ext.php?t=signup" method="post">
	<div style="width:175px;height:27px;position:absolute"><input type="text" class="text_input" name="email" value=""  style="width:175px;height:23px;font-size:14px;border:1px lime solid"/></div><div style="width:33px;height:27px;position:absolute;left:175px"><input name="submit0" type="image" src="../img/iconos/boton-suscribir.png"/></div><div style="width:1px;height:1px;overflow:hidden"><input type="radio" name="group_id[]0" value="2" checked /></div>
	</form>			
</div>