Ingeniuz :: Desarrollador web

lunes, junio 06, 2005

CSS útil

Navegando por la red, encontré estos ejemplos en cssdrive que pueden ser muy útiles a la hora de confeccionar nuestros diseños de página con CSS.
Especialmente me ha gustado uno muy simple pero que me llama la atención. Yo sigo usando tablas para alinear los elementos en los formularios... muy mal por mí :P. Aprenderé la lección, ya que con css además, pesa menos.
Os dejo aquí el código de ejemplo de cómo hacerlo usando CSS:




El resultado



















El CSS



<style type="text/css">

label{
float: left;
width: 120px;
font-weight: bold;
}

input, textarea{
width: 180px;
margin-bottom: 5px;
}

textarea{
width: 250px;
height: 150px;
}

.boxes{
width: 1em;
}

#submitbutton{
margin-left: 120px;
margin-top: 5px;
width: 90px;
}

br{
clear: left;
}

</style>


El HTML



<form>

<label for="user">Name</label>
<input type="text" name="user" value="" />

<label for="emailaddress">Email Address:</label>
<input type="text" name="emailaddress" value="" />

<label for="comments">Comments:</label>
<textarea name="comments"></textarea>

<label for="terms">Agree to Terms?</label>
<input type="checkbox" name="terms" class="boxes" />

<input type="submit" name="submitbutton" id="submitbutton" value="Submit" />

</form>


Por cierto, ¿vosotros tambien os haceis un lio con vuestros archivos de estilos?, os dejo un
enlace (inglés) donde podemos encontrar algunos consejos útiles para organizar nuestro código.


 
Working on casas rurales / casas rurales & codigo postal & Salud y nutricion & tiendas + Padel, tiendas online