Curso css. Trabajando con elementos div.
Los elementos div o elementos flotantes nos permiten estructurar una página web y dar estilo a más de un elemento de forma muy cómoda y efectiva.
Estos elementos de bloque, no tienen valor funcional por si solos, es decir necesitan tener dentro de ellos algún elemento, ya sea un párrafo, una lista, una tabla, etc, para comprobar su potencial de acción.
ahora vamos a crear tres bloques div, cada uno de ellos envolverá un elemento de parrafo p, para comprobar como podemos desplazar dichos bloques div, en distintas posiciones por un documento. Vamos a imaginar que tenemos una página web ya creada y está en blanco, no hay ningún elemento en el cuerpo ó body.
Esta página esta vinculada a una hoja de estilo. Si queremos podemos utilizar la anterior pág web creada y la hoja de estilo que ya tiene relacionada o vinculada. Después borraremos todos los elementos del body o cuerpo y escribiremos el siguiente código:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <body> <div id="divcontenedor"> <div class="divA"> <p>1</p> </div> <div class="divA"> <p>2</p> </div> <div class="divA"> <p>3</p> </div> </div> </body> |
Cuando se trabaja con elementos div, hay que tener mucha cautela a la hora de etiquetar, ya que es muy fácil olvidarnos alguna etiqueta div de cierre. Algunos editores de código html, facilitan mucho esta tarea a la hora de marcar con etiquetas, generando de forma automática ambas marcas, la de entrada y la de cierre.
Acto seguido, escribiremos estas clases en nuestra hoja de estilo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .divcontenedor { border:1px solid black; width:90%; height:auto; padding:5px; background:#B4BDD1; } .divA { border:1px solid black; width:120px; height:120px; margin:5px; padding:5px; background:silver; } |
El resultado obtenido en el navegador será:
1
2
3
El elemento div es un elemento block-level, por tanto genera por defecto un salto de linea. Este salto provoca que los tres div o bloques del ejemplo se presenten uno debajo del otro.
Podemos cambiar la situación u orientación de dichos bloques si los sacamos del curso natural que tienen los elementos al colocarse en una página web y en la mayoria de los documentos de texto, que es de arriba a abajo y de izquierda a derecha.
si nosotros aplicamos un float a la clase divA, escribiéndolo en la hoja de estilo de esta manera:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | .divcontenedor { border:1px solid black; width:90%; height:auto; padding:5px; background:#B4BDD1; } .divA { float:left; border:1px solid black; width:120px; height:120px; margin:5px; padding:5px; background:silver; } |
Se produce lo siguiente en los div:
1
2
3
Lo que ha sucedido es que al aplicar la propiedad float: left; hemos sacado a los divs del curso natural del documento, es decir los hemos dejado flotando sobre el documento, eliminando el salto de linea de cada uno, y se situan lo más a la izquierda que el documento, otro elemento o div que les anteceda, les permita.
A continuación, vamos a intentar colocar el segundo bloque div, el «B-2.» a la derecha, para ver como se comportan los demás bloques. Para ello, modificaremos el nombre de clase del Bloque 2 en el código fuente, de esta manera:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <body> <div id="divcontenedor"> <div class="divA"> <p>1</p> </div> <div class="divB"> <p>2</p> </div> <div class="divA"> <p>3</p> </div> </div> </body> |
En la hoja de estilo escribiremos la nueva clase, con estas propiedades:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | .divcontenedor { border:1px solid black; width:90%; height:auto; padding:5px; background:#B4BDD1; } .divA { float:left; border:1px solid black; width:120px; height:120px; margin:5px; padding:5px; background:silver; } .divB { float:right; border:1px solid black; width:120px; height:120px; margin:5px; padding:5px; background:silver; } |
Resultando:
1
2
3
Como podemos comprobar al dirigir el Bloque 2 hacia el lado derecho, el Bloque 3, se ha colocado por si solo en el lado izquierdo seguido al bloque 1.
¿Y para que nos puede valer saber esto?, os preguntareis. Pues os diré que el trabajar o el saber manejar los divs mediante el uso de la propiedad float, puede que sea una de las cosas más importantes que debemos aprender, si queremos crear nuestra propia página web, usando divs. Si os dais cuenta tal y como están situados estos divs, nos forman tres columnas, que podemos dimensionar como queramos. Por ejemplo, podiamos reducir el ancho del Bloque 1 y del Bloque 2 y aumentar su longitud en forma de columnas, pudiéndonos valer para barras laterales de navegación de una página web y el bloque 3 hacerlo bastante mas ancho y tan largo como los dos anteriores y servirnos como parte principal o tablón principal donde exponer la información o contenido de una página web.
Nos bastaría añadir un div antes que estos tres en nuestro código fuente, que haria las veces de cabecera y un div, al final, que haria las veces de pie de página.
En total bastarian 5 divs para cada una de las partes y uno o dos divs más, para que sirvan de contenedor de los anteriores.
Hay muchos diseños de páginas creadas con divs, circulando por la red, basta buscarlos en google y aparecen. Algunos de esos diseños tienen propiedades css, que no conoceis todavia, pero si os surgen dudas podeis acudir a mí para intentar solventaroslas.
Sabiendo que podeis colocar un div en cualquier parte de un documento o página web, podeis utilizarlo para multitud de usos, por ejemplo para encuadrar imágenes o incluirlas dentro de un texto y que el texto rodee a la perfección toda la imagen, como muestro en esta página. O colocar tablas con mucha precisión. Las posibilidades del elemento div, son enormes. Poco a poco las ireis descubriendo.
En la parte superior de esta página ya habreis visto una pequeña aplicación interactiva que podeis utilizar para ver el comportamiento de los divs en un documento, aunque creo que ya os habrá quedado más que claro como funcionan los divs al aplicarles la propiedad float.
Con esta página acabamos la parte práctica del curso de css. Os preguntareis seguramente, que ¿Faltan muchas propiedades por ver, sobre todo tras la llegada de css3?, pero si habeis seguido este curso y habeis comprendido como funciona y se aplica css a una página web, el aplicar otro tipo de propiedad que no hemos visto aquí, os resultará muy sencillo. Tan solo hay que saber para que sirve dicha propiedad y meterla en la hoja de estilo.
En la siguiente página hago un pequeño resumen de las conclusiones del curso y ofrezco algunos consejos para aplicar css en una página web.