problema al maquetar formulario

zaida · #1 (**permalink**) 14/01/2008, 02:50

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

zaida · #2 (**permalink**) 14/01/2008, 05:34

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!!

zaida · #3 (**permalink**) 14/01/2008, 06:05

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

safranero · #4 (**permalink**) 14/01/2008, 08:37

Prueba a quitar en las lineas del checkbox el disabled="" alomejor así se habilitan

masterpuppet · #5 (**permalink**) 14/01/2008, 18:04

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 · #6 (**permalink**) 15/01/2008, 02:27

Perfecto!!!!

Muchísimas gracias a los dos

Saludos