(AYU) Altura contenido Web autoajustable

SEBITUS · Septiembre 26, 2007, 00:07:27

Hola
La idea es que el sitio Web tenga un header y un footer fijo y que varíe el contenido -que iría entre ambas partes- según cada sección y cada página, y que se ajusten automáticamente la altura.
Intenté hacerlo con iframes y lo conseguí a medias pues ninguna solución que probé funciona para todos los navegadores. O funciona para el Explorer o para Firefox pero nunca en los dos.
No sé si hay alguna solución definitiva para los iframes o hay otras maneras de hacerlo, manteniendo siempre la dinámica de la altura.
Muchas gracias.

KameL · Septiembre 26, 2007, 01:41:46

Lo podes hacer hasta con tablas comunes. Le das una altura específica al header y al footer, y no le pones altura al marco central... Con eso lograrías lo que querés...
También podes implementar eso, si decidís hacerlo con frames, iFrames, etc...

SEBITUS · Septiembre 26, 2007, 02:08:56

gracias Kamel pero creo que no me expliqué bien.. o no sé cómo hacer lo que me decís con tablas

por ejemplo.. si hago una tabla con tres filas... header... contenido... footer.. y esa es mi página principall... cómo hago para abrir una nueva página solo en la parte del contenido.. manteniendo el header y el footer y sin que tengan que volver a cargarse..

gracias por tu tiempo

Predicador · Septiembre 26, 2007, 03:25:38

Podes hacerlo usando FRAMES (en vez de IFRAMES que es un poco mas sucio) y es super simple.
Sino podes hacer algo mas elavorado usando CSS para definir estilos del header y del footer y luego componer una pagina final usando PHP y hasta para complicarla mas podes tambien cargar el contenido mediante AJAX asi no recarga el header y footer cada vez.
Baii

KameL · Septiembre 26, 2007, 17:20:12

Ahora entendí bien... Y coincido con la respuesta de Predi, frames mejor que iFrames, PHP mejor que frames.

SEBITUS · Septiembre 26, 2007, 20:40:59

muchas gracias.. pero la verdad es que no sé mucho de programación web así que me limito a lo que puedo

en otro foro (Nits) me pasaron este código y me sirvió muchísimo aunque todavía estoy teniendo problemas sobre todo con la página de inicio.. que me la achica toda en firefox.. el resto de los links andan perfecto en Firefox y Explorer

PRINCIPAL:
(mejorado)
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Test IFRAME</title>

<script type="text/javascript">
// <![CDATA[

function recalcula(){
var daH = (document.body && document.body.clientHeight)? parent.interior.document.body.clientHeight: 0;
daH = (document.addBinding)?daH+20:daH+5;
//alert(daH);
document.getElementById("elIframe").style.height = daH + "px";
}

function cargar(url){
parent.interior.location.href=url;
}

// ]]>
</script>

<style type="text/css">
iframe {
width : 350px;
overflow : hidden;
}
</style>

</head>
<body>

<a href="cargada.html" onclick="cargar(this.href);return false;">cargada</a> |
<a href="cargada2.html" onclick="cargar(this.href);return false;">cargada2.html</a> |
<a href="cargada3.html" onclick="cargar(this.href);return false;">cargada3.html</a>

<iframe id="elIframe" name="interior" scrolling="no" src ="cargada.html" onload="recalcula()"></iframe>

</body>
</html>

EXTERNO/S:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Test Externa</title>

<style type="text/css">
html, body {
padding : 0;
margin : 0;
width : 350px;
}
</style>

</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras vitae neque ac massa porttitor pretium. Ut iaculis, lacus sit amet blandit interdum, arcu ipsum mollis felis, sed cursus elit purus vel ligula. Maecenas turpis libero, bibendum vitae, vehicula eu, dignissim non, urna. Sed sagittis. Cras eu augue vel nunc congue rutrum. Vestibulum adipiscing, justo sit amet vehicula tincidunt, turpis nulla tincidunt sem, sit amet volutpat odio felis sed ante. Sed tincidunt. Etiam ac leo. Donec leo neque, luctus id, mattis nec, aliquet vitae, magna. Nam et nulla ut odio molestie semper. Sed aliquam enim sed nunc. Nulla egestas pretium wisi. Nam vitae dui. Phasellus consectetuer. Nulla nulla ante, porta a, facilisis et, venenatis et, turpis. Sed condimentum, felis et fermentum dictum, quam velit consectetuer risus, in posuere nunc arcu quis magna. Aenean ultrices sollicitudin ipsum. Maecenas quam arcu, vestibulum vel, ultrices eget, auctor sit amet, ante. Donec aliquet, tortor at condimentum tempus, dolor lectus interdum odio, at vulputate risus lectus eu eros.</p>
<p>Aenean tincidunt pellentesque lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam leo. Vestibulum hendrerit. Nullam a enim sit amet neque rhoncus euismod. Aliquam adipiscing. Quisque rutrum vulputate nibh. Integer venenatis commodo orci. Donec feugiat, turpis eu malesuada sagittis, tortor sapien mollis nibh, vel mollis leo neque in magna. Etiam in elit. Cras posuere mauris ac felis.</p>
</body>
</html>

Predicador · Septiembre 27, 2007, 03:07:20

Cita de: SEBITUS en Septiembre 26, 2007, 20:40:59
muchas gracias.. pero la verdad es que no sé mucho de programación web así que me limito a lo que puedo

O podrias haber intentado leer sobre frames en html y verias que es mucho mas simple, pero bueno. De todos modos aca te pongo un ejemplo y espero que te inspire a leer mas sobre el tema y dejes de decir "no se" para decir "dame un ratito que lo leo".

Se deben crear 4 archivos (para este caso, ya que quierees tener un contenido, un header y un footer), uno contenda la definicion de los frames y luego los 3 restantes cada uno de los frames; entonces:
index.html

Código [Seleccionar]

<html>
<head>
  <title>Uso de frames</title>
</head>
<frameset rows="20%,70%,10%">
  <frame src="header.html">
  <frame src="contenido.html" name="principal">
  <frame src="footer.html">
</frameset>
</html>

con diferentes parametros podes definir si queres que se vena las barras de desplazamientos horizontales, los bordes de los frames, etc, para mas info leer aca en español.

header.html

Código [Seleccionar]

<html>
<head>
  <title>El header</title>
</head>
<body>
<h1>Header visible</h1>
<a href="http://www.google.com" taget="principal">google</a>
</body>
</html>

El header tiene un link a google, que cuando lo clickees (como dice taget="principal") el link ese se abrira en el frame llamado principal (fue nombrado en index.html donde se le define un nombre a un frame).

contenido.html

Código [Seleccionar]

<html>
<head>
  <title>El contenido principal</title>
</head>
<body>
<p>aca va el contenido de lo que quieras</p>
</body>
</html>

footer.html

Código [Seleccionar]

<html>
<head>
  <title>El footer</title>
</head>
<body>
<h3>Footer visible</h3>
</body>
</html>

Crear todos los archivos con sus nombres y luego abrir index.html en tu navegador (Opera! opera!).
Baii

Noticias:

(AYU) Altura contenido Web autoajustable

SEBITUS

KameL

SEBITUS

Predicador

KameL

SEBITUS

Predicador