A pesar de ser un recurso muy interesante desde el punto de vista de las posibilidades que genera, tanto para los webmasters como para los usuarios, el uso de frames o marcos ha sido cuestionado debido a que supone dificultades para el posicionamiento en buscadores de la página que los utiliza.
Sin embargo, en el caso de que se desee utilizar algo similar para brindar a los usuarios la posibilidad de cambiar los contenidos que se muestran en la página mediante el uso de un menú (sin que esto implique navegar a otra página) puede utilizarse un recurso CSS que mostraremos a continuación y simular la utilización de marcos.
Este recurso ya lo hemos utilizado en la creación de una galería de imágenes solo con HTML y CSS, y también guarda similitudes con la creación de menús desplegables utilizando estos lenguajes.
Principios de funcionamiento
El “secreto” de este recurso consiste en que ambos contenidos se encuentran presentes en dos capas superpuestas. El efecto se consigue con la utilización de capas con posicionamiento absoluto, con ancho y alto fijos, y cuyos contenidos que desborden no sean visibles utilizando el valor “hidden” de la propiedad “overflow”.
Se utilizan enlaces para que “llamen” al contenido deseado, el que en forma automática se mostrará por encima del otro contenido.
Desarrollo
El archivo HTML
Trabajaremos con dos archivos, el HTML y un archivo CSS. Para el ejemplo, hemos elegido crear una página en XHMTL 1.1. Colocaremos en el encabezado del documento el título del mismo y el enlace para la hoja de estilo.
Luego de colocar el título mediante el uso de etiquetas h1, ubicaremos las dos capas principales, que tendrán posicionamiento absoluto. La primera, que tendrá el identificador “columna”, que contendrá la lista que hace las veces de menú. La segunda, llamada “contenido”, que será la que tendrá en su interior las dos capas con los contenidos que se alternarán, que tendrán los identificadores “marco1” y “marco2”.
Dentro de éstos últimos, colocaremos contenidos de ejemplo, para mostrar el efecto en toda su magnitud. En los ítems del menú que se colocará en la columna izquierda, se colocarán enlaces a las capas “marco1” y “marco2”, que son enlaces internos. Cuando se coloca un enlace interno, nos lleva a una parte de la página donde hemos colocado un ancla. En este caso, se utilizan los propios identificadores CSS como destino de los enlaces, solo que en lugar de navegar a otra parte de la página, se nos mostrará una capa que se encuentra oculta por otra:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >El archivo CSS</h3>
Lo más interesante de este ejemplo se encuentra en las <a href="https://www.lawebera.es/manuales/macromedia-dreamweaver/editar-crear-propiedades-css-adobe-dreamweaver.php">propiedades CSS</a> y en la utilización de los <a href="https://www.lawebera.es/posicionamiento/estrategia-de-enlaces-backlinks.php">enlaces </a>para llamar a las capas. En primer lugar, se colocarán todas las propiedades necesarios para dar un determinado formato a los distintos elementos que componen la página, como <a href="https://www.lawebera.es/diseno-web/tipografia-aplicada-al-diseno-web.php">párrafos</a>, <a href="https://www.lawebera.es/posicionamiento/importancia-del-titulo-en-el-posicionamiento-web.php">títulos</a>, listas, etc.
Luego detallaremos las propiedades de la capa que contendrá la lista y que servirá como una especie barra lateral (<strong>sidebar</strong>), cuyas propiedades no detallaremos porque no tienen interés para el ejemplo.
La capa “<strong>contenido</strong>”, también tiene <strong>posición absoluta</strong> y se ha determinado que el contenido que la desborde <strong>no sea visible</strong>, ya que de otro modo, cuando una de las capas tiene contenido excesivo, este desbordará hacia abajo, aún cuando la capa visible sea la otra.
Finalmente, se han dado las dimensiones para las capas “<strong>marco1</strong>” y “<strong>marco2</strong>”, que simplemente serán de <strong>100% </strong>tanto para el ancho como para la altura, ocupando la totalidad de la capa que los contiene. Gracias a ello, cuando una de las dos capas es llamada por el enlace correspondiente, ésta cubre totalmente a la otra capa.
html {
font: normal 13px arial,helvetica,sans-serif;
}
h1 {
text-align: center;
color: #987;
}
h2 {
text-align: center;
color: #777;
}
ul {
list-style: circle;
color: #888;
}
ul li a {
color: #888;
text-decoration: none;
font-weight: bold;
}
ul li a:hover {
color: #f00;
}
p {
color: #456;
}
/* Capas del ejemplo */
div#columna {
border: solid 1px #ccc;
position: absolute;
left: 30px;
top: 80px;
width: 150px;
height: 350px;
}
div#contenido {
border: solid 1px #ccc;
position: absolute;
overflow: hidden;
left: 200px;
top: 80px;
width: 580px;
height: 350px;
padding: 0 20px;
}
div#marco1, div#marco2 {
height: 100%;
width: 100%;
}
Conclusión
Este es otro ejemplo de como, con elementos muy simples de HTML y CSS, se pueden conseguir efectos que suplanten a elementos más complejos y que pueden darnos dificultades en el posicionamiento o en la accesibilidad de la página.
Ver comentarios (4)
Andres, buenas tardes, fijate que quiero hacer exactamente lo que ejemplificas , sin embargo lo que yo necesito es que en los frames aparezcan formularios y cuando les den continuar y graben la información por php y no recargue la pagina simplemente se cierre el frame esperando que seleccionen otra opcion del menu. Un ejemplo es capturar los datos generales de un paciente en un frame y en otro capturar a texto libre su diagnostico , y en otro desplegar sus resultados escaneados de laboratorio, y en otro hacer una nueva cita. Me explico. Gracias de antemano por tus consejos y saludos.
funciona con html 5 y css 3?
Muy bueno realmente
Muchas Gracias es justo lo que necesitaba!!