SoloCodigo

Programación Web y Scripting => HTML => CSS / SASS / LESS => Mensaje iniciado por: zaida20 en Lunes 14 de Enero de 2008, 09:53

Título: Problema Al Maquetar Formulario
Publicado por: zaida20 en Lunes 14 de Enero de 2008, 09:53
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
  1. body{
  2.  
  3.   margin: auto;  
  4.   width: 596px;
  5.   padding-top: 5px;
  6.   margin-top: 20px;
  7.   border-top: 0;
  8. }
  9.  
  10. /*----------------Formulario----------------------*/
  11.  
  12. #formulario {
  13.   margin: 10px;
  14.   padding: 0px;
  15.   border: 1px solid #f7f7f7;
  16.   background-color: #fcfcfc;
  17. }
  18. fieldset {
  19.   border: 0;
  20.   padding: 5px;
  21. }
  22.  
  23. legend{
  24.   font-family: "Trebuchet MS", Vendana, Arial, sans-serif;
  25.   font-size: 10pt;
  26.   font-weight: bold;
  27.   border: 0;
  28.   margin-top:0;
  29.   padding-top:0;
  30.   margin-bottom: 0;
  31.   padding-bottom: 0;
  32.   color: #000000;
  33.   margin-bottom: 20px;
  34. }
  35.  
  36. label,input {
  37.   font-family: "Trebuchet MS", Vendana, Arial, sans-serif;
  38.   font-size: 10pt;
  39.   display: block;
  40.   width: 250px;
  41.   height: 15px;
  42.   float: left;
  43.   margin-bottom: 10px;
  44. }
  45.  
  46. label {
  47.   color: #000000;
  48.   text-align: right;
  49.   width: 10pt;
  50.   padding-right: 10px;
  51. }
  52.  
  53. input {
  54.     border: 1px solid #000066;
  55.     color: #ffffff;
  56. }
  57.  
  58. textarea{
  59.   border: 1px solid #000066;
  60.   font-family: "Trebuchet MS", Vendana, Arial, sans-serif;  
  61.   font-size: 13pt;
  62.   color: #000000;
  63. }
  64. .submit {
  65.   background-color: #ffffff;
  66.   border-top: 1px solid #000000;
  67.   border-left: 1px solid #000000;  
  68.   border-right: 1px solid #000000;
  69.   border-bottom: 1px solid #000000;
  70.   margin-top:10px;
  71.   margin-bottom:10px;
  72.   color: #000000;
  73. }
  74.  
  75. br {
  76.   clear: left;
  77. }
  78. .etiqueta_comentario{
  79.   margin-left: 5px;
  80.   margin-bottom: 1px;  
  81. }
  82.  
  83. .input_green{
  84.   color: #98bb79;
  85. }
  86.  
  87. .no_style{
  88.   border: 0;
  89. }
  90.  
  91. #pie{
  92.   font-family: "Trebuchet MS", Arial, sans-serif;  
  93.   font-size: 9pt;
  94.   text-align: center;
  95.   color: #000000;
  96.   bordercolor:#FFFFFF;
  97.   bgcolor:#FFFF99;
  98. }
  99.  

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:
Título: Re: Problema Al Maquetar Formulario
Publicado por: Mollense en Lunes 14 de Enero de 2008, 10:31
zaida20:

Para poder ayudarte me haría falta ver como estás usando esos estilos.
Título: Re: Problema Al Maquetar Formulario
Publicado por: zaida20 en Lunes 14 de Enero de 2008, 10:32
mi formulario es:

Código: Text
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
  4. <head>
  5.   <title></title>
  6.     <link rel="stylesheet" href="formulario.css" type="text/css" />
  7.  
  8. </head>
  9.  
  10. <body>
  11.         <div id="formulario">
  12.           <form action="" method="post" name="comentarios" >
  13.           <fieldset>
  14.             <legend>Datos de Contacto</legend>
  15.             <input class="no_style" type="hidden" name="id" /><br />
  16.          
  17.             <label for="nick">Nombre:</label>
  18.             <input id="nick" type="text" name="nick"  /><br />
  19.            
  20.             <label for="email">Email:</label>
  21.             <input id="email" class="input_green" type="text" name="email"  /><br />
  22.            
  23.             <label for="www">Fono:</label>
  24.             <input id="www" class="input_green" type="text" name="www"  /><br/>
  25.             <legend>Motivo de Consulta</legend>
  26.             <textarea id="comentario" name="comentario" cols="65" rows="6"></textarea><b/>
  27.             <legend>Forma Contacto</legend><br/>
  28.             <input name="fono" type="checkbox" disabled value="" />
  29.             <label for="fono">Fono:</label>
  30.             <input name="email" type="checkbox" disabled value="" />
  31.             <label for="email">Email:</label><br/>
  32.               <input name="submit" type="submit" class="submit" value="Enviar" />
  33.           </fieldset>
  34.           </form>
  35.         </div>    
  36.         <div id="pie">
  37.           <p>Para consultas pueden dirigirse ..... </p>
  38.         </div>
  39. </body>
  40. </html>
  41.  

Muchas gracias por contestarme tan rápido.

Saludos  :hola:
Título: Re: Problema Al Maquetar Formulario
Publicado por: F_Tanori en Lunes 14 de Enero de 2008, 11:13
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
  1. input {
  2.     border: 1px solid #000066;
  3.     color: #ffffff;
  4. }
  5.  

Lo cual afecta a todos los controles Input (text,password,check,radio ... )

Puedes hacerlo asi por ejemplo...

Código: Text
  1. input.submit {
  2.     border: 1px solid #000066;
  3.     color: #ff0000;
  4.     background-color: #ffffff;    
  5. }
  6.  

Código: Text
  1. input.check{
  2.     border: 0px;
  3.     color: #ff0000;
  4. }
  5.  

y a cada control le aplicas su respectiva "subclase"  (atributo Class )

Código: Text
  1. &#60;input name=&#34;submit&#34; type=&#34;submit&#34; class=&#34;submit&#34; value=&#34;Enviar&#34; /&#62;
  2.  

Código: Text
  1.  &#60;input id=&#34;enviar&#34; class=&#34;check&#34; type=&#34;checkbox&#34; name=&#34;enviar&#34;  /&#62; ¿Enviar?
  2.  

Utiliza el "elemento directo" , input para caracteristicas que compartan todos los controles ...

Aplicar a el elemento HTML (tagName)
Código: Text
  1.  
  2. input {
  3.    border: 0px;
  4. }
  5.  
  6.  
  7.  
Aplicar a un elemento en especifico identificado por Id

Código: Text
  1. #miboton {
  2.    border: 0px;
  3. }
  4.  
  5.  

Crear una subclase

Código: Text
  1. .boton {
  2.    border: 0px;
  3. }
  4.  
  5.  

o una subclase a el elemento input

Código: Text
  1. input.boton {
  2.    border: 0px;
  3. }
  4.  
  5.  

Espero te sirva
y que alguien mas experto nos ayude :P

Saludos
Título: Re: Problema Al Maquetar Formulario
Publicado por: zaida20 en Lunes 14 de Enero de 2008, 11:43
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:
Título: Re: Problema Al Maquetar Formulario
Publicado por: zaida20 en Lunes 14 de Enero de 2008, 12:35
Otro problemilla:

tengo el siguiente código:
 
Código: Text
  1.   &#60;table class=&#34;tableconsulta&#34;&#62;
  2.                       &#60;tr&#62;
  3.                         &#60;td width=&#34;531&#34;&#62;&#60;p&#62;Para consultas pueden dirigirse tambi&eacute;n a..... &#60;/p&#62; &#60;/td&#62;
  4.                       &#60;/tr&#62;
  5.                   &#60;/table&#62;
  6.  

estilo.css

Código: Text
  1.  .tableconsulta {
  2.   width: 541px;
  3.   font-family: &#34;Trebuchet MS&#34;, Arial, sans-serif;  
  4.   font-size: 9pt;
  5.   text-align: center;
  6.   color: #000000;
  7.   border: 1px;
  8.   bordercolor:#000066;
  9.   bgcolor:#FFFF99;
  10. }
  11.  
el problema es que sólo hace ésto:

width: 541px;
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 9pt;
text-align: center;

ni el borde ni los colores me los coloca, que estoy haciendo mal?
Saludos y gracias!!  :hola:
Título: Re: Problema Al Maquetar Formulario
Publicado por: zaida20 en Lunes 14 de Enero de 2008, 12:39
Acabo de encontrar el fallo!!!  :P

he cambiado ésto

 
Código: Text
  1. border: 1px;
  2.   bordercolor:#000066;
  3.   bgcolor:#FFFF99;
  4.  

Por ésto

   
Código: Text
  1. border: 1px solid #000066;
  2.   background-color:#FFFF99;
  3.  

Y funciona!!! :kicking:

Saludos  :hola:
Título: Re: Problema Al Maquetar Formulario
Publicado por: zaida20 en Lunes 14 de Enero de 2008, 13:02
Ya casi lo tengo, pero me fallan dos cosas:

formulario.htm

Código: Text
  1. &#60;!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&#62;
  2.   
  3. &#60;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34; xml:lang=&#34;es&#34; lang=&#34;es&#34;&#62;
  4. &#60;head&#62;
  5.   &#60;title&#62;&#60;/title&#62;
  6.     &#60;link rel=&#34;stylesheet&#34; href=&#34;formulario.css&#34; type=&#34;text/css&#34; /&#62;
  7.   
  8. &#60;/head&#62;
  9.  
  10. &#60;body&#62;
  11.         &#60;div id=&#34;formulario&#34;&#62;
  12.           &#60;form action=&#34;&#34; method=&#34;post&#34; name=&#34;comentarios&#34; &#62;
  13.           &#60;fieldset&#62;
  14.             &#60;table class=&#34;tableform&#34;&#62;
  15.                           &#60;tr&#62;
  16.                             &#60;td colspan=&#34;3&#34;&#62;&#60;legend&#62;Datos de Contacto&#60;/legend&#62;&#60;/td&#62;
  17.                           &#60;/tr&#62;
  18.                           &#60;tr&#62;
  19.                             &#60;td width=&#34;60&#34;&#62;&#60;label for=&#34;label&#34;&#62;Nombre:&#60;/label&#62;&#60;/td&#62;
  20.                             &#60;td colspan=&#34;2&#34;&#62;&#60;input id=&#34;nick&#34; type=&#34;text&#34; name=&#34;nick&#34;&#62;&#60;/td&#62;
  21.                           &#60;/tr&#62;
  22.                           &#60;tr&#62;
  23.                             &#60;td&#62;&#60;label for=&#34;label&#34;&#62;Email:&#60;/label&#62;&#60;/td&#62;
  24.                             &#60;td colspan=&#34;2&#34;&#62;&#60;input id=&#34;email&#34;  type=&#34;text&#34; name=&#34;email2&#34;&#62;  &#60;/td&#62;
  25.                           &#60;/tr&#62;
  26.                           &#60;tr&#62;
  27.                             &#60;td&#62;&#60;label for=&#34;label&#34;&#62;Fono:&#60;/label&#62;&#60;/td&#62;
  28.                             &#60;td colspan=&#34;2&#34;&#62;&#60;input id=&#34;www&#34; type=&#34;text&#34; name=&#34;www&#34;&#62;&#60;/td&#62;
  29.                           &#60;/tr&#62;
  30.                           &#60;tr&#62;
  31.                             &#60;td colspan=&#34;3&#34;&#62;&#60;legend&#62;Motivo de Consulta&#60;/legend&#62;&#60;/td&#62;
  32.                           &#60;/tr&#62;
  33.                           &#60;tr&#62;
  34.                             &#60;td colspan=&#34;3&#34;&#62;&#60;textarea id=&#34;comentario&#34; name=&#34;comentario&#34; cols=&#34;65&#34; rows=&#34;6&#34;&#62;&#60;/textarea&#62;&#60;/td&#62;
  35.                           &#60;/tr&#62;
  36.                           &#60;tr&#62;
  37.                             &#60;td colspan=&#34;3&#34;&#62;&#60;legend&#62;Forma Contacto&#60;/legend&#62;&#60;/td&#62;
  38.                           &#60;/tr&#62;
  39.                           &#60;tr&#62;
  40.                             &#60;td&#62;&#60;label for=&#34;label&#34;&#62;Email:&#60;/label&#62;&#60;/td&#62;
  41.                             &#60;td colspan=&#34;2&#34;&#62;&#60;input name=&#34;fono&#34; type=&#34;checkbox&#34; disabled=&#34;&#34; value=&#34;&#34; class=&#34;checkbox&#34;/&#62;&#60;/td&#62;
  42.                           &#60;/tr&#62;
  43.                           &#60;tr&#62;
  44.                             &#60;td&#62;&#60;label for=&#34;fono&#34;&#62;Fono:&#60;/label&#62;&#60;/td&#62;
  45.                             &#60;td width=&#34;74&#34;&#62;&#60;input name=&#34;email&#34; type=&#34;checkbox&#34; disabled=&#34;&#34; value=&#34;&#34; class=&#34;checkbox&#34; /&#62;&#60;/td&#62;
  46.                             &#60;td width=&#34;414&#34;&#62;&#60;input name=&#34;submit&#34; type=&#34;submit&#34; class=&#34;submit&#34; value=&#34;Enviar&#34; /&#62;&#60;/td&#62;
  47.                           &#60;/tr&#62;
  48.                           &#60;tr&#62;
  49.                             &#60;td colspan=&#34;3&#34;&#62;&#60;div id=&#34;pie&#34;&#62;
  50.                               &#60;table class=&#34;tableconsulta&#34;&#62;
  51.                                 &#60;tr&#62;
  52.                                   &#60;td width=&#34;531&#34;&#62;&#60;p&#62;Para consultas pueden dirigirse &#60;/p&#62;&#60;/td&#62;
  53.                                 &#60;/tr&#62;
  54.                               &#60;/table&#62;
  55.                             &#60;/div&#62;&#60;/td&#62;
  56.                           &#60;/tr&#62;
  57.                         &#60;/table&#62;
  58.             
  59.             &#60;input class=&#34;no_style&#34; type=&#34;hidden&#34; name=&#34;id&#34; /&#62;&#60;br /&#62;
  60.           &#60;/fieldset&#62;
  61.           &#60;/form&#62;
  62.         &#60;/div&#62;    
  63. &#60;/body&#62;
  64. &#60;/html&#62;
  65.  

formulario.css

Código: Text
  1. body{
  2.   
  3.   margin: auto;  
  4.   width: 596px;
  5.   padding-top: 5px;
  6.   margin-top: 20px;
  7.   border-top: 0;
  8. }
  9.  
  10. /*----------------Formulario----------------------*/
  11. .tableform {
  12.   width: 564px;
  13.   border: 0px;
  14. }
  15. .tableconsulta {
  16.   width: 541px;
  17.   font-family: &#34;Trebuchet MS&#34;, Arial, sans-serif;  
  18.   font-size: 9pt;
  19.   text-align: center;
  20.   color: #000000;
  21.   border: 1px solid #000066;
  22.   background-color:#FFFF99;
  23.   font-weight: bold;
  24. }
  25. #formulario {
  26.   margin: 10px;
  27.   padding: 0px;
  28.   border: 1px solid #f7f7f7;
  29.   background-color: #fcfcfc;
  30. }
  31. fieldset {
  32.   border: 0;
  33.   padding: 5px;
  34. }
  35.  
  36. legend{
  37.   font-family: &#34;Trebuchet MS&#34;, Vendana, Arial, sans-serif;
  38.   font-size: 10pt;
  39.   font-weight: bold;
  40.   border: 0;
  41.   margin-top:0;
  42.   padding-top:0;
  43.   margin-bottom: 0;
  44.   padding-bottom: 0;
  45.   color: #000000;
  46.   margin-bottom: 20px;
  47. }
  48.  
  49. label,input {
  50.   font-family: &#34;Trebuchet MS&#34;, Vendana, Arial, sans-serif;
  51.   font-size: 10pt;
  52.   display: block;
  53.   width: 250px;
  54.   height: 15px;
  55.   float: left;
  56.   margin-bottom: 10px;
  57. }
  58.  
  59. label {
  60.   color: #000000;
  61.   text-align: right;
  62.   width: 10pt;
  63.   padding-right: 10px;
  64. }
  65.  
  66. input {
  67.     border: 1px solid #000066;
  68.     color: #ffffff;
  69. }
  70.  
  71. textarea{
  72.   border: 1px solid #000066;
  73.   font-family: &#34;Trebuchet MS&#34;, Vendana, Arial, sans-serif;  
  74.   font-size: 13pt;
  75.   color: #000000;
  76. }
  77. input.submit {
  78.   background-color: #ffffff;
  79.   border-top: 1px solid #000066;
  80.   border-left: 1px solid #000066;  
  81.   border-right: 1px solid #000066;
  82.   border-bottom: 1px solid #000066;
  83.   margin-top:10px;
  84.   margin-bottom:10px;
  85.   color: #000066;
  86.   width: 100px;
  87.   font-weight: bold;
  88.   
  89. }
  90. input.checkbox {
  91.   border: 0px;
  92.   color: #ffffff;
  93.   width: 30px;
  94. }
  95.  
  96. br {
  97.   clear: left;
  98. }
  99.  
  100. .no_style{
  101.   border: 0;
  102. }
  103.  

El primer problema es que el texto del submit no se ve correctamente, y el segundo problema es que los checkbox aparecen desabilitados ¿por qué?

Saludos y muchas gracias  :hola:
Título: Re: Problema Al Maquetar Formulario
Publicado por: venedan en Martes 15 de Enero de 2008, 03:38
para que en el submit se vea el texto solo agregale un "height:auto;" dentro de "input.submit" y porque estan desabilitados los checkbox pues facil solo borrale esta opcion a los checkbox disabled=""

y con respecto a un comentario anterior pana de verdad que trabajar con capas "div" es mucho mas facil que trabajar con tablas yo he maquetado un monton de paginas web y en ninguna de ellas le he agregado si quiera una tabla porque son poco flexibles y pueden dar mas de un dolor de cabeza por algo que no deberia de verdad que si piensas empezar por este mundo te recomiendo la pagina www.desarrolloweb.com/css (http://www.desarrolloweb.com/css) que es un tutorial con ejemplos practicos que es muy buena para practicar
Título: Re: Problema Al Maquetar Formulario
Publicado por: zaida20 en Martes 15 de Enero de 2008, 09:32
Hola venedan

Citar
para que en el submit se vea el texto solo agregale un "height:auto;" dentro de "input.submit" y porque estan desabilitados los checkbox pues facil solo borrale esta opcion a los checkbox disabled=""

Perfecto!!!! todo solucionado  :kicking:

Citar
y con respecto a un comentario anterior pana de verdad que trabajar con capas "div" es mucho mas facil que trabajar con tablas yo he maquetado un monton de paginas web y en ninguna de ellas le he agregado si quiera una tabla porque son poco flexibles y pueden dar mas de un dolor de cabeza por algo que no deberia de verdad que si piensas empezar por este mundo te recomiendo la pagina www.desarrolloweb.com/css (http://www.desarrolloweb.com/css) que es un tutorial con ejemplos practicos que es muy buena para practicar

Muchísimas gracias por el consejo, miraré la página haber que tal.

Saludos y muchas gracias  :hola:
Título: Re: Problema Al Maquetar Formulario
Publicado por: F_Tanori en Miércoles 23 de Enero de 2008, 20:33
Cita de: "venedan"
y con respecto a un comentario anterior pana de verdad que trabajar con capas "div" es mucho mas facil que trabajar con tablas yo he maquetado un monton de paginas web y en ninguna de ellas le he agregado si quiera una tabla porque son poco flexibles y pueden dar mas de un dolor de cabeza por algo que no deberia de verdad que si piensas empezar por este mundo te recomiendo la pagina www.desarrolloweb.com/css (http://www.desarrolloweb.com/css) que es un tutorial con ejemplos practicos que es muy buena para practicar
Exacto a eso me referia, con que algunos dirian que asi no se hace,   :rolleyes:  la verdad yo en diseño no estoy muy involucrado.... y se que ya no se maqueta con tablas pero aun son funcionales si sabes manipularlas en cuanto a flexibilidad claro tienen un limite pero pueden servir  :P , incluso cuando uno exporta un diseño de PhotoShop en ImageReady (al menos en la version 9 [CS2] ) lo hace en tablas...


...Solo digo que aun son utiles pero como dices es mejor ir adaptandose a los estilos modernos... segun su progreso y aprender a usar Capas ( Div , Span )

 :smartass:

Saludos