problema al maquetar formulario css

zaida · 14-ene-2008, 08:54

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:

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

ferranvillalba · 14-ene-2008, 09:02

recuerda de adaptar el css para IE y Firefox pues ie es un toca.... y no respecta los estandares web.

zaida · 14-ene-2008, 09:18

Perdona mi ignoracia, pero ¿como se adapta?

Saludos y gracias de nuevo

zaida · 14-ene-2008, 12:09

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