Programación Web y Scripting > CSS / SASS / LESS
Problema Al Maquetar Formulario
zaida20:
hola a todos, acabo de empezar a aprender css y no se por dónde empezar. Busqué por internet un ejemplo de formulario en css y a partir de ahí he ido modificando un poquito, pero tengo dos problemas:
Mi formulario tiene una línea donde aparece
Nombre con un campo de texto y otra linea dónde aparece email y un campo de texto, el problema es que los campos de texto de texto no se me quedan alineados a la izquierda en la misma posición.
Éste es el código css:
--- Código: Text ---body{ margin: auto; width: 596px; padding-top: 5px; margin-top: 20px; border-top: 0;} /*----------------Formulario----------------------*/ #formulario { margin: 10px; padding: 0px; border: 1px solid #f7f7f7; background-color: #fcfcfc;}fieldset { border: 0; padding: 5px;} legend{ font-family: "Trebuchet MS", Vendana, Arial, sans-serif; font-size: 10pt; font-weight: bold; border: 0; margin-top:0; padding-top:0; margin-bottom: 0; padding-bottom: 0; color: #000000; margin-bottom: 20px;} label,input { font-family: "Trebuchet MS", Vendana, Arial, sans-serif; font-size: 10pt; display: block; width: 250px; height: 15px; float: left; margin-bottom: 10px;} label { color: #000000; text-align: right; width: 10pt; padding-right: 10px;} input { border: 1px solid #000066; color: #ffffff;} textarea{ border: 1px solid #000066; font-family: "Trebuchet MS", Vendana, Arial, sans-serif; font-size: 13pt; color: #000000;}.submit { background-color: #ffffff; border-top: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000; margin-top:10px; margin-bottom:10px; color: #000000;} br { clear: left;}.etiqueta_comentario{ margin-left: 5px; margin-bottom: 1px; } .input_green{ color: #98bb79;} .no_style{ border: 0;} #pie{ font-family: "Trebuchet MS", Arial, sans-serif; font-size: 9pt; text-align: center; color: #000000; bordercolor:#FFFFFF; bgcolor:#FFFF99;}
El otro problema que tengo es que yo quiero que los campos de texto tengan unas características determinadas pero mi formulario también tiene dos casillas de verificación y un botón de enviar y me los modifica también como los campos de texto, ¿alguien puede ayudarme?
Saludos y muchas gracias :hola:
Mollense:
zaida20:
Para poder ayudarte me haría falta ver como estás usando esos estilos.
zaida20:
mi formulario es:
--- Código: Text ---<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"><head> <title></title> <link rel="stylesheet" href="formulario.css" type="text/css" /> </head> <body> <div id="formulario"> <form action="" method="post" name="comentarios" > <fieldset> <legend>Datos de Contacto</legend> <input class="no_style" type="hidden" name="id" /><br /> <label for="nick">Nombre:</label> <input id="nick" type="text" name="nick" /><br /> <label for="email">Email:</label> <input id="email" class="input_green" type="text" name="email" /><br /> <label for="www">Fono:</label> <input id="www" class="input_green" type="text" name="www" /><br/> <legend>Motivo de Consulta</legend> <textarea id="comentario" name="comentario" cols="65" rows="6"></textarea><b/> <legend>Forma Contacto</legend><br/> <input name="fono" type="checkbox" disabled value="" /> <label for="fono">Fono:</label> <input name="email" type="checkbox" disabled value="" /> <label for="email">Email:</label><br/> <input name="submit" type="submit" class="submit" value="Enviar" /> </fieldset> </form> </div> <div id="pie"> <p>Para consultas pueden dirigirse ..... </p> </div></body></html>
Muchas gracias por contestarme tan rápido.
Saludos :hola:
F_Tanori:
Aunque no soy el experto en esto ..... y muchos diran que esto no se hace... :rolleyes:
Puedes maquetar con tablas e incluso aplicarle los estilos (CSS) a las tablas y asi alinear los controles
.....
<!--html--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>HTML </td></tr><tr><td id='CODE'><!--html1--><form>
<table class="TableForm">
<tr>
<td>
<label for="nick">Nombre:</label>
</td>
<td>
<input id="nick" type="text" name="nick" />
</td>
</tr>
<tr>
<td>
<label for="email">Email:</label>
</td>
<td>
<input id="email" class="input_green" type="text" name="email" />
</td>
</tr>
</table>
</form>
<!--html2--></td></tr></table><div class='postcolor'><!--html3-->
.... es una posible solución :rolleyes:
con respecto al segundo problema, les aplica los estilos porque estas actuando directamente con el tagName
--- Código: Text ---input { border: 1px solid #000066; color: #ffffff;}
Lo cual afecta a todos los controles Input (text,password,check,radio ... )
Puedes hacerlo asi por ejemplo...
--- Código: Text ---input.submit { border: 1px solid #000066; color: #ff0000; background-color: #ffffff; }
--- Código: Text ---input.check{ border: 0px; color: #ff0000;}
y a cada control le aplicas su respectiva "subclase" (atributo Class )
--- Código: Text ---<input name="submit" type="submit" class="submit" value="Enviar" />
--- Código: Text --- <input id="enviar" class="check" type="checkbox" name="enviar" /> ¿Enviar?
Utiliza el "elemento directo" , input para caracteristicas que compartan todos los controles ...
Aplicar a el elemento HTML (tagName)
--- Código: Text --- input { border: 0px;} Aplicar a un elemento en especifico identificado por Id
--- Código: Text ---#miboton { border: 0px;}
Crear una subclase
--- Código: Text ---.boton { border: 0px;}
o una subclase a el elemento input
--- Código: Text ---input.boton { border: 0px;}
Espero te sirva
y que alguien mas experto nos ayude :P
Saludos
zaida20:
hola F_Tanori
Muchísimas gracias por tu explicación(la verdad que ésto de css me parece muy complejo :( ), voy a probar todo lo que me has dicho.
Saludos y gracias de nuevo ;) :hola:
Navegación
[#] Página Siguiente
Ir a la versión completa