Libros Web
Libros Web
Libros Web
Formularios
11.1. Estilos bsicos
11.1.1. Mostrar un botn como un enlace
Como ya se vio anteriormente, el estilo por defecto de los enlaces se puede modificar para
que se muestren como botones de formulario. Ahora, los botones de formulario tambin se
pueden modificar para que parezcan enlaces.
.enlace {
border: 0;
padding: 0;
background-color: transparent;
color: blue;
border-bottom: 1px solid blue;
}
Por defecto, los campos de texto de los formularios no incluyen ningn espacio de relleno,
por lo que el texto introducido por el usuario aparece pegado a los bordes del cuadro de
texto.
form.elegante input {
padding: .2em;
}
Los elementos <input> y <label> de los formularios son elementos en lnea, por lo
que el aspecto que muestran los formularios por defecto, es similar al de la siguiente
imagen:
Figura 11.3 Aspecto por defecto que muestran los formularios
<form>
<fieldset>
<legend>Alta en el servicio</legend>
<label for="nombre">Nombre</label>
<input type="text" id="nombre" />
<label for="apellidos">Apellidos</label>
<input type="text" id="apellidos" size="50" />
<label for="dni">DNI</label>
<input type="text" id="dni" size="10" maxlength="9" />
<label for="contrasena">Contrasea</label>
<input type="password" id="contrasena" />
Aprovechando los elementos <label>, se pueden aplicar unos estilos CSS sencillos que
permitan mostrar el formulario con el aspecto de la siguiente imagen:
Figura 11.4 Mostrando las etiquetas label encima de los campos del formulario
En primer lugar, se muestran los elementos <label> como elementos de bloque, para que
aadan una separacin para cada campo del formulario. Adems, se aade un margen
superior para no mostrar juntas todas las filas del formulario:
label {
display: block;
margin: .5em 0 0 0;
}
.btn {
display: block;
margin: 1em 0;
}
Para mostrar un formulario tal y como aparece en la imagen anterior no es necesario crear
una tabla y controlar la anchura de sus columnas para conseguir una alineacin perfecta.
Sin embargo, s que es necesario aadir un nuevo elemento (por ejemplo un <div>) que
encierre a cada uno de los campos del formulario (<label> y <input>). El esquema de
la solucin propuesta es el siguiente:
Por tanto, en el cdigo HTML del formulario anterior se aaden los elementos <div>:
<form>
<fieldset>
<legend>Alta en el servicio</legend>
<div>
<label for="nombre">Nombre</label>
<input type="text" id="nombre" />
</div>
<div>
<label for="apellidos">Apellidos</label>
<input type="text" id="apellidos" size="35" />
</div>
...
</fieldset>
</form>
Y en el cdigo CSS se aaden las reglas necesarias para alinear los campos del formulario:
div {
margin: .4em 0;
}
div label {
width: 25%;
float: left;
}
Los formularios complejos con decenas de campos pueden ocupar mucho espacio en la
ventana del navegador. Adems del uso de pestaas para agrupar los campos relacionados
en un formulario, tambin es posible mostrar el formulario a dos columnas, para aprovechar
mejor el espacio.
form fieldset {
float: left;
width: 48%;
}
<form>
<fieldset>
...
</fieldset>
...
</form>
Si se quiere mostrar el formulario con ms de dos columnas, se aplica la misma regla pero
modificando el valor de la propiedad width de cada <fieldset>. Si el formulario es
muy complejo, puede ser til agrupar los <fieldset> de cada fila mediante
elementos <div>.
Una de las mejoras ms tiles para los formularios HTML consiste en resaltar de alguna
forma especial el campo en el que el usuario est introduciendo datos. Para ello, CSS define
la pseudo-clase :focus, que permite aplicar estilos especiales al elemento que en ese
momento tiene el foco o atencin del usuario.
input:focus {
border: 2px solid #000;
background: #F3F3F3;
}
Por otra parte, los navegadores alinean por defecto las pginas web a la izquierda de la
ventana. Cuando la resolucin de la pantalla es muy grande, la mayora de pginas de
anchura fija alineadas a la izquierda parecen muy estrechas y provocan una sensacin de
vaco.
La solucin ms sencilla para evitar los grandes espacios en blanco consiste en crear
pginas con una anchura fija adecuada y centrar la pgina horizontalmente respecto de la
ventana del navegador. Las siguientes imgenes muestran el aspecto de una pgina centrada
a medida que aumenta la anchura de la ventana del navegador.
Figura 12.1 Pgina de anchura fija centrada mediante CSS
Utilizando la propiedad margin de CSS, es muy sencillo centrar una pgina web
horizontalmente. La solucin consiste en agrupar todos los contenidos de la pgina en un
elemento <div> y asignarle a ese<div> unos mrgenes laterales automticos.
El <div> que encierra los contenidos se suele llamar contenedor (en ingls se
denomina wrapper o container):
#contenedor {
width: 300px;
margin: 0 auto;
}
<body>
<div id="contenedor">
<h1>Lorem ipsum dolor sit amet</h1>
...
</div>
</body>
Como se sabe, el valor 0 auto significa que los mrgenes superior e inferior son iguales
a 0 y los mrgenes laterales toman un valor de auto. Cuando se asignan mrgenes
laterales automticos a un elemento, los navegadores centran ese elemento respecto de su
elemento padre. En este ejemplo, el elemento padre del <div> es la propia pgina (el
elemento <body>), por lo que se consigue centrar el elemento <div>respecto de la
ventana del navegador.
#contenedor {
width: 70%;
margin: 0 auto;
}
Aunque centrar una pgina web horizontalmente es muy sencillo, centrarla verticalmente es
mucho ms complicado. Afortunadamente, no es muy comn que una pgina web aparezca
centrada de forma vertical. El motivo es que la mayora de pginas web son ms altas que
la ventana del navegador, por lo que no es posible centrarlas verticalmente.
A continuacin se muestra la forma de centrar una pgina web respecto de la ventana del
navegador, es decir, centrarla tanto horizontalmente como verticalmente.
#contenedor {
width: 300px;
height: 250px;
margin: auto;
}
<body>
<div id="contenedor">
<h1>Lorem ipsum dolor sit amet</h1>
...
</div>
</body>
Si el valor auto se puede utilizar para que los mrgenes laterales se adapten
dinmicamente, tambin debera ser posible utilizar el valor auto para los mrgenes
verticales. Desafortunadamente, la propiedadmargin: auto no funciona tal y como se
espera para los mrgenes verticales y la pgina no se muestra centrada.
En primer lugar, se asigna una altura y una anchura al elemento que encierra todos los
contenidos de la pgina. En la primera figura, los contenidos de la pgina tienen una
anchura llamada width y una altura llamada height que son menores que la anchura y
altura de la ventana del navegador. En el siguiente ejemplo, se supone que tanto la anchura
como la altura de la pgina es igual a 500px:
#contenedor {
width: 500px;
height: 500px;
}
<body>
<div id="contenedor">
<h1>Lorem ipsum dolor sit amet</h1>
...
</div>
</body>
#contenedor {
width: 500px;
height: 500px;
position: absolute;
top: 50%;
left: 50%;
}
Como se desprende de la imagen anterior, la pgina web debe moverse hacia arriba una
cantidad igual a la mitad de su altura y debe desplazarse hacia la izquierda una cantidad
equivalente a la mitad de su anchura. Utilizando las propiedades margin-
top y margin-left con valores negativos, la pgina se desplaza hasta el centro de la
ventana del navegador.
#contenedor {
width: 500px;
height: 500px;
position: absolute;
top: 50%;
left: 50%;
Con las reglas CSS anteriores, la pgina web siempre aparece centrada verticalmente y
horizontalmente respecto de la ventana del navegador. El motivo es que la anchura/altura de
la pgina son fijas (propiedades width y height), el desplazamiento necesario para
centrarla tambin es fijo (propiedades margin-top y margin-left) y el
desplazamiento hasta el centro de la ventana del navegador se calcula dinmicamente
gracias al uso de porcentajes en las propiedades top y left.
Para centrar una pgina slo verticalmente, se debe prescindir tanto del posicionamiento
horizontal como del desplazamiento horizontal:
#contenedor {
width: 500px;
height: 500px;
position: absolute;
top: 50%;
El objetivo de este diseo es definir una estructura de pgina con cabecera y pie, un men
lateral de navegacin y una zona de contenidos. La anchura de la pgina se fija en 700px, la
anchura del men es de150px y la anchura de los contenidos es de 550px:
Figura 12.8 Esquema del diseo a 2 columnas con cabecera y pie de pgina
La solucin CSS se basa en el uso de la propiedad float para los elementos posicionados
como el men y los contenidos y el uso de la propiedad clear en el pie de pgina para
evitar los solapamientos ocasionados por los elementos posicionados con float.
<body>
<div id="contenedor">
<div id="cabecera">
</div>
<div id="menu">
</div>
<div id="contenido">
</div>
<div id="pie">
</div>
</div>
</body>
En los estilos CSS anteriores se ha optado por desplazar tanto el men como los contenidos
hacia la izquierda de la pgina (float: left). Sin embargo, en este caso tambin se
podra desplazar el men hacia la izquierda (float:left) y los contenidos hacia la
derecha (float: right).
#contenedor {
}
#cabecera {
}
#menu {
float: left;
width: 15%;
}
#contenido {
float: left;
width: 85%;
}
#pie {
clear: both;
}
Si se indican la anchuras de los bloques que forman la pgina en porcentajes, el diseo final
es dinmico. Para crear diseos de anchura fija, basta con establecer las anchuras de los
bloques en pxel.
Adems del diseo a dos columnas, el diseo ms utilizado es el de tres columnas con
cabecera y pie de pgina. En este caso, los contenidos se dividen en dos zonas
diferenciadas: zona principal de contenidos y zona lateral de contenidos auxiliares:
Figura 12.10 Esquema del diseo a tres columnas con cabecera y pie de pgina
La solucin CSS emplea la misma estrategia del diseo a dos columnas y se basa en utilizar
las propiedades float y clear:
Figura 12.11 Propiedades CSS necesarias en el diseo a 3 columnas con cabecera y pie de
pgina
El cdigo HTML y CSS mnimos para definir la estructura de la pgina sin aplicar ningn
estilo adicional son los siguientes:
#contenedor {
}
#cabecera {
}
#menu {
float: left;
width: 15%;
}
#contenido {
float: left;
width: 85%;
}
#contenido #principal {
float: left;
width: 80%;
}
#contenido #secundario {
float: left;
width: 20%;
}
#pie {
clear: both;
}
<body>
<div id="contenedor">
<div id="cabecera">
</div>
<div id="menu">
</div>
<div id="contenido">
<div id="principal">
</div>
<div id="secundario">
</div>
</div>
<div id="pie">
</div>
</div>
</body>
El cdigo anterior crea una pgina con anchura variable que se adapta a la ventana del
navegador. Para definir una pgina con anchura fija, solamente es necesario sustituir las
anchuras en porcentajes por anchuras en pxel.
Al igual que suceda en el diseo a dos columnas, se puede optar por posicionar todos los
elementos mediante float: left o se puede utilizar float: left para el men y la
zona principal de contenidos yfloat: right para el contenedor de los contenidos y la
zona secundaria de contenidos.
Sin embargo, la mayora de las veces sera conveniente una solucin intermedia: que la
anchura de la pgina sea variable y se adapte a la anchura de la ventana del navegador, pero
respetando ciertos lmites. En otras palabras, que la anchura de la pgina no sea tan
pequea como para que no se puedan mostrar correctamente los contenidos y tampoco sea
tan ancha como para que las lneas de texto no puedan leerse cmodamente.
CSS define cuatro propiedades que permiten limitar la anchura y altura mnima y mxima
de cualquier elemento de la pgina. Las propiedades son max-width, min-
width, max-height y min-height.
Propiedad max-width
Valores unidad de medida | porcentaje | none | inherit
Se aplica a Todos los elementos salvo filas y grupos de filas de tablas
Valor inicial none
Descripcin Permite definir la anchura mxima de un elemento
Propiedad min-width
Valores unidad de medida | porcentaje | inherit
Se aplica a Todos los elementos salvo filas y grupos de filas de tablas
Valor inicial 0
Descripcin Permite definir la anchura mnima de un elemento
Propiedad max-height
Valores unidad de medida | porcentaje | none | inherit
Se aplica a Todos los elementos salvo columnas y grupos de columnas de tablas
Valor inicial none
Descripcin Permite definir la altura mxima de un elemento
Propiedad min-height
Valores unidad de medida | porcentaje | inherit
Se aplica a Todos los elementos salvo columnas y grupos de columnas de tablas
Valor inicial 0
Descripcin Permite definir la altura mnima de un elemento
De esta forma, para conseguir un diseo de anchura variable pero controlada, se podran
utilizar reglas CSS como la siguiente:
#contenedor {
min-width: 500px;
max-width: 900px;
}
Las propiedades que definen la altura y anchura mxima y mnima se pueden aplicar a
cualquier elemento, aunque solamente suelen utilizarse para estructurar la pgina. En
general, las propiedades ms utilizadas son max-width y min-width, ya que no es muy
habitual definir alturas mximas y mnimas.
div {
max-width: 800px;
width: expression(document.body.clientWidth > 801? "800px": "auto");
}