Existen etiquetas HTML de tipo block que al ser usadas crean una nueva línea (como por ejemplo: <p>, <h1>, <div>, etc.) y otras de tipo inline que no la crean (como <a>, <b>, <i>, <span>, <form>...).
Con la propiedad display podremos modificar el tipo de un elemento.
Observa el siguiente ejemplo en el que tomando como base la página web index13.html, con el código CSS definimos que el <span> con ID 'span4' sea de tipo block con lo que ocupará el ancho disponible y provocará un salto de línea (normalmente los <span> son de tipo inline y su ancho se ajusta al contenido del mismo):
div {
height:50px;
margin-bottom:5px;
background-color:red;
}
span {
height:50px;
color:yellow;
background-color:blue;
}
#span4 {
display:block;
margin-top:5px;
margin-bottom:5px;
}
Para maquetar una página web se recomienda el uso de la etiqueta HTML <div> como contenedora de otros elementos, en lugar de usar tablas (las cuales se recomienda usar sólo para mostrar datos tabulados).
Para colocar elementos, aparte de las propiedades referentes a dimensiones, márgenes, etc. vistas anteriormente disponemos de las siguientes:
float: permite 'flotar' un elemento a izquierda o derecha, permitiendo que el resto del espacio disponible en el lado contrario se rellene con texto u otros elementos HTML.
Puede tomar como valores: left (flota el elemento hacia la izquierda) o right (flota el elemento hacia la derecha).
clear: es lo contrario de float, permitiendo indicar en qué lados del elemento no se permite otro contenido.
Puede tomar como valores: left (no permite otro contenido a su izquierda), right (no permite contenido a la derecha) o both (no permite que haya contenido a sus lados).
Tomando como base la página web index9.html, el siguiente código CSS define un alto y ancho para el <div> y lo flota a la izquierda, aplicando también un color de fondo a ambos elementos:
div {
float:left;
height:80px;
width:100px;
background-color:yellow;
}
span {
background-color:cyan;
}
Si en lugar de float:left usáramos float:right, el <span> quedaría flotando a la derecha del <div>:
div {
float:right;
height:80px;
width:100px;
background-color:yellow;
}
span {
background-color:cyan;
}
Por otro lado, si aplicamos la propiedad clear:left al <span>, indicamos que no debe haber nada a la izquierda del mismo (será así mientras no haya otro elemento definido con float:left flotando a su izquierda):
div {
height:80px;
width:100px;
background-color:yellow;
}
span {
clear:left;
background-color:cyan;
}
Así pues, si en este caso el <div> estuviese definido con float:left quedaría flotando a la izquierda con el <span> a su derecha (como en el primero de los ejemplos anteriores).
Para mostrar y ocultar elementos HTML usaremos las propiedades CSS:
- display: si se le asigna el valor block muestra un elemento que ha sido ocultado, y con none se oculta el elemento.
- visibility: admite los valores visible (muestra un elemento) o hidden (oculta el elemento).
Ambas propiedades se diferencian en que cuando se oculta el elemento usando display:none éste desaparece y deja vacío el espacio que ocupaba, mientras que con isibility:hidden aunque no esté visible continúa ocupando su espacio.
Tomando como base la página web index3.html, el siguiente código CSS define un alto y ancho para ambos <div>, les aplica un color de fondo y oculta el primero:
div {
height:60px;
width:60px;
}
#div1 {
background-color:yellow;
display:none;
}
#div2 {
background-color:red;
}
Comprueba como si usamos visibility:hidden en lugar de display:none, el primer <div> aunque se encuentra oculto sigue ocupando su posición en la página web:
div {
height:60px;
width:60px;
}
#div1 {
background-color:yellow;
visibility:hidden;
}
#div2 {
background-color:red;
}
Por otro lado, para controlar la visibilidad del contenido de un elemento cuando excede de sus dimensiones debemos usar la propiedad overflow, la cual admite principalmente los siguientes valores:
- visible: El contenido que exceda de las dimensiones del elemento será mostrado.
- hidden: El contenido que exceda de las dimensiones del elemento no será mostrado.
- scroll: La barra de desplazamiento se mostrará en todo momento.
- auto: La barra de desplazamiento se muestran en caso de que el contenido exceda de las dimensiones.
En este ejemplo usando como base la página web index10.html, en el código CSS indicamos que no se muestre el contenido del <div> que exceda del alto definido para éste:
div {
background-color:lightgray;
width:550px;
height:130px;
overflow:hidden;
}
Para indicar la forma en que deseamos posicionar un elemento HTML usaremos la propiedad position indicando uno de los siguientes valores:
- static: el elemento estará siempre situado en su posición normal (es la forma usada por defecto).
- fixed: el elemento es posicionado en un determinado punto de la página web, quedando siempre visible aunque se haga scroll.
relative: el elemento es posicionado de forma relativa al elemento anterior en el flujo de la página web (o dicho de otro modo, dentro del elemento HTML dentro del que se encuentre).
Por ejemplo, si un <div> posicionado de forma relativa se encuentra dentro de otro, se colocará de forma relativa a éste, pero si 'cuelga' directamente del <body> lo estará con respecto al cuerpo de la página.
- absolute: el elemento es colocado indicando su posición a partir de la esquina superior izquierda del área de visualización de la página en el navegador web.
Salvo en caso de usar static (no es necesario declararlo puesto que es el método por defecto), para indicar los márgenes del elemento HTML usaremos las siguientes propiedades:
- top: margen superior.
- right: margen derecho.
- bottom: margen inferior.
- left: margen izquierdo
Los valores que pueden tomar dichas propiedades serán indicadas en píxels, porcentajes o bien con auto (permite al navegador web calcular margen disponible con respecto al lado indicado).
Con respecto a dichas propiedades hay que tener en cuenta que:
- Si un elemento está posicionado de forma absoluta los atributos CSS anteriores indican la distancia (en píxels) entre el borde del lado indicado de dicho elemento, con respecto al borde del mismo lado de su contenedor.
Usando como base el código fuente del archivo HTML index12.html en combinación con el siguiente código CSS:
#div1 {
position:relative;
height:120px;
width:100px;
background-color:red;
}
#div2 {
position:absolute;
right:3px;
height:100px;
width:50px;
background-color:blue;
}
Observa que entre el borde derecho del <div> interior y el borde derecho de su contenedor queda un espacio de 3px.
- Si un elemento está posicionado de forma relativa los atributos CSS anteriores indican que éste se desplazará el número de píxels definido, a partir de su propio borde por el lado indicado.
Usando como base el código fuente del archivo HTML index12.html en combinación con el siguiente código CSS:
#div1 {
margin-left:10px;
height:100px;
width:100px;
background-color:red;
}
#div2 {
position:relative;
bottom:3px;
right:3px;
height:80px;
width:50px;
background-color:blue;
}
Observa que el <div> interior se desplaza 3px a la izquierda a partir de su borde derecho, y otros 3px hacia arriba a partir de su borde inferior.
Otra propiedad que nos será útil en caso de que se superpongan elementos HTML y deseemos indicar cuál debe estar visible quedando por encima de los demás es z-index, a la que asignaremos un valor numérico de modo que mientras mayor sea, por encima de los otros quedará el elemento.
Ejemplo de position:fixed:
Usando como base el código fuente del archivo HTML index11.html en combinación con el siguiente código CSS, colocaremos el segundo <div> en la parte derecha de la ventana, posición en la que será siempre visible aunque se haga scroll:
#div1 {
width:540px;
background-color:yellow;
}
#div2 {
position:fixed;
top:10px;
right:5px;
width:100px;
background-color:cyan;
}
Ejemplo de position:relative:
En este ejemplo usando como base el código fuente del archivo HTML index12.html, con el código CSS posicionamos el segundo <div> de forma relativa a tres píxels de la parte superior izquierda del otro <div> en el que se encuentra dentro.
#div1 {
height:160px;
width:540px;
background-color:yellow;
}
#div2 {
position:relative;
top:3px;
left:3px;
width:200px;
background-color:cyan;
}
Es interesante que tengas que cuenta que si se define un elemento con position:relative, podremos colocar de forma sencilla los que estén dentro de él definiéndolos con position:absolute y usando las propiedades top, right, bottom y left (tomarán como referencia su parte superior izquierda).
Ejemplo de position:absolute:
Usando como base el código fuente del archivo HTML index11.html, con el código CSS posicionamos el segundo <div> de forma absoluta a 3 píxels de distancia de las partes superior e izquierda del área visible de la página en el navegador web:
#div1 {
width:540px;
background-color:yellow;
}
#div2 {
position:absolute;
top:3px;
left:3px;
background-color:cyan;
}
Si modificamos el ejemplo anterior añadiendo la propiedad z-index al <div> de tipo absolute, observaremos que queda por debajo del anterior.
#div1 {
width:540px;
background-color:yellow;
}
#div2 {
position:absolute;
z-index:-1;
top:3px;
left:3px;
background-color:cyan;
}
Observa que se le ha asignado un valor negativo de '-1' puesto que el del resto de elementos es cero (al otro <div> no se le puede asignar un valor para z-index ya que no es de tipo absolute, relative ni fixed).
Para poder posicionar un elemento con Fixed en los navegadores web Internet Explorer 7 y 8, es necesario declarar <doctype> al principio de la página web.
La propiedad z-index sólo funciona con elementos posicionados de modo absolute, relative, o fixed.
