Programación Web y Scripting > CSS / SASS / LESS

 Problema Al Maquetar Formulario

<< < (2/3) > >>

zaida20:
Otro problemilla:

tengo el siguiente código:
 

--- Código: Text ---  &#60;table class=&#34;tableconsulta&#34;&#62;                      &#60;tr&#62;                        &#60;td width=&#34;531&#34;&#62;&#60;p&#62;Para consultas pueden dirigirse tambi&eacute;n a..... &#60;/p&#62; &#60;/td&#62;                      &#60;/tr&#62;                  &#60;/table&#62; 
estilo.css


--- Código: Text --- .tableconsulta {  width: 541px;  font-family: &#34;Trebuchet MS&#34;, Arial, sans-serif;    font-size: 9pt;  text-align: center;  color: #000000;  border: 1px;  bordercolor:#000066;  bgcolor:#FFFF99;} 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:

zaida20:
Acabo de encontrar el fallo!!!  :P

he cambiado ésto

 
--- Código: Text ---border: 1px;  bordercolor:#000066;  bgcolor:#FFFF99; 
Por ésto

   
--- Código: Text ---border: 1px solid #000066;  background-color:#FFFF99; 
Y funciona!!! :kicking:

Saludos  :hola:

zaida20:
Ya casi lo tengo, pero me fallan dos cosas:

formulario.htm


--- Código: Text ---&#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;  &#60;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34; xml:lang=&#34;es&#34; lang=&#34;es&#34;&#62;&#60;head&#62;  &#60;title&#62;&#60;/title&#62;    &#60;link rel=&#34;stylesheet&#34; href=&#34;formulario.css&#34; type=&#34;text/css&#34; /&#62;  &#60;/head&#62; &#60;body&#62;        &#60;div id=&#34;formulario&#34;&#62;          &#60;form action=&#34;&#34; method=&#34;post&#34; name=&#34;comentarios&#34; &#62;          &#60;fieldset&#62;            &#60;table class=&#34;tableform&#34;&#62;                          &#60;tr&#62;                            &#60;td colspan=&#34;3&#34;&#62;&#60;legend&#62;Datos de Contacto&#60;/legend&#62;&#60;/td&#62;                          &#60;/tr&#62;                          &#60;tr&#62;                            &#60;td width=&#34;60&#34;&#62;&#60;label for=&#34;label&#34;&#62;Nombre:&#60;/label&#62;&#60;/td&#62;                            &#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;                          &#60;/tr&#62;                          &#60;tr&#62;                            &#60;td&#62;&#60;label for=&#34;label&#34;&#62;Email:&#60;/label&#62;&#60;/td&#62;                            &#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;                          &#60;/tr&#62;                          &#60;tr&#62;                            &#60;td&#62;&#60;label for=&#34;label&#34;&#62;Fono:&#60;/label&#62;&#60;/td&#62;                            &#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;                          &#60;/tr&#62;                          &#60;tr&#62;                            &#60;td colspan=&#34;3&#34;&#62;&#60;legend&#62;Motivo de Consulta&#60;/legend&#62;&#60;/td&#62;                          &#60;/tr&#62;                          &#60;tr&#62;                            &#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;                          &#60;/tr&#62;                          &#60;tr&#62;                            &#60;td colspan=&#34;3&#34;&#62;&#60;legend&#62;Forma Contacto&#60;/legend&#62;&#60;/td&#62;                          &#60;/tr&#62;                          &#60;tr&#62;                            &#60;td&#62;&#60;label for=&#34;label&#34;&#62;Email:&#60;/label&#62;&#60;/td&#62;                            &#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;                          &#60;/tr&#62;                          &#60;tr&#62;                            &#60;td&#62;&#60;label for=&#34;fono&#34;&#62;Fono:&#60;/label&#62;&#60;/td&#62;                            &#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;                            &#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;                          &#60;/tr&#62;                          &#60;tr&#62;                            &#60;td colspan=&#34;3&#34;&#62;&#60;div id=&#34;pie&#34;&#62;                              &#60;table class=&#34;tableconsulta&#34;&#62;                                &#60;tr&#62;                                  &#60;td width=&#34;531&#34;&#62;&#60;p&#62;Para consultas pueden dirigirse &#60;/p&#62;&#60;/td&#62;                                &#60;/tr&#62;                              &#60;/table&#62;                            &#60;/div&#62;&#60;/td&#62;                          &#60;/tr&#62;                        &#60;/table&#62;                        &#60;input class=&#34;no_style&#34; type=&#34;hidden&#34; name=&#34;id&#34; /&#62;&#60;br /&#62;          &#60;/fieldset&#62;          &#60;/form&#62;        &#60;/div&#62;    &#60;/body&#62;&#60;/html&#62; 
formulario.css


--- Código: Text ---body{    margin: auto;    width: 596px;  padding-top: 5px;  margin-top: 20px;   border-top: 0;} /*----------------Formulario----------------------*/.tableform {  width: 564px;  border: 0px;}.tableconsulta {  width: 541px;  font-family: &#34;Trebuchet MS&#34;, Arial, sans-serif;    font-size: 9pt;  text-align: center;  color: #000000;  border: 1px solid #000066;  background-color:#FFFF99;  font-weight: bold;}#formulario {  margin: 10px;  padding: 0px;  border: 1px solid #f7f7f7;  background-color: #fcfcfc;}fieldset {  border: 0;  padding: 5px;} legend{  font-family: &#34;Trebuchet MS&#34;, 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: &#34;Trebuchet MS&#34;, 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: &#34;Trebuchet MS&#34;, Vendana, Arial, sans-serif;    font-size: 13pt;  color: #000000;}input.submit {  background-color: #ffffff;  border-top: 1px solid #000066;  border-left: 1px solid #000066;    border-right: 1px solid #000066;  border-bottom: 1px solid #000066;  margin-top:10px;  margin-bottom:10px;  color: #000066;  width: 100px;  font-weight: bold;  }input.checkbox {  border: 0px;  color: #ffffff;  width: 30px;} br {  clear: left;} .no_style{  border: 0;} 
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:

venedan:
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 que es un tutorial con ejemplos practicos que es muy buena para practicar

zaida20:
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=""
--- Fin de la cita ---

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 que es un tutorial con ejemplos practicos que es muy buena para practicar
--- Fin de la cita ---

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

Saludos y muchas gracias  :hola:

Navegación

[0] Índice de Mensajes

[#] Página Siguiente

[*] Página Anterior

Ir a la versión completa