Buenas compis,
Me propongo a pasar un formulario de contacto hecho en tablas a CSS, ya que he leido que es mejor, menos código, mas accesibilidad, etc...
Os pongo los dos codigos, uno con tablas y otro con CSS
El problema que se me presenta es en de CSS los inputs quedan pegados a los labels, en cambio con tablas me quedan alineados perfectamente. Cómo puedo conseguir el mismo efecto?
Y otra pregunta es que intento aprender de una vez como aplicarle propiedades a un elemento concreto... por ej. si quiero que los labels sean
negrita y mi formulario se llama "contactar_css" haria algo así
Código:
#contactar_css label {
font-weight:bold;
}
Pero si quiero aplicarle un tipo de efecto a los inputs si hago algo así...
NO me funciona!
Código:
#contactar_css input .bginput{
color:#333333;
border-color:#A5ACB2 rgb(227, 232, 237) rgb(227, 232, 237) rgb(165, 172, 178);
border-width:1px;
border-style:solid;
height:20px;
width:150px;
font-size:11px;
padding:2px 5px 0px 10px;
margin:7px 5px 5px 5px;
background-color: #F7F4FF;
}
Tengo que recurrir a poner un class a parte como en el ej.
FORMULARIO CON TABLAS Código HTML:
<html>
<head>
<title>Formulario con Tablas</title>
<style type="text/css">
/* ESTE NO VA */
#contactar_tablas{
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
}
.bginput{
color:#333333;
border-color:#A5ACB2 rgb(227, 232, 237) rgb(227, 232, 237) rgb(165, 172, 178);
border-width:1px;
border-style:solid;
height:20px;
width:150px;
font-size:12px;
padding:2px 5px 0px 10px;
margin:7px 5px 5px 5px;
background-color: #F7F4FF;
}
.textcomentario {
color:#333333;
border-color:#A5ACB2 rgb(227, 232, 237) rgb(227, 232, 237) rgb(165, 172, 178);
border-width:1px;
border-style:solid;
width:300px;
font-size:12px;
padding:2px 5px 0px 10px;
margin:7px 5px 5px 5px;
background-color: #F7F4FF;
}
p{
font-size:11px;
}
</style>
</head>
<body>
<h4>Contactar</h4>
<form id="contactar_tablas" method="post" action="#">
<table>
<thead>
<tr><td colspan="2">
<p>Puedes utilizar este formulario para enviarnos cualquier tipo de información, pregunta o comentario relacionado con la web.</p>
</td></tr>
</thead>
<tbody>
<table width="500" border="0" align="center" cellpadding="5" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="200" valign="top"></td>
<td width="300" valign="top"> </td>
</tr>
<tr>
<td width="200" align="left" valign="middle">*Nombre:</td>
<td width="300" align="left" valign="middle"><input name="nombre" size="30" class="bginput" tabindex="5"/></td>
</tr>
<tr>
<td width="200" align="left" valign="middle">*Correo electrónico:</td>
<td width="300" align="left" valign="middle"><input name="email" size="30" class="bginput" tabindex="6"/></td>
</tr>
<tr>
<td width="200" align="left" valign="middle">*Pais:</td>
<td width="300" align="left" valign="middle"><input name="pais" size="30" class="bginput" tabindex="7"/></td>
</tr>
<tr>
<td width="200" align="left" valign="middle">*Asunto del Mensaje:</td>
<td width="300" align="left" valign="middle"><input name="asunto" size="30" class="bginput" value="" tabindex="8"/></td>
</tr>
<tr>
<td width="200" align="left" valign="top">*Texto:</td>
<td width="300" align="left" valign="top"><textarea name="texto" rows="5" cols="29" class="textcomentario" tabindex="9"></textarea></td>
</tr>
<tr align="right">
<td width="200" valign="top"></td>
<td width="300" valign="top"> </td>
</tr>
<tr align="right">
<td colspan="2"> <input name="submit" type="submit" value="Enviar" class="boton_enviar"/></td>
</tr>
</tbody>
</table>
</form> <!-- Fin formulario -->
</body>
</html> FORMULARIO CON CSS Código HTML:
<html>
<head>
<title>Formulario con CSS</title>
<style type="text/css">
#contactar_css{
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
}
#contactar_css input{
font-size:12px;
}
#contactar_css fieldset{
font-size:12px;
border:0;
}
#contactar_css label {
font-weight:bold;
}
/* NO VA */
#contactar_css input .bginput{
color:#333333;
border-color:#A5ACB2 rgb(227, 232, 237) rgb(227, 232, 237) rgb(165, 172, 178);
border-width:1px;
border-style:solid;
height:20px;
width:150px;
font-size:11px;
padding:2px 5px 0px 10px;
margin:7px 5px 5px 5px;
background-color: #F7F4FF;
}
.bginput{
color:#333333;
border-color:#A5ACB2 rgb(227, 232, 237) rgb(227, 232, 237) rgb(165, 172, 178);
border-width:1px;
border-style:solid;
height:20px;
width:150px;
font-size:12px;
padding:2px 5px 0px 10px;
margin:7px 5px 5px 5px;
background-color: #F7F4FF;
}
</style>
</head>
<body>
<h4>Contactar</h4>
Puedes utilizar este formulario para enviarnos cualquier tipo de información, pregunta o comentario relacionado con la web.
<form id="contactar_css" method="post" action="#">
<fieldset>
<legend></legend>
<label for="nombre">*Nombre:</label><input type="text" name="nombre" class="bginput" /><br />
<label for="correo">*Correo electrónico:</label><input type="text" name="correo" class="bginput" /><br />
<label for="pais">*Pais:</label><input type="text" name="pais" class="bginput" /><br />
<label for="asunto">*Asunto del Mensaje:</label><input type="text" name="asunto" class="bginput" /><br />
<label for="texto">*Texto:</label><input type="text" name="texto" class="bginput" /><br />
<input name="submit" type="submit" value="Enviar" class="boton_enviar"/>
</fieldset>
</form>
</body>
</html>
Muchas gracias de antemano.