Simular frames con css
Disculpa mi ignorancia, lo que pasa es que estoy construyendo una web en la que pensaba utilizar frames, pero por por o y razones he escuchado y leído que no es recomendable, que es mejor simularlos con css.
Ya paso a paso logre construir la plantilla que consta de una cabecera, una columna a la izquierda(donde esta el menu) y el contenedor(donde se cargara la página según el enlace que se presione en el menu de la izquierda).
Lo que no se es como direccionar los enlaces de la izquierda para que se me cargue la pagina en el contenedor, con los frame si sabia que se ponia <a href="xxx.php" target="_parent"> pero con css no se como direccionar.
Si me puedes ayudar te estaré muy agradecido.
Ya paso a paso logre construir la plantilla que consta de una cabecera, una columna a la izquierda(donde esta el menu) y el contenedor(donde se cargara la página según el enlace que se presione en el menu de la izquierda).
Lo que no se es como direccionar los enlaces de la izquierda para que se me cargue la pagina en el contenedor, con los frame si sabia que se ponia <a href="xxx.php" target="_parent"> pero con css no se como direccionar.
Si me puedes ayudar te estaré muy agradecido.
1 Respuesta
Respuesta de wail
1
Si quieres desechar el uso de frames y pasarte a CSS tendrás que cambiar el diseño de tus sitios webs.
No se puede asignar una determinada página a un div tal y como se asigna a un frame.
Parece que usas PHP.
Puedes definir dos funciones. Una que genere el html de un menú superior y otra que genere por ejemplo el menú lateral.
function mostrarMenuSuperior()
{
echo "
<div id='menu_superior'> Esto es el menú superior</div>
";
}
function mostrarMenuLateral()
{
echo "
<div id='menu_lateral'>Esto es el menú lateral</div>
";
}
No te preocupes en el código PHP por el aspecto y posición de los menús, eso se define en la plantilla CSS
Ahora en el php de cada una de las páginas de tu sitio web debes incluir la llamada a esas funciones
<html>
<head>
<link href="css/estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php
mostrarMenuSuperior();
mostrarMenuLateral();
?>
...
Contenido de la página
...
</body>
</html>
En la hoja de estilo dale la posición que quieras a los div de los menús
#menu_superior
{
position:absolute;
top:10px;
left:10px;
width:100%;
height:100px;
}
#menu_lateral
{
position:absolute;
top:100px;
left:10px;
width:50px;
height:500px;
}
De esta forma todas tus páginas tendrán un menú superior y otro lateral simulando los antiguos frames.
Si necesitas referenciar a una página externa dentro de tu página o simplemente no te ha gustado esta solución puedes utilizar el elemento <iframe> que es un frame normal pero que lo puedes ubicar en cualquier parte de la página. Aquí puedes encontrar como usarlo y referenciar los links para que se carguen en él.
Personalmente no me parece muy elegante usar un IFrame a no ser que no haya más remedio.
No se puede asignar una determinada página a un div tal y como se asigna a un frame.
Parece que usas PHP.
Puedes definir dos funciones. Una que genere el html de un menú superior y otra que genere por ejemplo el menú lateral.
function mostrarMenuSuperior()
{
echo "
<div id='menu_superior'> Esto es el menú superior</div>
";
}
function mostrarMenuLateral()
{
echo "
<div id='menu_lateral'>Esto es el menú lateral</div>
";
}
No te preocupes en el código PHP por el aspecto y posición de los menús, eso se define en la plantilla CSS
Ahora en el php de cada una de las páginas de tu sitio web debes incluir la llamada a esas funciones
<html>
<head>
<link href="css/estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php
mostrarMenuSuperior();
mostrarMenuLateral();
?>
...
Contenido de la página
...
</body>
</html>
En la hoja de estilo dale la posición que quieras a los div de los menús
#menu_superior
{
position:absolute;
top:10px;
left:10px;
width:100%;
height:100px;
}
#menu_lateral
{
position:absolute;
top:100px;
left:10px;
width:50px;
height:500px;
}
De esta forma todas tus páginas tendrán un menú superior y otro lateral simulando los antiguos frames.
Si necesitas referenciar a una página externa dentro de tu página o simplemente no te ha gustado esta solución puedes utilizar el elemento <iframe> que es un frame normal pero que lo puedes ubicar en cualquier parte de la página. Aquí puedes encontrar como usarlo y referenciar los links para que se carguen en él.
Personalmente no me parece muy elegante usar un IFrame a no ser que no haya más remedio.
Amigo, Muchas gracias por tu aclaración tan bien detallada... Exactamente estoy trabajando con php y el ejemplo que me expusiste esta muy bien explicado. Me ha sido de gran utilidad... Gracias
