Hasta el momento todos nuestros elementos se han mostrado de forma similar, con un comportamiento secuencial. Veremos algunos cambios que se pueden aplicar al mostrar nuestros contenidos.
Para hacer nuestra pruebas emplearemos esta sencilla página web:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>floating</title>
<link href="floating.css" rel="stylesheet" type="text/css">
</head><body>
<div id="bloque1">Bloque 1</div>
<div id="bloque2">Bloque 2</div>
<div id="bloque3">Bloque 3</div>
<div id="bloque4">Bloque 4</div>
</body></html>
Consta de cuatro simples bloques con una pequeña frase. Al aplicarle los estilos siguientes conseguimos el resultado de la figura.
body {
background-image: url("resources/fondo.png");
font-family: Arial, Helvetica, sans-serif;
}
div {
width: 120px;
height: 80px;
background-color: rgb(82, 108, 142);
color: rgb(245, 255, 244);
margin: 10px;
border-radius:5px;
text-align: center;
}
En CSS disponemos de la propiedad display para modificar la visualización de los elementos de la página.
Por ejemplo, al añadir a los valores de <div> la propiedad display:block, forzaremos a que antes y después del elemento seleccionado se produzca un salto de línea. Es decir, exactamente igual que se encuentra ahora, ya que los elementos delimitados por <div> siempre llevan ese salto de línea antes y después.
Para apreciar el efecto de display, podemos aplicar la siguiente línea:
div {
display:inline;
}
Los elementos se sitúan horizontalmente, sin los saltos de línea. Se pierden sus dimensiones, como se puede observar. En cambio, usando inline-block se distribuyen horizontalmente con sus características de bloque intactas.
div{
display:inline-block;
}
Elementos no mostrados
Otro valor interesante es none. Observemos lo que sucede al aplicar este valor al segundo bloque:
div#bloque2 { display:none;}
¿Qué utilidad tiene esto? Con JavaScript, el lenguaje de script que podemos emplear en los navegadores resulta sencillo modificar durante la reproducción de la página una propiedad concreta de una hoja de estilos.
Podemos probar a añadir el código de un pequeño script a la cabecera de la página:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>floating</title>
<link href="floating.css" rel="stylesheet" type="text/css">
<script language="JavaScript">function mostrar() {</script>
document.getElementById('bloque2').style.display="inline-block";
}
</head>
<body>
<div id="bloque1" onmouseover="mostrar()">Bloque 1</div>
<div id="bloque2">Bloque 2</div>
<div id="bloque3">Bloque 3</div>
<div id="bloque4">Bloque 4</div>
</body>
</html>
Además hemos modificado el bloque 1 añadiendo un parámetro denominado onmouseover. Lo que sucede en adelante es que el <div> bloque1 será sensible al momento en el que el ratón pase sobre él. El resultado es que, cuando eso suceda, se ejecutará una pequeña acción denominada mostrar. Esa acción lo único que hace es localizar el bloque 2 (document.getElementById('bloque2')) y modificar su propiedad display (style.display="inline-block";).