Simular frames (marcos) con HTML y CSS
(Ninguna valoración todavía)
Cargando...Efecto muy sencillo donde se simula la utilización de marcos, y que solo se realiza con HTML y CSS.
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" xml:lang="es">
<head>
<title>Ejemplo</title>
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body>
<h1>Ejemplo de simulación de marcos o frames</h1>
<div id="columna">
<h2>Menú</h2>
<ul>
<li><a href="#marco1">Marco 1</a></li>
<li><a href="#marco2">Marco 2</a></li>
</ul>
</div>
<div id="contenido">
<div id="marco1">
<h2>Contenido 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper sem quis felis pulvinar laoreet. Donec euismod erat semper diam sodales non vehicula mauris elementum. Aliquam commodo sollicitudin nisl, eget consequat turpis tempor vitae. Suspendisse rhoncus erat nec tellus vulputate ac egestas nulla tristique. Mauris nisl enim, fringilla non dapibus ac, tincidunt ullamcorper ligula. Etiam ut tellus eros. Donec congue dignissim feugiat. Aenean pellentesque convallis leo ut facilisis. Vestibulum ac turpis quis felis vestibulum vulputate a ac eros. Aenean ultricies sapien quis sapien congue nec rhoncus ligula consectetur. Nam dolor orci, feugiat vel vestibulum sit amet, pellentesque quis sem. Proin tempus mauris quis lacus tempus fringilla. Cras ut justo nec nunc porta hendrerit.</p>
<p>Nulla turpis nunc, posuere at varius a, fermentum non orci. Aenean condimentum erat vel justo luctus consequat. Donec vehicula erat in risus pretium faucibus. Curabitur tempus vehicula libero non commodo. Nullam eu mauris a nulla molestie sodales eu vitae ligula. Nulla elementum sem quis dolor tincidunt nec pellentesque mauris ultrices. Maecenas imperdiet, erat ac porta rutrum, metus elit lacinia lectus, sit amet pulvinar risus metus quis tortor. Morbi sed nisi turpis, sit amet convallis nulla. Fusce quis ullamcorper mauris. Integer commodo semper posuere. Fusce elementum nisl ac augue consequat nec pulvinar dolor laoreet. Mauris nulla tortor, mollis quis imperdiet vel, rhoncus quis erat. Aliquam lectus metus, consectetur vitae feugiat vel, tincidunt nec velit. </p>
</div>
<div id="marco2">
<h2>Contenido 2</h2>
<p>Nam urna nisl, blandit vitae molestie id, mattis ut augue. Ut sit amet libero felis, at scelerisque neque. Nulla luctus porta sapien, vel imperdiet odio euismod et. Donec id adipiscing felis. Nam pellentesque mollis pellentesque. Aliquam vel diam nec ante consectetur auctor sed vitae augue. Fusce erat massa, volutpat ac vulputate ac, dictum non arcu. Phasellus suscipit bibendum massa vel iaculis. Nullam bibendum viverra orci id aliquet. Duis consequat neque id lectus aliquet sed feugiat nisl adipiscing. Nunc suscipit est nec purus faucibus ultrices. </p>
<p>Mauris at velit nulla, id bibendum neque. Nullam et augue id elit convallis fringilla vel non urna. Nulla lectus ante, fermentum nec dapibus vitae, tincidunt vel lectus. Pellentesque luctus quam a mi mollis gravida. Curabitur est lorem, aliquam sed varius nec, adipiscing vel sapien. Donec at tortor tellus. Suspendisse vitae neque vitae odio mollis ultricies ac sed mi. Aenean et nisl non mauris molestie tempor et sed eros. Maecenas scelerisque placerat eros et bibendum. Mauris venenatis, enim sodales elementum consectetur, tellus nisi euismod sem, dapibus pulvinar lectus lorem nec enim. Quisque auctor fermentum scelerisque. Etiam sed nulla quis eros pellentesque convallis sit amet eu neque. Aenean mattis placerat vehicula. Cras eget lacus odio. Cras commodo fringilla pharetra. In eget lacus metus, dignissim rutrum diam. Fusce sed magna ut nulla cursus feugiat. Fusce fringilla quam id quam auctor feugiat. Nulla tincidunt venenatis diam, in varius libero imperdiet vitae. </p>
</div>
</div>
</body>
</html>
El archivo CSS
Lo más interesante de este ejemplo se encuentra en las propiedades CSS y en la utilización de los enlaces 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 párrafos, títulos, listas, etc.
Luego detallaremos las propiedades de la capa que contendrá la lista y que servirá como una especie barra lateral (sidebar), cuyas propiedades no detallaremos porque no tienen interés para el ejemplo.
La capa “contenido”, también tiene posición absoluta y se ha determinado que el contenido que la desborde no sea visible, 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 “marco1” y “marco2”, que simplemente serán de 100% 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.
4 respuestas
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!!