Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de [RESUELTO] Formulario, boton imagen pero todo alineado (horizontal y vertical) en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 07/07/2010, 10:12
 
Fecha de Ingreso: julio-2009
Ubicación: Argentinalandia
Mensajes: 339
Antigüedad: 8 años, 5 meses
Puntos: 15
Pregunta [RESUELTO] Formulario, boton imagen pero todo alineado (horizontal y vertical)

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.
__________________
Mi Perfil y Blog estan en Yeow.com.ar ✰✰✰✰✰
Pero en WONDED.COM estan Mis Proyectos OpenSource ;-)

Última edición por pleter; 07/07/2010 a las 13:53 Razón: RESUELTO
  #2 (permalink)  
Antiguo 07/07/2010, 11:27
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 9 meses
Puntos: 1314
Respuesta: Sencillo error de un par de lineas... pero no puedo! :'/

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
__________________
Grupo Telegram Docker en Español
  #3 (permalink)  
Antiguo 07/07/2010, 12:19
 
Fecha de Ingreso: mayo-2010
Ubicación: Lima, Peru.
Mensajes: 176
Antigüedad: 7 años, 6 meses
Puntos: 6
Respuesta: Sencillo error de un par de lineas... pero no puedo! :'/

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:
Ver original
  1. .textbox{background-image:url(images/form_bg.jpg) repeat-x;border:1px solid #333333;width: 215px;color:#333333;font-family:"Calibri";}


Código HTML:
Ver original
  1. <input type="text" class="textbox" id="email" name="email" value="" />

Saludos
  #4 (permalink)  
Antiguo 07/07/2010, 12:42
 
Fecha de Ingreso: julio-2009
Ubicación: Argentinalandia
Mensajes: 339
Antigüedad: 8 años, 5 meses
Puntos: 15
Respuesta: Sencillo error de un par de lineas... pero no puedo! :'/

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.
__________________
Mi Perfil y Blog estan en Yeow.com.ar ✰✰✰✰✰
Pero en WONDED.COM estan Mis Proyectos OpenSource ;-)

Última edición por pleter; 07/07/2010 a las 12:57
  #5 (permalink)  
Antiguo 07/07/2010, 13:46
 
Fecha de Ingreso: julio-2009
Ubicación: Argentinalandia
Mensajes: 339
Antigüedad: 8 años, 5 meses
Puntos: 15
Respuesta: Sencillo error de un par de lineas... pero no puedo! :'/

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> 
__________________
Mi Perfil y Blog estan en Yeow.com.ar ✰✰✰✰✰
Pero en WONDED.COM estan Mis Proyectos OpenSource ;-)

Última edición por pleter; 07/07/2010 a las 13:49 Razón: agrego imagen

Etiquetas: alinear, centrar, html, vertical, formulario
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:55.