Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   CSS (http://www.forosdelweb.com/f53/)
-   -   problema al maquetar formulario (http://www.forosdelweb.com/f53/problema-maquetar-formulario-547899/)

zaida 14/01/2008 02:50
problema al maquetar formulario
 
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 el es código css:

Código:
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 :adios:

zaida 14/01/2008 05:34
Re: problema al maquetar formulario
 
Otro problemilla:

tengo el siguiente código:

Código HTML:
                                        <table class="tableconsulta">
                      <tr>
                        <td width="531"><p>Para consultas pueden dirigirse tambi&eacute;n a..... </p> </td>
                      </tr>
                  </table>
estilo.css

Código:
.tableconsulta {
        width: 541px;
        font-family: "Trebuchet MS", 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!! :adios:

zaida 14/01/2008 06:05
Re: problema al maquetar formulario
 
Ya casi lo tengo, pero me fallan dos cosas:

formulario.htm

Código HTML:
<!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>
            <table class="tableform">
                        <tr>
                          <td colspan="3"><legend>Datos de Contacto</legend></td>
                        </tr>
                        <tr>
                          <td width="60"><label for="label">Nombre:</label></td>
                          <td colspan="2"><input id="nick" type="text" name="nick"></td>
                        </tr>
                        <tr>
                          <td><label for="label">Email:</label></td>
                          <td colspan="2"><input id="email"  type="text" name="email2">  </td>
                        </tr>
                        <tr>
                          <td><label for="label">Fono:</label></td>
                          <td colspan="2"><input id="www" type="text" name="www"></td>
                        </tr>
                        <tr>
                          <td colspan="3"><legend>Motivo de Consulta</legend></td>
                        </tr>
                        <tr>
                          <td colspan="3"><textarea id="comentario" name="comentario" cols="65" rows="6"></textarea></td>
                        </tr>
                        <tr>
                          <td colspan="3"><legend>Forma Contacto</legend></td>
                        </tr>
                        <tr>
                          <td><label for="label">Email:</label></td>
                          <td colspan="2"><input name="fono" type="checkbox" disabled="" value="" class="checkbox"/></td>
                        </tr>
                        <tr>
                          <td><label for="fono">Fono:</label></td>
                          <td width="74"><input name="email" type="checkbox" disabled="" value="" class="checkbox" /></td>
                          <td width="414"><input name="submit" type="submit" class="submit" value="Enviar" /></td>
                        </tr>
                        <tr>
                          <td colspan="3"><div id="pie">
                            <table class="tableconsulta">
                              <tr>
                                <td width="531"><p>Para consultas pueden dirigirse </p></td>
                              </tr>
                            </table>
                          </div></td>
                        </tr>
                      </table>
           
            <input class="no_style" type="hidden" name="id" /><br />
          </fieldset>
          </form>
        </div>   
</body>
</html>
formulario.css

Código:
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: "Trebuchet MS", 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: "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;
}
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 :adios:

safranero 14/01/2008 08:37
Re: problema al maquetar formulario
 
Prueba a quitar en las lineas del checkbox el disabled="" alomejor así se habilitan

masterpuppet 14/01/2008 18:04
Re: problema al maquetar formulario
 
para el problema del submit declara el height en input.submit supongo q con unos 20px va a andar bien y para q no te aparezcan deshabilitados los checkbox sacales la propiedad disabled.

zaida 15/01/2008 02:27
Re: problema al maquetar formulario
 
Perfecto!!!!:arriba:

Muchísimas gracias a los dos

Saludos :adios:


La zona horaria es GMT -6. Ahora son las 02:10.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.