Ejemplos de
posicionamiento absoluto Ejemplos de
posicionamiento absolutoEn esta página se tratan los siguientes temas:
Los frames son una etiqueta introducida en HTML 4.0 y que permite dividir la pantalla en varias zonas en las que se pueden mostrar documentos distintos. Los frames fueron muy populares a finales de los 90 pues permitían diseños de página atractivos y facilitaban el mantenimiento de sitios grandes. Pero los frames crean también problemas de navegabilidad y de indexado de los sitios lo que, unido a la utilización de lenguajes de programación para la generación de las páginas en los sitios grandes, ha acabado desaconsejando su uso.
Una característica de los frames es que permite utilizar un enlace situado en una de las zonas de la página para cambiar el contenido de otra zona. Esa característica es la que se va a simular aquí utilizando posicionamiento.
El resultado es que haciendo clic en un enlace se cambia el contenido visible de la página. El ejemplo siguiente se puede probar en esta misma página o bien abrirlo en otra página haciendo clic derecho sobre el ejemplo en Firefox y eligiendo la opción "".
Enlace a ejemplo Simulación de frames 1 b
La estructura es la siguiente:
|
Índice |
|
|
Contenido Apartado 1 Apartado 2 |
|
El código HTML es el siguiente:
  |
<h1>Simulación de frames 1</h1>
<div id="indice">
<ul>
<li><a href="#Apartado1">Apartado 1</a></li>
<li><a href="#Apartado2">Apartado 2</a></li>
</ul>
</div>
<div id="contenido">
<div id="Apartado1">
<h2>Apartado 1</h2>
<p>Este es el apartado 1</p>
</div>
<div id="Apartado2">
<h2>Apartado 2</h2>
<p>Este es el apartado 2</p>
</div>
</div>
|
El código CSS es el siguiente:
| |
div#indice {
background-color: lightblue;
height: 70%;
left: 5%;
position: absolute;
top: 20%;
width: 15%;
}
div#contenido {
background-color: orange;
height: 70%;
left: 25%;
overflow: hidden;
position: absolute;
top: 20%;
width: 70%;
}
div div {
height: 100%;
width: 100%;
}
|
El motivo por el que cada vez sólo se ve uno de los apartados es que cada división de apartado tiene el mismo tamañado que la división "contenido" y lo que no cabe en la división "contenido" no se muestra. Al hacer clic en un enlace se muestra la división de apartado correspondiente.
Nota: Si la posición de la divisón "contenido" se establece mediante las propiedades bottom y top en vez de con las propiedades height y top (o height y bottom), Internet Explorer 8 muestra correctamente la página. Las versiones anteriores lo hacían incorrectamente, como se comenta en la página de diferencias entre IE8 e IE7 y en la página de diferencias entre IE7 e IE6.
Volver al principio de la página
El ejemplo anterior se puede complicar introduciendo elementos con posicionamiento en las divisiones de los apartados, como puede verse en el ejemplo siguiente, en el que cada apartado incluye un enlace al otro apartado situado en la parte inferior derecha:
Enlace a ejemplo Simulación de frames 2
La estructura es la siguiente:
|
Índice |
|
|
Contenido Apartado 1 Enlace al apartado 2 Apartado 2 Enlace al apartado 1 |
|
El código HTML es el siguiente:
| |
<h1>Simulación de frames 2</h1>
<div id="indice">
<ul>
<li><a href="#Apartado1">Apartado 1</a></li>
<li><a href="#Apartado2">Apartado 2</a></li>
</ul>
</div>
<div id="contenido">
<div id="Apartado1">
<h2>Apartado 1</h2>
<p>Este es el apartado 1</p>
<p class="enlace">Ir al <a href="#Apartado1">apartado 2</a></p>
</div>
<div id="Apartado2">
<h2>Apartado 2</h2>
<p>Este es el apartado 2</p>
<p class="enlace">Volver al <a href="#Apartado">apartado 1</a></p>
</div>
</div>
|
El código CSS es el siguiente:
| |
div#indice {
background-color: lightblue;
height: 70%;
left: 5%;
position: absolute;
top: 20%;
width: 15%;
}
div#contenido {
background-color: orange;
height: 70%;
left: 25%;
overflow: hidden;
position: absolute;
top: 20%;
width: 70%;
}
div div {
position: relative;
height: 100%;
width: 100%;
}
p.enlace {
position: absolute;
bottom: 5px;
right: 5px;
}
|
Nota: Si la posición de la divisón "contenido" se establece mediante las propiedades bottom y top en vez de con las propiedades height y top (o height y bottom), Internet Explorer 8 muestra correctamente la página. Las versiones anteriores lo hacían incorrectamente, como se comenta en la página de diferencias entre IE8 e IE7 y en la página de diferencias entre IE7 e IE6.
Volver al principio de la página
Autor: Bartolomé Sintes Marco