DTIC - Universitat Pompeu Fabra

Curso de Verano 2010
Estilos CSS para el Diseño Web
7. Posicionamiento y diseño con CSS
7.1 Clases vs IDs
Ya hemos visto el potencial y uso del modelo de caja, y hemos visto algunas cosas básicas de
posicionamiento, como las imágenes flotantes. Es momento de ver un poco más de este tema,
comenzando por las bases: las clases y los identificadores.
Cuándo usar cuál
La elección entre uso de una clase o un identificador es casi inmediato si pensamos en que los
identificadores deben ser únicos en nuestro HTML, mientras que las clases no tienen esa
restricción.
Así, la decisión es simple: si se trata de un bloque único, debemos usar un identificador, mientras
que si necesitamos asignar algo a múltiples elementos, debemos usar clases.
Es habitual que los identificadores, además de ser únicos, se usen para bloques claramente
identificables en nuestro diseño. Un encabezado, un pie de página o una zona de búsqueda son
zonas únicas en sí mismas, y por ello es muy simple pensar en ellas como un bloque con
identificador. Por ejemplo, algo así:
<div id=”header”>
<div id=”contents”>
<div id=”footer”>
Las clases, por otro lado, suelen usarse para elementos reusable y para bloques que tendremos
presente varias veces en una página. Por ejemplo:
<div id=”post-gallery”>
<a href=”#”><img class=”gallery-item” src=”foto1-thumbnail.jpg”></a>
<a href=”#”><img class=”gallery-item” src=”foto2-thumbnail.jpg”></a>
<a href=”#”><img class=”gallery-item” src=”foto3-thumbnail.jpg”></a>
<div>
No son excluyentes
Es muy importante tener presente que uno no entra en conflicto con el otro, uno puede tener un
elemento con clase e identificador al mismo tiempo. Por ejemplo, podríamos tener varios párrafos
con una clase determinada, y uno de ellos además tener un identificador. Por ejemplo:
<div id=”post-gallery”>
<a href=”#”><img class=”gallery-item” src=”thumb1.jpg” id=”main-pic”></a>
<a href=”#”><img class=”gallery-item” src=”thumb2.jpg”></a>
<a href=”#”><img class=”gallery-item” src=”thumb3.jpg”></a>
<div>
Esto es habitual cuando, además de diseño, necesitamos interactuar con los elementos del HTML
(por ejemplo, vía javascript 1).
1
Un tema fuera del alcance del curso. En JS, necesitamos en ocasiones acceder a los elementos HTML, y se hace a
través de su ID.
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
1
Curso de Verano 2010
Estilos CSS para el Diseño Web
7.2 Posicionamiento
Entremos al tema en cuestión: posicionamiento. Ya hemos hablado de que antes el diseño de la
estructura (el layout) se realizaba con tablas, pero lo más correcto hoy en día es usar sólo CSS para
ello 2, dejando al HTML hacer su trabajo real, que no es ocuparse de la presentación.
De hecho, existe el término CSS-P para referirse a un diseño sin tablas, con posicionamiento (de
ahí la P) hecho sólo con CSS.
Inline y block
Ya lo mencionamos, pero un recordatorio no está de más: los elementos HTML se comportan
como bloques (block) que rompen el flujo o como elementos en línea que siguen el flujo
(inline). Un block ocupa un área rectangular (que salta de línea, y que se sitúa expandiéndose
a lo ancho hasta donde su contenedor se lo permita), mientras que un inline sigue al texto,
limitándose al ancho que ocupa.
Con CSS, sin embargo, siempre podemos hacer que uno se convierta en otro, si afectamos sus
propiedades en la hoja de estilos. Veamos un ejemplo 3. En el HTML tenemos bloques con
contenido.
<div id="uno">Un DIV es, por defecto, un block</div>
<p>Un párrafo normal, que se comporta como bloque.</p>
<div id="dos">Un DIV que se comporta como inline.</div>
<p>Un párrafo con <a href="http://www.cinenganos.com">un enlace</a> que se
comporta como inline.</p>
<p>Otro párrafo que tiene <a class="bloque"
href="http://www.forodecine.com">otro enlace</a> que se comporta como
bloque.</p>
Que, con el CSS asociado, en el navegador se mostrará como sigue:
El CSS es el que sigue:
#uno {
background-color: #CCCCCC;
color: #000000;
border: 2px solid #AAAAAA;
padding: 2px 6px 2px 6px;
}
2
3
Y, en la práctica, es una de las capacidades que diferencia a los maquetadores web que están al día.
Ver 201.html y sus estilos en este tema.
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
2
Curso de Verano 2010
Estilos CSS para el Diseño Web
#dos{
color: #000000;
border: 2px solid #AAAAAA;
padding: 2px 6px 2px 6px;
display: inline;
background: #99CC00;
}
a {
color: #FFFFFF;
text-decoration: none;
padding: 1px 2px 1px 2px;
background: #006699;
}
a.bloque {
display: block;
background: #99CC00;
}
Veamos los detalles:
•
•
•
•
•
•
El primer div es block por defecto. Si vemos, al no asignar dimensiones el div se
extiende a todo lo ancho de su contenedor (body, en este caso), y ocupa el alto del
contenido. Es el comportamiento normal.
El párrafo que le sigue es block también, por lo que no intenta ponerse al lado del primer
div sino que se posiciona debajo, porque block no busca seguir el flujo, sino ser una caja
nueva.
El segundo div se muestra con display de inline, de modo que sólo se extiende al
ancho del contenido, ya que busca seguir el flujo normal.
El siguiente párrafo es un block por defecto, y por ello, como en el párrafo de antes,
aparece debajo.
Este párrafo tiene en su interior un enlace (por defecto es inline) que se comporta
normalmente.
El último párrafo tiene otro enlace, al que se ha asignado un display de block. Como
vemos, al ser un block, rompe el flujo, actuando como si se tratara de una caja. Saltando a
la siguiente línea, y ocupando todo el ancho al no tener dimensiones fijas.
Se trata de un ejemplo para evaluar el uso y comportamiento de los bloques que necesitaremos
en un diseño cualquiera. Les toca experimentar con las opciones. Para preguntas sobre el tema,
los foros están, como siempre, abiertos.
Aplicaciones de la caja
Ya hemos trabajado con las cajas, pero podemos reforzar y revisar algunos detalles particulares.
Comportamiento de márgenes
Si tenemos un CSS como el que sigue:
margin: 10px;
padding: 10px;
Sabemos que se define un margen de 10px a los cuatro lados, de modo que el espacio entre la caja
y el resto de bloques a su alrededor es de 10px.
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
3
Curso de Verano 2010
Estilos CSS para el Diseño Web
¿Qué pasa en un caso como el del ejemplo 4 que sigue? El HTML tiene tres bloques:
<div>Primer bloque</div>
<div>Segundo bloque</div>
<div>Tercer bloque</div>
Y el CSS asociado es este:
body{
margin: 0px;
padding: 0px;
}
div{
border: 1px solid #000000;
margin: 10px;
padding: 10px;
}
Con el borde visible para entender bien el efecto, y 10px de padding y margin en todos los lados
de los elementos div.
Si pensamos en la caja, estamos diciendo que, cada div tiene un margen inferior de de 10px y el
que le sigue tiene definido uno superior de 10px. ¿Verdad?
En el navegador se mostrará así:
Y aquí podemos ver un detalle peculiar: los márgenes no se suman. La separación entre los div es
de 10px, como puede apreciarse.
Es decir, el margen total entre los div es de 10px y no de 20px (10px del inferior del primero más
10px del superior del segundo). El margin se refiere al espacio alrededor de la caja, y así se
interpreta.
Elementos flotantes
En el tema de imágenes ya vimos cómo podemos usar elementos flotantes, lo que permite que
tengamos diseños con un control precio de dónde mostramos qué.
Como sabemos, podemos hacer que un elemento (o una caja 5) flote, como la imagen del código
de este ejemplo 6:
4
Ver 202.html.
Bastaría que se aplique a un elemento block, a un div con contenido, etc.
6
Ver 203.html.
5
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
4
Curso de Verano 2010
Estilos CSS para el Diseño Web
<img src="img/loremipsum.gif" width="200" height="200" alt="peppers"
class="featureimg" /> ...
Que gracias al CSS queda flotando:
.featureimg {
float: right;
border: 2px solid #000000;
margin: 0px 0px 10px 10px;
padding: 5px;
}
Logrando que en el navegador aparezca así:
Para entender mejor la posición de los bloques, vale la pena ver el orden de los elementos en el
HTML. La variante de este otro código de muestra 7 incluye el miso HTML y un ajuste de CSS (un
borde visible) para ver cada contenedor de manera explícita:
ul, h2, p{
border: 1px solid #990000;
}
Que provoca que en el navegador tengamos lo que se muestra en la imagen que sigue 8, con cada
bloque muy visible.
La imagen img del inicio del código, al flotar, rompe el flujo y deja su lugar al contenido siguiente
(la lista ul, seguida del primer párrafo p). Como podemos ver, la imagen flota y se sitúa a la
derecha, con lo que queda a la misma altura que el siguiente elemento (la lista), y por ello los
bordes superiores coinciden.
Al flotar la imagen, vemos que la caja de cada bloque siguiente (lista y párrafos) mantiene su
comportamiento de caja (ver los bordes) pero el contenido se ajusta para dejar espacio al
elemento que flota.
7
8
Ver 204.html.
En la siguiente página.
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
5
Curso de Verano 2010
Estilos CSS para el Diseño Web
La parte relevante (y evidente con los bordes) es que los elementos block ignoran la posición del
flotante, pero sus contenidos se ajustan para dejarle el espacio donde quede.
Romper la flotación
Para romper la flotación, en el sentido de que los elementos dejen de reubicarse al usar float, se
usa la propiedad clear. Esta propiedad se usa junto a float para ayudar a ‘limpiar’ las zonas de
flotación, cuando necesitamos que los elementos que están junto a la flotación dejen de seguir el
flujo.
La propiedad clear admite valor de left (para indicar que el elemento al que se aplica no
permite elementos flotantes a su izquieda), right (para indicar que no los permite a su derecha)
y both (indicando que no admite en ninguno de los dos lados).
Como ejemplo, podemos ver este otro código 9, donde se ha agregado una clase al segundo de los
párrafos:
...<p class="clear">Phasellus interdum consecte...
Que usa este CSS:
.clear{
clear: right;
}
Lo que provoca que el elemento no acepte flotantes a su lado derecho. Como la imagen flota a la
derecha, eso causa que el párrafo se mueva, saliendo d su sitio, hasta salir completamente del
área que flota.
9
Ver 205.html.
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
6
Curso de Verano 2010
Estilos CSS para el Diseño Web
En el navegador aparecerá como en la siguiente imagen:
Les toca experimentar el efecto. Pueden cambiar la flotación al otro lado, jugar con clear del
lado izquierdo, ajustar los márgenes de la imagen (que estaba con márgenes sólo de ciertos lados
y si se cambia la flotación necesitarían ajustes), etc.
Imágenes y texto
Un ejemplo de flotación nos permite aprovechar al máximo sus ventajas, en una aplicación muy
común, con texto e imagen flotantes, como se hace habitualmente con un logo y un slogan en la
cabecera de un sitio.
El código de muestra es el siguiente 10:
<div id="header">
<img src="img/logo-loremipsum.jpg" width="400" height="80" class="logo" />
<span class="slogan">Lorem ipsum dolor!</span></div>
Que incluye una cabecera con imagen (clase logo) y un span con el slogan, clase slogan.
En el navegador, aparecerá así:
10
Ver 206.html.
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
7
Curso de Verano 2010
Estilos CSS para el Diseño Web
Gracias al CSS que sigue:
#header .slogan {
font: italic bold 1.3em Georgia, "Times New Roman", Times, serif;
color: #006699;
background-color: transparent;
float: right;
margin-top: 1.5em;
margin-right: 1em;
}
#header .logo {
float: left;
width: 400px;
}
Donde se ha puesto el logo a flotar a un lado, y el slogan al otro.
Para experimentar, si agregan un borde a cada uno, como en ejemplos anteriores, podrán ver el
contenedor de cada uno de ellos (y el contendor de ambos, el div).
Sugiero experimenten con dimensiones de las cajas y contenedor, para ver el efecto que tienen si
se ajustan las dimensiones (por ejemplo, dar un tamaño grande a slogan).
7.3 Diseño líquido
El ejemplo anterior nos permite apreciar algo que pasa con el posicionamiento de los bloques. En
una ventana de tamaño estándar, el código se mostrará así:
Mientras que si reducimos el ancho de la ventana, al haber flotación, el logo sigue flotando, lo
mismo hace el slogan, que se acomoda como corresponde:
En el caso extremo, al reducir de más el ancho del navegador, la flotación provocaría esto:
Desplazando el elemento flotante que se queda sin espacio y por tanto rompe el diseño deseado.
Esto se relaciona con lo líquido que puede llegar a ser el layout de CSS.
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
8
Curso de Verano 2010
Estilos CSS para el Diseño Web
El concepto de líquido se relaciona con el hecho de que los distintos elementos contenedores de
la estructura del HTML pueden tener dimensiones variables (definidas como porcentaje de
pantalla por ejemplo).
Un contenedor líquido cambiará su tamaño si se ajusta la dimensión de la ventana del
navegador.
Este código de muestra 11 incluye este concepto:
<div id="liquido">
<div id="fijo">Este es fijo.</div>
Este es líquido.
</div>
El código tiene dos div, que en el CSS quedan así:
#liquido{
background: #99CC00;
border: 3px solid #999900;
color: #333333;
margin: 10px;
padding: 10px;
}
#fijo
{
color: #FFFFFF;
background: #006699;
border: 2px solid #003366;
margin: 10px;
padding: 10px;
height: 150px;
width: 150px;
}
El #fijo se ha definido con dimensiones concretas, dentro del #lquido, que no tiene
dimensiones.
Esta ausencia de dimensiones hace que el bloque se extienda hasta el máximo que le permita la
ventana, con lo que, si aumentamos la ventana del navegador, el contenedor cambiará sus
dimensiones, como en estas imágenes:
11
Ver 301.html.
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
9
Curso de Verano 2010
Estilos CSS para el Diseño Web
Pueden experimentar con más texto, y flotando los elementos. Por defecto, un contenedor al que
no se define un tamaño fijo, se comportará líquido, como en distintos ejemplos que hemos visto
antes.
Márgenes variables
La noción de liquidez debida a valores porcentuales servirá para reforzar las implicaciones de los
ajustes. Este código 12 nos permite verlo:
<div id="uno">Uno</div>
<div id="dos">Uno</div>
Dos div, uno seguido del otro. Con este CSS para los bloques en cuestión:
#uno{
background: #99CC00;
border: 3px solid #999900;
color: #333333;
padding: 10px;
margin-right: 15%;
margin-left: 15%;
}
El primer bloque tundra un margen a cada lado (izquierda y derecha) de 15%. Es decir, el
contenedor usará sólo un 70% de la pantalla 13 (ya que 15% + 15% se va en márgenes laterales).
#dos
{
color: #FFFFFF;
background: #006699;
border: 2px solid #003366;
padding: 10px;
width: 50%;
margin-left: 15%;
}
El segundo bloque tiene un ancho del 50% de su contenedor, con un margen izquierdo de 15%. Sin
indicarlo, esto implica que el margen derecho será variable, de un 35% de la pantalla, lo restante.
En el navegador aparecerá como en la siguiente imagen.
12
Ver 302.html.
Estrictamente hablando, del contenedor que lo incluye, pero en este caso es body, directamente el cuerpo en la
pantalla del navegador.
13
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
10
Curso de Verano 2010
Estilos CSS para el Diseño Web
Y pueden variar la ventana para ver el efecto. Al estar porcentualmente definidos, es evidente el
layout líquido en estos casos.
Estructuras usuales: columnas
Veamos dos ejemplos muy comunes de cómo se explota el diseño líquido de los CSS: el uso de
columnas14, como en la gran mayoría de las páginas web que hay. Y, con CSS, sin tablas.
Dos columnas
El siguiente HTML15 tiene un ejemplo de estructura básica: cabecera, pie de página, y contenido en
dos columnas, una de navegación y otra de contenido como tal.
<div
<div
<div
<div
id="header"></div>
id="nav"></div>
id="content"></div>
id="footer"></div>
Con este CSS para los bloques:
#header{
height: 50px;
margin-bottom: 10px;
background: #666666;}
#nav{
float: left;
width: 25%;
height: 150px;
background-color: #999999;
margin-bottom: 10px;}
#content{
float: left;
margin-left: 5%;
width: 65%;
height: 150px;
margin-bottom: 10px;
margin-right: 5%;
background: #CCCCCC;}
#footer{
clear: both;
height: 50px;
background-color: #666666;
margin-bottom: 10px;}
Donde destaca que la cabecera #header es un bloque ordinario, seguida de dos bloques flotantes
(#nav y #content) y un #footer que, con clear, rompe la flotación y sigue el flujo.
14
Son sólo posibles variantes. Hay múltiples formas de hacerlo con CSS-P, algunas técnicas más complejas que otras.
La intención es que comprendan el funcionamiento, y que pudieran pasar a CSS-P más avanzado en un futuro.
15
Ver 303.html.
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
11
Curso de Verano 2010
Estilos CSS para el Diseño Web
En el navegador, se verá así:
Donde, si variamos la ventana del navegador, podemos ver el comportamiento líquido de los
bloques de contenido. La navegación tiene un 25% del ancho, el contenido 65%, lo que deja un
margen lateral para el contenido, a ambos lados, de un 5% en cada lado (suma = 100%).
Como nota importante, la altura en el CSS de los bloques #nav y #content es sólo para dar
visibilidad, con contenido real, no se necesita la altura de estos bloques.
Como variante, pueden experimentar con los anchos, para que, por ejemplo, se invirtieran los
casos y la navegación quedase a la derecha y no a la izquierda.
Tengan cuidado con los anchos totales, ya que si la suma da algo superior al 100%, se puede
romper la estructura (por ejemplo, si no se tienen en cuenta los % de los márgenes y se definen
columnas de 25% y 75% que ya suman 100% pero a lo que además se suman los márgenes si
existen)
Líquido y fijo al mismo tiempo
Es habitual que la zona de navegación no se deje líquida, y se mantenga fija. El ejemplo de
código 16 incluye este ajuste, que en el navegador mantiene fija la columna de navegación.
Este código difiere del anterior ya que la columna de navegación flota, pero la de contenidos no lo
hace, de modo que, como sabemos de otros ejemplos, se coloca siguiendo la flotación.
16
Ver 304.html.
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
12
Curso de Verano 2010
Estilos CSS para el Diseño Web
En el CSS, tenemos estos bloques:
#nav
{
float: left;
width: 180px;
height: 150px;
background-color: #999999;
margin-bottom: 10px;
}
#content
{
margin: 0 20px 10px 200px;
height: 150px;
background: #CCCCCC;
}
Donde podemos ver que #nav flota, pero que #content sólo ajusta sus márgenes, para que el
contenedor establezca sus límites teniendo en cuenta el tamaño del elemento flotante.
Como #nav mide 180px de ancho, #content establece un margen izquierdo de 200px, para que
el eespacio entre ellos quede de 20px. Con estos ajustes, el elemento queda siguiendo la flotación,
pero con control completo de sus márgenes y posición.
Para entender mejor esto último, puede verse esta variante 17:
#content
{
height: 150px;
background: #CCCCCC;
border: 5px solid #000000;
}
A la que se ha quitado el margen y se ha puesto un borde visible para ver el contenedor real.
En el navegador, se muestra así:
Donde podemos ver que #content sigue la flotación, con su margen izquierdo en el extremo.
17
Ver 305.html.
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
13
Curso de Verano 2010
Estilos CSS para el Diseño Web
Si cambiamos un poco el CSS 18, de modo que quede así:
#content
{
margin: 0 20px 10px 200px;
height: 150px;
background: #CCCCCC;
border: 5px solid #000000;
}
Es decir, como en el primer ejemplo, pero con borde visible para contrastar, podemos ver la
diferencia y la relevancia que tiene el margen en este caso, al seguir la flotación de #nav.
En el navegador:
Tres columnas
Los mismos principios se pueden llevar a tres columnas.
El código de ejemplo 19 incluye tres bloques:
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
Que, con su CSS, permiten ajustar las columnas –flotantes- con mucha precisión:
#col1
{
float: left;
width: 48%;
margin-left: 3%;
height: 75px;
background: #666666;
}
18
19
Ver 306.html.
Ver 307.html.
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
14
Curso de Verano 2010
Estilos CSS para el Diseño Web
#col2
{
float: left;
width: 20%;
margin-left: 3%;
background: #999999;
height: 75px;
}
#col3
{
float: left;
width: 20%;
margin-left: 3%;
background: #CCCCCC;
height: 75px;
}
Que en el navegador se mostrará así:
Si observamos con detalle, podemos ver que la primera columna usa un 51% (48% y 3% de
margen), la segunda un 23% (20% + 3%) y que la última columna también tiene un 23%.
La suma, en este caso, es de 97%. Repartir el porcentaje restante 20 es una opción, pero depende
de nuestras necesidades. Al usar valores porcentuales no siempre podemos entrar en precisión
total, y es habitual que las sumas no lleguen siempre a 100%.
A estas alturas, agregar cabecera y pie de página a este layout debería ser muy simple ;-) Les
queda como algo a experimentar.
¡Experimentar!
Les toca seguir con este tema y las estructuras de dos y tres columnas (que son muy habituales).
Piensen que los div de muestra (tanto en dos como en tres columnas) pueden tener cualquier
contenido (más div, imágenes, texto, distintos bloques anidados, etc.), de modo que las
posibilidades finales de layout son ilimitadas.
Para uso más complejo, sugiero usen la propiedad min-height, que define la altura mínima que
se espera en un bloque. Por ejemplo, para que la zona de navegación tenga una altura mínima
independiente del alto de los otros bloques.
Los foros, como siempre, están siempre abiertos para resolver cualquier duda.
20
Que de momento se quedaría sin asignar. El margen derecho de la tercera columna quedaría entonces más variable,
al ser el único sin valor asignado, pero al entrar en porcentajes, no se tiene un control absoluto ya que el 3% de algo
variable (la ventana del navegador) dará a veces ciertas variaciones mínimas.
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
15
Curso de Verano 2010
Estilos CSS para el Diseño Web
Las posibilidades
Como extra a este tema, el código final de muestra 21 de este tema incluye una variante extrema
del uso de lo líquido. Es una muestra para que vean el alcance y las posibilidades que hay (¡y sin
usar tablas!).
Obviamente, se trata de un layout mucho más avanzado pero lo incluyo sólo como ejemplo de lo
que se puede llegar a hacer sin tablas, como motivación y como ejemplo de potencial. En el
código, sólo hay mucha flotación y ajustes como los que conocemos, para que el flujo haga justo lo
que deseamos que haga.
Destaca el uso de bloques que, sin contenido, sólo rompen flotaciones y aseguran un flujo:
<div class="spacer"> </div>
Que usan este CSS:
.spacer{float: left; width: 3%; clear: both;}
Y, finalmente, otra cosa a destacar es la presencia de un selector de adyacentes.
h3+p {margin-top: .2em;}
Que indica, con el signo +, que se aplica a los <p> que estén inmediatamente después de un <h3>.
En el navegador, tenemos este resultado:
21
Ver 308.html.
Universitat Pompeu Fabra
Prof. Alejandro Ramírez
16