Ud 4 Hojas de estilo Kompozer pdf

(1)

1 1. Creación de hojas de estilo utilizando Kompozer.

Una vez leídos los apuntes anteriores pondremos en práctica la creación de una hoja de estilos utilizando el programa Kompozer.

PRACTICA 8:

Abre con KompoZer (menú Archivo → Abrir archivo), la página estilos_sencillos.html que encontrarás aquí.

1. En KompoZer, pulsa el botón CaScadeS de la parte superior para acceder al editor CSS.

2. Pulsa en el icono de la paleta (arriba a la izquierda) para definir una nueva regla.

3. Escribe body como nombre de la regla y pulsa en Crear nueva regla de estilo.

4. Pulsa en la pestaña Texto.

5. En Tipo de letra, marca Usar tipo de letra personalizado y escribe Verdana, Arial, sans-serif. En Tamaño de la letra, escribe 15px.

6. En Color, introduce #735846.

7. En Alineación, selecciona Justificado.

8. Ve a la pestaña Fondo, y en Color introduce #3d2e2a.

9. Vuelve a pulsar el icono de la paleta a la izquierda, para definir una nueva regla.

10. Dale el nombre h1 y pulsa crear regla.

11. En la pestaña Texto, asígnale el Color #d38451 y el Tamaño de letra 180%.

12. Haz clic en la pestaña Caja. Dale márgenes Superior de 20px e Izquierdo de 80px.

13. Siguiendo los pasos anteriores, crea una nueva regla con el nombre h2, h3.

14. En la pestaña Texto, establece el Tipo de letra personalizado Georgia, Times, serif, tamaño 150% y color #A52A2A.

15. En la pestaña Caja, establece el margen Superior a 0 y el Izquierdo a 30px.

16. Define una nueva regla para el elemento h3, que cambie su Color de texto a #B8860B.

17. Define un nuevo estilo para los párrafos (p).

18. En la pestaña Texto, cambia la altura de línea a 1.5em. En la pestaña Caja, establece los márgenes a 35px.

(2)

2 tiene aplicada el div donde está todo el texto.

21. Asígnales un margen de 0 en la parte superior, y de 20px al resto. Además dale el Color de Fondo #f5e4cc.

22. Crea una última regla para la clase .azul.

23. En la pestaña Texto, en Peso de la fuente elige Negrita, y en Color #6C6CCA.

2. El HTML del menú.

El menú es un elemento fundamental de nuestra web, y hemos de dedicarle una atención especial. Para ello vamos a visualizar el siguiente vídeo.

Básicamente, el menú es un conjunto de enlaces a las distintas partes de nuestro sitio, y lo más habitual es encontrarlo en el html de la página, o en un archivo javascript. De momento, vamos a ver cómo crearlo desde el HTML.

La estructura puede ser cualquiera: podemos hacer un menú con divs, con tablas, etc. Pero lo más común, por ser una estructura sencilla de manejar, es utilizar una lista (<ul></ul>), y está forma es la que explicaremos. Si desactivamos los estilos del navegador (en Firefox, menú Ver → Estilo de página → Sin estilo; IE no tiene esta opción) o vemos el código fuente de webs como www.elpais.es o www.marca.es, podremos encontrar que en el lugar del menú aparece una lista.

Por tanto, cada elemento del menú es un elemento de la lista <li></li>. El elemento, contendrá normalmente un enlace (<a href=""></a>) a una página del sitio.

Observa que hemos el menú de nuestro ejemplo, siguiendo esta estructura:

<ul>

<li><a href="index.html">Inicio</a></li>

(3)

3 2.1. Estilo básico del menú:

Una vez creado el menú, todo lo referente a su aspecto lo haremos utilizando estilos CSS. Lo más cómodo será darle un id, por ejemplo id="menu". De esta manera podremos referirnos la menú como ul#menu, y a sus elementos como ul#menu li.

Las listas se muestran casi igual en IE que en Firefox, pero en el primero se desplazan hacia la derecha utilizando margin, y en el segundo padding. Para no liarnos, podemos comenzar por poner ambos a 0, y ya les daremos algún valor si lo creemos necesario.

Otra cosa característica de las listas son las viñetas. Podemos quitarlas con la propiedad list-style-type: none;, o utilizar una imagen con la propiedad list-style-image: url(imagen.png);.

Al final los elementos de la lista tendrán el aspecto de botones que se pueden pulsar. Pero esto no es cierto, ya que el enlace sólo está en el texto, porque la etiqueta <a> es un elemento en línea que se ajusta a su contenido. Podemos cambiar este comportamiento con aplicándole a los enlaces del menú la regla display: block. Esto lo convierte en un elemento de bloque, y hace que ocupe todo su contenedor.

Daremos un formato apropiado al texto, a los enlaces, y añadiremos un borde a los elementos para diferenciarlos. Todo esto en función del diseño que queramos conseguir.

ul#menu {

margin: 0; padding: 0;

list-style-type: none; }

#menu li {

background-color: #AF7051; border: #5F4232 3px solid; margin: 1px;

} #menu a {

color: #F0D7B5;

text-decoration:none; display: block; padding: 2px;

}

 Inicio

 Flores

 Nosotros

 Contacto

(4)

4 2.2. Posición de los elementos:

Por defecto, los elementos de la lista se muestran uno debajo de otro. Pero por cuestiones de diseño, podemos preferir que se muestren en horizontal, uno al lado del otro. Esto podemos conseguirlo, por ejemplo poniendo los elementos como flotantes.

#menu li {

float: left; }

También podemos ponerlos en horizontal con la propiedad display: inline;. En este caso, lo mostramos como elementos en línea, por lo que no podremos regular su tamaño.

2.3. Tamaño de los elementos:

Por defecto, el ancho (width) de una lista es del 100% del elemento que la contiene. Su alto (height) depende de la cantidad de elementos que contenga. El ancho de los elementos es del 100% de la lista cuando están en vertical, y ajustado al contenido cuando están en horizontal. El alto, se ajusta siempre al contenido.

Por cuestiones estéticas, puede que queramos personalizar estos tamaños. Por ejemplo, para que todos los elementos que están en línea tengan el mismo ancho, basta con definir un ancho con la propiedad width, suficiente para contener al elemento mayor:

#menu li {

(5)

5 Si estamos utilizando los enlaces con display: block, debemos de darle el mismo alto para que lo llene todo. Otra opción sería definir el tamaño sobre los enlaces, ya que los elementos de lista flotantes se ajustarán al tamaño.

Recuerda, que siempre puedes centrar horizontalmente el contenido de un elemento con la propiedad text-align: center;.

Del mismo modo, podemos definir un alto con la propiedad height.

#menu li {

width: 150px;

text-align: center; height: 30px;

}

En CSS no existe una propiedad para centrar verticalmente el contenido de un elemento. Pero en casos como éste, en el que sólo tenemos una línea de texto, podemos utilizar un truco. Si al alto de la línea (la propiedad line-height) le damos el mismo tamaño que el alto del elemento (en el ejemplo anterior, habría que añadir line-height: 30px;), el texto se mostrará centrado verticalmente.

2.4. Distintos estilos del elemento:

(6)

6 Ejercicio 1: Crear menús básicos (I)

Vamos a crear un menú, con aspecto de una barra horizontal. Al pasar el cursor por los distintos elementos, estos alternarán el color de texto y fondo.

1. Crea una nueva página de HTML.

2. Escribe el html de la lista con los enlaces, asignándole el id menu1.

3. En la cabecera de la página, crea una etiqueta de estilo: <style type="text/css"> ... </style>.

4. Define el selector ul#menu1.

5. Al selector ul#menu1, quítale los márgenes, padding, y estilo de la lista. Dale también el formato general al texto como aparece a continuación:

ul#menu1 {

margin: 0; padding: 0;

list-style-type: none; font-family: sans-serif; font-size: 16px;

font-weight: bold; }

6. Define el selector ul#menu1 li para los elementos del menú. 7. A los elementos, les daremos flotamiento a la izquierda (float: left;) para que aparezcan en la misma línea, un alto específico (height: 2.5em), y el mismo alto de línea (line-height: 2.5em;) para que se centre verticalmente, además de los estilos para conseguir el diseño que buscamos. Introduce los estilos:

ul#menu1 li {

background-color: #AF7051; float: left;

height:2.5em;

line-height:2.5em; border-color: #AF7051; border-style: solid; border-width: 3px 0; }

(7)

7

ul#menu1 a {

color: #F0D7B5;

text-decoration:none; padding: 0 20px;

display: block; height: 100%; }

9. Para cambiar el color del fondo al posar el ratón, utilizaremos el selector ul#menu1 li:hover, y para cambiar el color del texto, el selector ul#menu1 li:hover a. Declara los siguientes estilos:

#menu1 li:hover {

background-color: #F0D7B5; }

#menu1 li:hover a { color: #AF7051; }

10. Guarda la página y pruébala en el navegador. Utilizaremos esta página en el siguiente ejercicio.

11. Observa, que al declarar los tamaños en em, si cambias el tamaño de la fuente, cambia el tamaño de los elementos manteniendo la proporción.

Ejercicio 2: Crear menús básicos (II)

Vamos a crear un menú vertical, que tendrá un ancho fijo de 150px. Al pasar el cursor sobre los elementos, se resaltarán, desplazando un poco el elemento. Además, habrá un estilo distinto para el elemento que indique la página actual.

1. A continuación de la lista del primer ejercicio, en el código HTML, crea una línea horizontal, que rompa el flotamiento, escribiendo <hr style="clear: both;" />.

2. Copia la lista del ejercicio anterior, debajo de la línea. 3. Cambia el id="menu1" por id="menu2".

4. Define el selector ul#menu2.

(8)

8

ul#menu2 {

margin: 0;

padding: 0;

list-style-type: none; font-family: sans-serif; font-size: 16px;

font-weight: bold;

background-color: #6FA3FF; padding: 5px 7px;

width: 150px; }

6. Define el selector ul#menu2 li para el estilo de los elementos del menú.

7. En este caso, por el diseño que buscamos, debemos de aplicar los colores y bordes. Como queremos que los elementos sean un poco más altos, también podemos aumentar el padding. Introduce los estilos que aparecen a continuación:

ul#menu2 li {

background-color: #5F82BF; margin:1px;

text-align:center; border-color: #B5C4DF; border-width: 1px 5px;

border-style: solid double; }

8. Y como el texto es un enlace, cambiamos el estilo de los enlaces del menú, con el selector #menu2 a { color: #B5C4DF; text-decoration:none; padding: 5px; display: block;} al que le hemos dado el color y quitado el subrayado.

9. Ya tenemos el estilo normal. Utilizando la pseudoclase :hover, define el estilo para cuando el cursor esta sobre el elemento, declarando el selector #menu2 li:hover.

10. Para conseguir el desplazamiento, añade al selector anterior posicionamiento relativo, y un ligero desplazamiento hacia la derecha #menu2 li:hover { position: relative; right: -5px; }.

11. Añade el estilo #menu2 li:hover a { color: white; } para que el color del enlace cambia al pasar el cursor.

12. Nos queda crear una clase para el elemento seleccionado. Crea una clase llamada actual, declarando el selector #menu2 li.actual.

(9)

9

#menu2 li.actual {

border-color: #D1DCEF; border-style: solid;

background-color: #7495CF; }

#menu2 li.actual a{ color: #EFF5FF; }

14. Asígnale a alguno de los elementos del menú la clase actual.

15. Guárdalo y pruébalo.

Ejercicio 3: Crear menús básicos (III)

Vamos a definir los estilos para el menú de nuestra página de ejemplo. La idea es que el menú simule pestañas, que estén en contacto con el div que contiene el texto. Y que aparezca en la misma línea que el título, pero desplazado a la derecha.

Los elementos del menú, que serán de 90x40 px, cambiarán de estilo al pasar el cursor sobre él. También habrá un estilo distinto para el elemento que lleve a la página actual, pero éste no cambiara al pasar el cursor sobre él.

1. En KompoZer, pulsa el botón CaScadeS de la parte superior para acceder al editor CSS.

2. Pulsa en el icono de la paleta (arriba a la izquierda) para definir una nueva regla.

3. Escribe #menu como selector y pulsa Crear regla de estilo. 4. Al selector #menu, quítale el margen exterior (margin: 0;) e interior (padding: 0;), las viñetas de la lista (list-style-type: none;) y aumenta un poco el tamaño de la letra (font-size: 105%;). Para que se desplace a la derecha del todo, lo pondremos flotante hacia allí (float: right;).

5. Pulsa Aceptar para cerrar la ventana.

(10)

10 estado, haz clic derecho sobre ul, y selecciona ID → menu.

7. Define una nueva regla de estilo para los elementos, con el selector #menu li.

8. Al selector #menu li, dale un flotante a la izquierda (float: left;) para que se muestren en la misma línea, y para que no queden pegados, un pequeño margen a izquierda y derecha (margin: 0 2px;). Dales también un ancho fijo de 90px (width: 90px) y una alto fijo de 40px (height: 40px;). Para que queden centrados, céntralos verticalmente dándole un alto de línea igual que el alto del elemento (line-height: 40px;) y céntralos en horizontal (text-align: center;). También hay que darles un color de relleno de nuestra paleta (background-color: #AA876F;) y un borde, excepto abajo (border-style: solid; border-color: #f0d7b5; border-width: 3px 2px 0 2px;).

9. Para cambiar el color del texto, declaramos el selector #menu a, ya que todo son enlaces, le damos el mismo color que el fondo del div.contenido (color: #f5e4cc;), y le quitamos el subrayado (text-decoration: none;).

10. Al pasar el ratón vamos a cambiar el color del texto y del borde, utilizando la pseudoclase :hover. Declara los estilos #menu li:hover {border-color: #FF7600;} y #menu li:hover a {color: #FF7600;}.

11. Vamos a crear una clase para la pestaña activa, a la que llamaremos activa. Declara el selector #menu li.activa. Vamos a quitar el borde de la pestaña, pero para no alterar el tamaño, le damos el color que pondremos al fondo y cambia el color de borde por el de fondo (border-color: #f5e4cc;) y el color del fondo por el mismo que el div.contenido (background-color: #f5e4cc;).

12. Cambia el color del texto de la pestaña activa, declarando el estilo #menu li.activa a {color: #5F4232}.

13. Asígnale la clase activa al elemento que lleve a la página en la que estás trabajando.

14. Para que el menú quede en la misma línea que el título, podemos poner el título también flotante, pero a la izquierda. Edita el selector del título (h1), añádele posicionamiento flotante a la izquierda (float: left;).

15. Si ahora lo pruebas, verás que todo se amontona con el div del texto (div.contenido). Para evitarlo, editamos el selector div.contenido, y le añadimos la propiedad clear: both; para romper el flotante.

16. Si ahora pruebas la página en Firefox verás que el menú ya queda pegado al div que tiene el texto. En cambio en IE7 no. Esto se debe a que interpretan de distinta forma el margen del h1 y del div.contenido y la propiedad clear. Para solucionarlo, edita el estilo del h1, y quítale todos los márgenes, dejando a solo 40px a la izquierda (margin: 0 0 0 40px;). Edita también el selector div.contenido, y quítale el margen superior (margin: 0 20px 20px;).

(11)

11 editando el selector #menu.

18. Una vez acabado, a cada una de las páginas creadas, asígnale el id="menu" a la lista del menu y la class="activa" al elemento que enlaza con esa página.

(12)

12 3. Posicionamiento.

El posicionamiento es el lugar donde el navegador coloca un elemento HTML para visualizarlo.

Por defecto, los elementos se posicionan uno a continuación de otro. Si se trata de elementos de bloque, como capas, párrafos, listas, etc, se irán colocando uno debajo del otro. A este posicionamiento se le denomina estático.

Utilizando CSS, con la propiedad position podemos cambiar el tipo de posicionamiento de los elementos. Existen cuatro tipos de posicionamiento:

 static. Es el normal.

 relative. El posicionamiento relativo coloca el elemento en su posición normal. A partir de ahí, podemos desplazar el elemento, permaneciendo el hueco de su posición original.

 absolute. Con el posicionamiento absoluto, especificamos la posición del elemento con respecto al elemento que lo contiene.

 fixed. Se establece la posición del elemento de forma parecida al absoluto, pero el elemento queda fijo en la pantalla, aunque utilicemos barras de desplazamiento.

Al cambiar el desplazamiento de un elemento, es fácil que se solape sobre otro. Esto produce que un elemento quede oculto. Para controlar esto, disponemos de la propiedad CSS z-index, a la que podemos asignar un valor numérico. Un elemento con un z-index mayor se verá por encima de otro con un z-index menor.

Nota: para que z-index funcione, se debe de haber especificado un tipo de posicionamiento para el elemento.

3.1. Posicionamiento relativo.

(13)

13 Para aplicarlo, lo primero es declararlo en el estilo, utilizando position: relative;.

Para indicar el desplazamiento horizontal, utilizamos left para desplazarlo a la izquierda y right para hacerlo a la derecha. Utilizar valores negativos, produce el efecto opuesto. Por ejemplo, para desplazar un elemento 40px a la derecha, podríamos poner right: 40px; o left: -40px;.

Del mismo modo, podemos desplazarlo verticalmente utilizando top para desplazarlo hacia arriba o bottom para hacerlo hacia abajo.

Si no establecemos valores de desplazamiento el elemento no cambia su posición, por eso es muy común asignar el posicionamiento relativo a elementos para poder utilizar una propiedad que requiere posicionamiento, como puede ser z-index.

3.2. Posicionamiento absoluto.

Al utilizar el posicionamiento absoluto indicamos de forma precisa la posición del elemento en la página.

Al contrario que con el posicionamiento relativo, el elemento al que le hemos asignado un posicionamiento absoluto no deja un hueco en la página. Podemos decir que el resto de elementos lo ignoran, y se colocan como si no existiese.

Para aplicarlo, lo primero es declararlo en el estilo, utilizando position: absolute;.

La posición y tamaño del elemento se indica siempre en relación a otro elemento que lo contiene. El elemento contenedor será el más cercano que haya con posicionamiento no estático. Si no hay ninguno, se utilizará el body.

Para definir la posición utilizamos top para referirnos a la distancia entre el borde superior del elemento posicionado y el borde superior del elemento contenedor. Por lo tanto left será la distancia entre los lados izquierdos, right entre los lados derechos y bottom entre los lados inferiores.

(14)

14 que contiene a todas, le hemos dado position: relative; para que las cajas de dentro tomen su posición a partir de ella.

Utilizando este posicionamiento, obtenemos gran flexibilidad para maquetar nuestra página. Por ejemplo, podemos dividir la página en dos (o más) columnas. Utilizaremos dos capas, con un alto al 100%, y que la suma de sus anchos sea el total de la página. Por ejemplo:

div#columna_izquierda {

position: absolute; left: 0;

top: 0;

height: 100%; width: 50%; }

div#columna_derecha {

position: absolute; right: 0;

top: 0;

height: 100%; width: 50%; }

Esto originaría dos columnas, cada una con un ancho de la mitad del de la página (o del elemento que las contenga).

Si queremos obtener dos columnas, una con un ancho fijo y la otra con lo que sobre, lo haremos de otra forma. Por ejemplo, si la columna de la izquierda la queremos con un ancho fijo, por ejemplo de 200px, lo que haremos será asignar a la columna de la derecha una distancia con el lado izquierdo de esos 200px, y con el lado derecho de 0, en vez de indicar el ancho.

div#columna_izquierda {

position: absolute; left: 0;

top: 0;

(15)

15

div#columna_derecha {

position: absolute; right: 0;

left: 200px; top: 0;

(16)

16 4. Maquetación Web.

El posicionamiento es el lugar donde el navegador coloca un elemento HTML para visualizarlo.

Podemos conseguir un efecto muy interesante controlando el desbordamiento de las columnas. Podemos dejar una columna fija, por ejemplo con un menú, y otra que muestre el contenido, a la que damos la propiedad overflow: auto;. Esto hará que nos podamos desplazar por el contenido de la página manteniendo el menú siempre visible. Como por defecto, Internet Explorer siempre muestra la barra de desplazamiento en la etiqueta html, queda mejor si lo quitamos html {overflow:hidden;}. Todo esto lo veremos mejor con un ejemplo:

<title>Columna sin scroll a la izquierda</title> <style type="text/css">

html {

overflow: hidden; }

div#columna_izquierda { position: absolute; top:0; left: 0;

height: 100%; width:20%;

background-color:#FFE9D7; }

div#columna_derecha { position: absolute; top:0; right: 0;

height: 100%; width: 80%;

overflow: auto;

background-color:#DDF2F9; }

</style> </head> <body>

<li><a href="#ap1">Apartado 1</a></li> <li><a href="#ap2">Apartado 2</a></li> <li><a href="#ap3">Apartado 3</a></li> </ul>

</div>

(17)

17

<h2> Columna fija a la derecha</h2> <h3 id="ap2"> Apartado 1</h3>

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis nulla et risus. In eleifend sapien a neque. Etiam fermentum. Sed dapibus suscipit diam.

Praesent non nisi ac leo congue vestibulum. Mauris ac orci eu nisl dictum ultrices. Morbi blandit dolor vitae sapien. Vivamus in neque. Integer sit amet mi. Curabitur ipsum

lectus, ultricies sit amet, bibendum a, sodales vitae, massa. Quisque metus. Sed blandit hendrerit urna. Aenean eu nulla. Praesent vulputate dui id lacus. Nunc vel odio. Nulla eleifend rutrum nulla. </p>

<p>Praesent ut ipsum. Nullam vitae nunc. Nam sit amet libero id mauris consectetur pulvinar. Suspendisse

vulputate lorem quis lectus. Quisque commodo purus et nibh. Nunc quis mi quis risus hendrerit ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam ac dui. Mauris vulputate fermentum tellus. Morbi rhoncus lorem id nibh. </p>

<h3 id="ap2">Apartado 2</h3>

<p>Etiam cursus nulla ac purus. Pellentesque massa elit, dignissim et, volutpat eu, sagittis tristique, sem.

Quisque nec leo. Etiam fringilla pellentesque turpis. Vestibulum at est. Sed sapien nunc, faucibus ac, suscipit sit amet, lacinia porttitor, mauris. Curabitur congue justo sed nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer

tristique diam vitae ligula. Nulla tincidunt, metus sit amet congue porttitor, purus pede commodo odio, vel varius mauris nulla id augue. Mauris pellentesque volutpat lacus. Maecenas erat. </p>

<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum volutpat, lacus non mattis vulputate, lorem nunc varius odio, in venenatis ante augue quis nisl. Praesent ut mi interdum lorem consequat vulputate. Vivamus ac urna non elit pellentesque sollicitudin. Nunc pharetra nibh in quam. Proin eu magna ut ligula volutpat mollis. Quisque mollis, nulla a porttitor commodo, orci diam commodo pede, ac congue neque libero quis justo. Donec sit amet ligula. In vehicula, elit ut pellentesque viverra, arcu nisl

tincidunt ipsum, in viverra dui orci vel massa. Nunc tincidunt congue risus. Donec nec sem id elit egestas porttitor. Fusce ultrices nulla. </p>

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis nulla et risus. In eleifend sapien a neque. Etiam fermentum. Sed dapibus suscipit diam.

Praesent non nisi ac leo congue vestibulum. Mauris ac orci eu nisl dictum ultrices. Morbi blandit dolor vitae sapien. Vivamus in neque. Integer sit amet mi. Curabitur ipsum

(18)

18

massa. Quisque metus. Sed blandit hendrerit urna. Aenean eu nulla. Praesent vulputate dui id lacus. Nunc vel odio. Nulla eleifend rutrum nulla. </p>

<p>Praesent ut ipsum. Nullam vitae nunc. Nam sit amet libero id mauris consectetur pulvinar. Suspendisse

vulputate lorem quis lectus. Quisque commodo purus et nibh. Nunc quis mi quis risus hendrerit ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam ac dui. Mauris vulputate fermentum tellus. Morbi rhoncus lorem id nibh. </p>

<h3 id="ap3">Apartado 3</h3>

<p>Etiam cursus nulla ac purus. Pellentesque massa elit, dignissim et, volutpat eu, sagittis tristique, sem.

Quisque nec leo. Etiam fringilla pellentesque turpis. Vestibulum at est. Sed sapien nunc, faucibus ac, suscipit sit amet, lacinia porttitor, mauris. Curabitur congue justo sed nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer

tristique diam vitae ligula. Nulla tincidunt, metus sit amet congue porttitor, purus pede commodo odio, vel varius mauris nulla id augue. Mauris pellentesque volutpat lacus. Maecenas erat. </p>

<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum volutpat, lacus non mattis vulputate, lorem nunc varius odio, in venenatis ante augue quis nisl. Praesent ut mi interdum lorem consequat vulputate. Vivamus ac urna non elit pellentesque sollicitudin. Nunc pharetra nibh in quam. Proin eu magna ut ligula volutpat mollis. Quisque mollis, nulla a porttitor commodo, orci diam commodo pede, ac congue neque libero quis justo. Donec sit amet ligula. In vehicula, elit ut pellentesque viverra, arcu nisl

tincidunt ipsum, in viverra dui orci vel massa. Nunc tincidunt congue risus. Donec nec sem id elit egestas porttitor. Fusce ultrices nulla. </p>

</div> </body> </html>

Recuerda que podemos anidar las capas. Por ejemplo, podríamos subdividir una de las capas en otras dos dentro de ella, utilizando el mismo sistema.

(19)

19 eso, resulta más claro si en vez del alto de las columnas, indicamos la parte superior (top) y la inferior (bottom). En este caso, nos dará igual la medida que utilicemos. Como mejor lo veremos será con un ejemplo:

div#encabezado {

position: absolute; top:0; left: 0;

height:10%; width:100%;

background-color:RoyalBlue; }

div#columna_izquierda { position: absolute; top:10%; left: 0;

height: 90%; width:20%;

background-color:SandyBrown; }

div#columna_derecha { position: absolute; top:10%; right: 0;

bottom: 0; width: 80%;

background-color:LightGreen; }

(20)

20 Ejercicio 4: Texto en 3D

Utilizando el posicionamiento absoluto, vamos a crear un título dando volumen a un texto plano:

La idea es simple, repetir varias veces un texto en un mismo punto de origen, y desplazar un poco cada repetición.

Crea una nueva página, con todos sus elementos: Doctype, head, body...

1. Crea las siguientes divisiones, cambiando Hola mundo por el texto que prefieras:

<div class="efecto5">Hola mundo</div> <div class="efecto4">Hola mundo</div> <div class="efecto3">Hola mundo</div> <div class="efecto2">Hola mundo</div> <div class="efecto1">Hola mundo</div> <div class="frontal">Hola mundo</div> </div>

El orden es importante, porque el último elemento se situará delante del resto. De todas formas, siempre podemos controlar el orden con la propiedad z-index.

2. Todo está anidado dentro del div.titulo. Así que será a éste al que definamos el formato del texto del título. También le daremos un tamaño (height y width), ya que los div de dentro serán absolutos, y si no aparecería como si no tuviese contenido. Y por eso mismo, para que los div de dentro tomen su posición a partir del div.titulo debemos de darle algún tipo de posicionamiento distinto de static. Vamos a utilizar position:relative;ya que realmente no afecta a la posición si no definimos la posición, pero podríamos haberlo posicionado, por ejemplo, de forma absoluta.

Define el siguiente estilo, cambiando si lo prefieres el formato del texto:

div.titulo {

position: relative;

font-family: sans-serif; font-size: 3em;

(21)

21

width: 7em; height: 1.5em; }

3. Cuando tenemos muchos elementos con propiedades comunes, es útil definirlos todos a la vez, en este caso el posicionamiento position: absolute; y el color que comparten casi todos los divs, el de la profundidad.

Define el estilo div.titulo div { position: absolute; color:#333399;}

4. Por el orden en que los hemos colocado, el de la clase frontal es el que estará delante de todo. Éste lo colocamos en la esquina superior izquierda (left:0; top:0;) del div.titulo. También le daremos un color al texto distinto.

Define el estilo div.titulo .frontal { color: #3366FF; top: 0; left:0; }.

5. Al resto, no tenemos más que, siguiendo el orden, ir alejándolos un poco más de la esquina superior izquierda.

Define los estilos:

div.titulo .efecto1 { top:1px;

left:1px; }

left:2px; }

left:3px; }

left:4px; }

left:5px; }