Unidad 17. Estilos CSS Avanzado (XII)


Controles de elementos de bloque y en línea

 

Ahora veremos cómo posicionar los elementos y darles el tamaño que nos convenga para representarlos.

Antes de empezar deberíamos hacer una distinción entre las etiquetas HTML.

Las hay de 2 tipos: de bloque o en línea.

 

Las etiquetas de bloque son aquellas que causan un salto de línea antes y después de ellos, como por ejemplo las etiquetas p, div, table, br, etc...

Sin embargo luego encontramos otro tipo de etiquetas (en línea) que no producen saltos en el flujo de la página, como pueden ser las etiquetas a, b, i, span, etc...

 

Teniendo esto siempre en mente verás que es más sencillo trabajar y moldear las páginas utilizando CSS.

 

Primero veremos las propiedades de tamaño height (altura) y width (anchura).

Puedes especificarlas en cualquier elemento de bloque y establecerán su alto y su ancho en píxeles o porcentaje.

300x50

#contenedor {

width: 300px;

height: 50px;

}

 

Luego encontramos la propiedad float, que permite que cualquier elemento flote en un lado determinado de la pantalla mientras el resto sigue el flujo natural.

Observa estos ejemplos:

©

Este texto tiene un elemento flotante a la izquierda.

Además le hemos dado un tamaño de fuente mayor para que se note mejor el efecto.



©

Este texto tiene un elemento flotante a la derecha.

Además le hemos dado un tamaño de fuente mayor para que se note mejor el efecto.

 

Hemos utilizado los valores left y right respectivamente. En estos casos a los párrafos que contienen el símbolo de copyright se les han aplicado la propiedad CSS float:

<p style="float:left; font-size: 25px; border: 1px solid black;">&copy;</p>

<p style="float:right; font-size: 25px; border: 1px solid black;">&copy;</p>

 

Pero si vemos detenidamente esta propiedad veremos que encontramos un problema:

©
©

Este texto tiene un elemento flotante a la derecha.

Pero quiero que este párrafo no se vea afectado por el bloque flotante y se muestre sin tener que ajustarse a él.

Como este párrafo que ocupa toda la anchura del bloque div padre.

¿Cómo solucionamos este problema?

 

Para ello deberemos utilizar la propiedad clear. Esta propiedad permite romper el ajuste que se esté realizando por una etiqueta anterior marcada con float.

Clear puede tomar 3 valores: left, right o both, para romper el float de izquierda, derecha o ambos respectivamente.

 

Por lo que si le aplicamos un clear: right; al segundo párrafo este se mostrará sin verse afectado por el float:

©
©

Este texto tiene un elemento flotante a la derecha.

Pero quiero que este párrafo no se vea afectado por el bloque flotante y se muestre sin tener que ajustarse a él.

Como este párrafo que ocupa toda la anchura del bloque div padre.

El código que hemos utilizado es el siguiente:

<p style="clear: right;">Pero quiero que este p&aacute;rrafo no se vea afectado por el bloque flotante y se muestre sin tener que ajustarse a &eacute;l.</p>

 

Del mismo modo esta propiedad nos ayudará en este caso:

©
©
©
©

Este texto tiene dos elementos flotantes a la izquierda.

Queremos que los dos bloques estén flotando a la izquierda pero uno debajo del otro.

Para ello deberemos aplicarle al segundo elemento un clear: left; para que elimine el comportamiento del primer elemento que ya estaba flotando.

 

Por ello, el segundo elemento lo escribiríamos así:

<div style="float: left; clear: left; font-size: 25px; border: 1px solid black;">&copy;<br />&copy;</div>

Y obtendríamos lo siguiente:

©
©
©
©

Este texto tiene dos elementos flotantes a la izquierda.

Ahora uno se encuentra debajo del otro, y el texto fluye teniéndolos en cuenta a ambos.

Aunque puede llegar un párrafo que deje de verse afectado.

Como este!

 

 

Ahora combinando los márgenes y los elementos flotantes podemos crear columnas de una forma muy sencilla:

cabecera
menu
menu
menu
menu
menu
contenido
contenido
contenido
contenido
contenido
pie

 

La forma es la siguiente:

  1. Creamos una cabecera. No hace falta que se le aplique ningún estilo en especial, pero hemos preferido añadir unos bordes y paddings para que se vea mejor el ejemplo (igual que en resto de los elementos).
    cabecera
  2. Luego creamos otro bloque (nosotros hemos utilizado divs aunque puedes utilizar párrafos, tablas o cualquier elemento de bloque).
    cabecera
    menu
    menu
    menu
    menu
    menu
  3. A este último bloque le asignamos la propiedad float: left; para que se encuentre flotando a la izquierda y le damos una anchura (en nuestro caso un 30%).
    cabecera
    menu
    menu
  4. Luego creamos un tercer elemento que contendrá la segunda columna.
    cabecera
    menu
    menu
    contenido
    contenido
    contenido
    contenido
    contenido
  5. A este elemento deberemos darle un margin-left del mismo tamaño que la anchura de la primera columna. Así nos aseguramos de que se encuentren en el mismo nivel (porque el elemento de la izquierda está flotando) pero no vuelva a tomar el flujo normal cuando el bloque de la izquierda haya acabado.
    cabecera
    menu
    menu
    contenido
    contenido
    contenido
    contenido
    contenido
  6. Finalmente añadimos un nuevo bloque que utilizaremos como pie de página.
    cabecera
    menu
    menu
    menu
    menu
    menu
    contenido
    contenido
    pie
  7. A este bloque deberemos asignarle la propiedad clear: both; para que el elemento flotante no le afecte en caso de que el contenido fuese demasiado corto.
    cabecera
    menu
    menu
    menu
    menu
    menu
    contenido
    contenido
    pie

 

Finalmente tenemos la propiedad display, que establece el tipo de elemento con el que estamos tratando.

Esta propiedad es muy útil porque transforma las etiquetas de bloque a en línea y viceversa.

Puede tomar los valores block, inline o list-item.

 

Los dos primeros valores hablan por sí mismos. Puedes asociarle el estilo display: block; a una etiqueta A para que cree un salto de línea antes y después de ella.

Del mismo modo, podrás hacer que una etiqueta de bloque (como p o div) se convierta en un elemento en línea utilizando display: inline; y puedan ser mostradas una al lado de otra:

1 2 3 4
6 5 7 8
24 9 10 11
23 12 25
22 21 20 13
19 14
18 17 16 15
    
1 2 3 4
6 5 7 8
24 9 10 11
23 12 25
22 21 20 13
19 14
18 17 16 15
    
1 2 3 4
6 5 7 8
24 9 10 11
23 12 25
22 21 20 13
19 14
18 17 16 15

En este ejemplo podemos ver tres tablas que se muestran una al lado de la otra.

Simplemente les hemos dado el estilo:

.tabla {

display: inline;

}

Aunque si disminuyes el ancho de la ventana verás que al tratarse de elementos en línea se adaptan a su tamaño.

 

Para saltarnos este inconveniente (si lo fuera), podemos utilizar la propiedad que vimos en el apartado de Controles de texto: white-space.

Introduciendo estas tres tablas en un elemento de bloque como un p o un div y asignándole la propiedad white-space: nowrap; conseguiríamos que las tres tablas permaneciesen en línea sin saltos de pantalla a pesar de la anchura de la ventana.

1 2 3 4
6 5 7 8
24 9 10 11
23 12 25
22 21 20 13
19 14
18 17 16 15
    
1 2 3 4
6 5 7 8
24 9 10 11
23 12 25
22 21 20 13
19 14
18 17 16 15
    
1 2 3 4
6 5 7 8
24 9 10 11
23 12 25
22 21 20 13
19 14
18 17 16 15

 

Finalmente, comentaremos que esta propiedad también puede tomar el valor list-item.

De este modo, los elementos que se vean afectados por el estilo display: list-item; se mostrará como si formasen parte de una lista.

Observa el siguiente ejemplo:

p.lista {

display: list-item;

list-style-type: square;

}

Si aplicamos este estilo sobre unos párrafos veremos esto:

Esto es un párrafo que se muestra en forma de elemento de lista.

Esto es un párrafo que se muestra en forma de elemento de lista.

Esto es un párrafo que se muestra en forma de elemento de lista.

Esto es un párrafo que se muestra en forma de elemento de lista.

Para practicar realiza el Ejercicio Paso a Paso de Controles de Bloque.




  Ir a la página anterior Índice del curso  Ir a la siguiente página  

Pág. 17.12




Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.