Web.CSS.Muestra y Colocación.
Una de las cosas más importante que tiene CSS es la forma en como presentar los elementos en una página Web.
Display.
Es la forma en que se representa un elemento en la pantalla. Existen dos formas:
- Block. En bloques. Cada elemento se representa en una sola línea de forma que abarca todo el ancho de la página. Un ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
a {
display: block;
}
</style>
</head>
<body> <p>Elementos en línea y en bloque</p> <a href="https://www.bing.com" target="_blank">Bing</a>
<a href="https://www.google.es" target="_blank">Google</a>
<a href="https://www.yahoo.es" target="_blank">Yahoo</a></body>
</html>
- Inline. En línea. Cada elemento no ocupa una línea entera, abarca el ancho que tenga y no pasa a la siguiente línea hasta que se acabe el ancho de la página.
a {
display: inline;
}Al cambiar a inline, el efecto que resulta es el contrario, los 3 enlaces se sitúan uno al lado del otro en la misma línea.
- Inline-block. Trabaja en línea, pero la diferencia está en que éste tiene ancho y alto. Un ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
.floating-box {
display: inline-block;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}</style>
</head>
<body> <h2>Enline-Block</h2> <div class="floating-box">Caja</div>
<div class="floating-box">Caja</div>
<div class="floating-box">Caja</div>
<div class="floating-box">Caja</div>
<div class="floating-box">Caja</div>
<div class="floating-box">Caja</div>
<div class="floating-box">Caja</div>
<div class="floating-box">Caja</div></body>
</html>
Posición.
A la hora de posicionar un elemento HTML debemos saber cual utilizar:
- Position: static. Posición estática. Es la posición por defecto que tiene cualquier elemento, es decir, parte desde la parte superior izquierda si no hay ningún elemento antes. En caso contrario será el siguiente espacio disponible. Un ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
div.posicion {
position: static;
border: 3px solid #73AD21;
}
</style>
</head>
<body> <h2>Posiciones.</h2> <div class="posicion">
Una frase de ejemplo para ver resultados.
</div></body>
</html>
- Position: relative. Posición relativa. Si le das un posicionamiento relativo a un elemento y estableces su propiedad margin-top en 10px, se moverá diez píxeles desde el lugar donde hubiera estado posicionado como estático. Un ejemplo:
div.posicion {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}- Position: fixed. Posición fija. Permite que un elemento quede fijo siempre en un lugar, de forma que si la página se desplaza, el elemento le sigue. Un ejemplo:
div.posicion {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}- Position: absolute. Posición absoluta. Cuando se establece un elemento con posición absoluta, se posiciona en relación con el primer elemento padre que tenga y que no esté establecido con posición estática. Si no existe tal elemento, se posiciona en relación con la página.
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
} div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
</style>
</head>
<body> <h2>Posición Absoluta.</h2> <div class="relative">Posición Relativa
<div class="absolute">Posición Absoluta</div>
</div></body>
</html>
En este ejemplo hay un contenedor <div> principal y dentro de éste se encuentra otro bloque <div>. Al tener el principal un posicionamiento no estático, el que tiene posición absoluta se posiciona en relación al principal.
Si el principal fuera estático, el absoluto cogería como referencia la página web.
Superponer elementos.
Es posible que alguna vez pueda interesar poner delante o detrás algún elemento, es decir, superponerlo. Un ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</style>
</head>
<body> <h1>Superponer Elementos.</h1>
<img src="w3css.gif" width="100" height="140"></body>
</html>
Para realizar tal efecto se usa la propiedad z-index. Para indicar que el elemento está debajo se da el valor -1 ó el 0 si se quiere poner por encima.
¿Donde coloco los elementos?
Una forma de determinar donde se pueden colocar los elementos en una página es usando Floats.
Cuando se usa floats se le indica al navegador que esté en el mismo flujo que los demás elementos, es decir, si tienes varios elementos flotantes, todos se conocen y saben donde se encuentran cada uno y no se superponen. Un ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border-radius: 5px;
} #encabezado {
height: 50px;
background-color: #F38630;
margin-bottom: 10px;
} .izquierda {
height: 300px;
width: 150px;
background-color: #A7DBD8;
float: left;
margin-bottom: 10px;
} .derecha {
height: 300px;
width: 450px;
background-color: #E0E4CC;
float: right;
margin-bottom: 10px;
} #piedepagina {
height: 50px;
background-color: #69D2E7;
}
</style>
</head>
<body> <h1>Floats.</h1>
<div id="encabezado"></div>
<div class="izquierda"></div>
<div class="derecha"></div>
<div id="piedepagina"></div></body>
</html>
En este ejemplo hacemos 4 bloques distintos con un determinado estilo cada uno. Si se observa con detenimiento, cada elemento sigue el flujo normal de la página, de forma que cada uno conoce la información de ubicación de otro y nunca consiguen superponerse.
Ahora bien, hay un pequeño problema con el pie de página, que no debería estar ahí, no es su sitio. ¿Como lo hacemos?
Existen una propiedad que su función es alejarse de los elementos; clear. Existen varios valores que se pueden usar:
- Clear: left. Se desplazará inmediatamente debajo de cualquier elemento flotante del lado izquierdo de la página.
- Clear: right. Se desplazará inmediatamente debajo de cualquier elemento flotante del lado derecho de la página.
- Clear: both. Aléjate de los elementos que están a la izquierda y a la derecha.
En el ejemplo anterior, ¿cual se debería usar para que el pie de página se pusiera abajo del todo?. Pues se usaría clear:both, es decir, se necesita que se aleje de la izquierda y derecha y así se desplazará inmediatamente a la parte de abajo.
#piedepagina {
height: 50px;
background-color: #69D2E7;
clear: both
}
