Cargar en un div una página html, desde una barra de menú
Estoy armando un sitio en html con css. La página "inicio.html" posee un menú que tiene cuatro alternativas. La idea es que cada una de estas alternativas traiga un html y lo muestre dentro de un div.
Esto lo he realizado en php y ahí utilizaba "get", pero con html no sé como hacerlo sin que me reemplace toda la página. He probado algunas codificaciones en javascript, pero todas ellas reemplazan la página al completo.
1 respuesta
Esto es mucho mejor que lo hagas con un iframe.
<iframe name="miiframe" id"miiframe" src="loquesea.html"</iframe>
y en cada uno de los elementos del menú pones un enlace tal que así:
<a href="loquesea.html" target="miiframe">LO QUE SEA</a>
Lo importante aquí es el atributo target, que te manda el enlace al iframe en cuiestión y no a una página nueva.
Suerte, y espero haberte ayudado.
Miquel
Muchas Miquel, lo de iframe me dio resultado, aunque le tenia desconfianza porque ya lo había probado y no me resulto. Pero tu comentario me hizo verlo de otra forma.
Te comento los agregados que le hice para que funcionara variando el tamaño de la página que mostraba. El código del iframe lo deje de la siguiente forma:
<iframe name="unnombre" id"cuadro" src="01.html" frameborder="0" scrolling="no" height="100%" width="100%"></iframe>
El framborder lo puse en "0" para que no mostrara el marco gris, el "no" de scrolling para que no presentara las barras de desplazamiento, dado que queria que variara el tamaño según el html que esta llamando. Y height y width en 100% para que aceptara a lo llamado tal cual como esta.
Nuevamente muchas gracias.
Muy bien. Veo que has ampliado lo que te expliqué y lo has resuelto bien. Por cierto, en el código tienes un error pues falta un signo = en el id (id="cuadro"). Sepas que es habitual poner el id y el name iguales, para evitar posibles conflictos. Y los atributos frameborder y scrolling han quedado obsoletos en HTML5, aunque existen en HTML4 y haces bien en usarlos. Te lo comento para un futuro, siempre es bueno saberlo.
No olvides cerrar y puntuar la pregunta. O si necesitas algo más, ya sabes.
Miquel
Gracias nuevamente por tus aclaraciones Miquel. Y ahora recurro con otra duda. No puedo lograr que el iframe se ajuste al tamaño de los .html que se agregan.
Estuve buscando en internet y mencionan que el id debe tener height en 100%, y hay que hacer lo mismo para el html y body. Pero esto no lo resuelve.
¿Se te ocurre que puede estar pasando?
Desde ya muchas gracias.
Si, sé lo que te pasa. Por esta linea.
<iframe id="texte" name="texte" src="01.html" width="100%" frameborder="0" onload="ini()"></iframe>
Y antes, dentro mismo del <head> colocas este código javascript
<script type="text/javascript">
function ini() {
document.getElementById("texte").height = window.frames.texte.document.body.offsetHeight + 20;
}
</script>
De este modo al cargar el iframe ajustará su altura a la de su contenido (he puesto +20 pixeles para darle algo de margen). No `pongas el atributo height en el iframe.
Ya veras como se soluciona.
De todos modos, los iframes no se usan mucho. Lo normal es abrir les items del menu en otra página, ahora que la gente ya tiene banda ancha.
Miquel
Quiero decir: "PON esta linea", no "por". Lo siento!
Gracias Miquel nuevamente. Lo estuve probando y no funciona, ni en Chrome, ni en IE 9.
Copie y utilice los nombres que usaste en el ejemplo pero no se modifica el alto. Te paso el código .html para que veas de que se trata.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="estilos/inicio/principal.css" type="text/css" media="screen" />
<script type="text/javascript">
function ini() {
document.getElementById("texte").height = window.frames.texte.document.body.offsetHeight + 20;
}
</script>
</head>
<body>
<div id="cuadropincipal">
<div id="cuadromenu">
<img src="imagenes/inicio/menu.jpg" border="0" alt="" align="middle" usemap="#Map">
<map name="Map" id="Map">
<area shape="rect" coords="377,29,440,60" href="contenido/menu/00_inicio.html" target="texte">
<area shape="rect" coords="451,29,558,60" href="contenido/menu/1.html" target="texte">
<area shape="rect" coords="570,31,642,62" href="contenido/menu/02.html" target="texte">
<area shape="rect" coords="660,27,769,62" href="contenido/menu/03.html" target="texte">
<area shape="rect" coords="781,28,875,63" href="contenido/menu/04.html" target="texte">
</map>
</div><!--cierra cuadromenu-->
<iframe name="texte" id="texte" src="contenido/menu/00_inicio.html" frameborder="0" scrolling="no" width="100%" onload="ini()"></iframe>
<div id="cuadropie">
<img src="imagenes/inicio/pie.jpg" border="0" alt="" align="middle">
</div><!--cierra cuadropie-->
</div><!--cierra cuadropincipal-->
</body>
</html>y este es el .css
html{
height:100%;
}
body{
height:100%;
margin: 0;
padding: 0;
border: 0;
list-style: none;
background-image:url(../../imagenes/inicio/piedra2.png);
/*background-color:#EEf2F2;*/
background-repeat: repeat;
}
#cuadropincipal{
width:1024px;
height:100%;
margin-left:auto;
margin-right:auto;
background-color: #6F9;
}
#cuadromenu {
width:900px;
height:114px;
margin-left:auto;
margin-right:auto;
padding-top:7px;
}
#cuadropie {
width:900px;
height:200px;
margin-left:auto;
margin-right:auto;
padding-top:7px;
padding-bottom:7px;
}
#texte{
width:1024px;
height:100%;
margin:auto;
margin-left:auto;
margin-right:auto;
padding-top:3px;
padding-bottom:14px;
background-color:#C93;/*color Ocre*/
}Desde ya muchas gracias por toda tu ayuda.
De hecho, el tema este no es de trivial solución.
Creo que el problema ha de estar en la css del #texte. Quita YA el height=100%, porque le estas definiendo el alto a través del javascript y también con el css y se crea un conflicto con la altura. En su lugar seria interesante jugar con un min-height:500px; (o los pixeles que tu creas) para que nunca se haga más pequeño de un mínimo. También quita el margin:auto; porque ya defines luego los margin left y right (los margenes superior e inferior no son nunca autos)
Ah, y no olvides que siempre debes definir un DOCTYPE. Y abrir la etiqueta <html> que luego cierras al final.
Creo que con eso se arreglará. Yo lo he probado y va de maravilla.
Miquel
Miquel nuevamente muchas gracias. Funciona!!!, en Firefox e IE9, pero no en Chrome, ¿sabes por que puede ser eso?
Aprovecho para hacerte otra pregunta sobre los height, que no llego a entender quien hereda los valores, o quien los debe tener para que los div se acomoden.
Para que sepas de que estoy hablando, te paso el archivo que estoy usando para configurar los divs, junto con el .css.
La pregunta es la siguiente: ¿porque "cuadrouno" no se muestra hasta donde llega "der" (fondo amarillo), y solo responde a la altura mínima de "contenido"?
<!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" /> <link rel="stylesheet" href="../../estilos/inicio/inicio.css" type="text/css" media="screen" /> </head> <body> <div id="cuadrouno"> <div id="contenido"> <div id="izq"> <div id="fila"> <div id="col"><!--columna 1--> AVANTI<br /> Si te postran diez veces, te levantas Otras diez, otras cien, otras quinientas... No han de ser tus caídas tan violentas No tampoco, por ley, han de ser tantas. Con el hambre genial con que las plantas asimilan el humus avarientas, deglutiendo el rencor de las afrentas se formaron los santos y las santas. Obsesión casi asnal, para ser fuerte, nada más necesita la criatura y en cualquier infeliz se me figura que se rompen las garras de la suerte... ¡Todos los incurables tienen cura cinco segundos antes de la muerte </div><!--cierra columna 1--> <div id="col"><!--columna 2--> ¡PIU AVANTI!<br /> No te des por vencido, ni aun vencido, no te sientas esclavo, ni aun esclavo, trémulo de pavor, piénsate bravo, y arremete feroz, ya mal herido. Ten el tesón del calvo enmohecido, que ya viejo y ruin vuelve a ser clavo; no la cobarde intrepidez del pavo que amaina su plumaje al primer ruido. Procede como Dios que nunca llora, o como Lucifer, que nunca reza, o como el robledal, cuya grandeza necesita del agua y no la implora... ¡Que muerda y vocifere vengadora, ya rodando en el polvo tu cabeza! </div><!--cierra columna 2--> <div id="col"><!--columna 3--> Observa el amanecer por lo menos una vez al año. Estrecha la mano con firmeza, y mira a la gente de frente a los ojos. Ten un buen equipo de música. Elige a un socio de la misma manera que elegirías a un compañero de tenis: busca que sea fuerte donde tú eres débil y viceversa. Desconfía de los fanfarrones: nadie alardea de lo que le sobra. Recuerda los cumpleaños de la gente que te importa. Evita a las personas negativas; siempre tienen un problema para cada solución. Maneja autos que no sean muy caros, pero date el gusto de tener una buena casa. Nunca existe una segunda oportunidad para causar una buena primera impresión. </div><!--cierra columna 3--> </div><!--cierra fila--> <div id="fila"> <div id="col"><!--columna 1--> Los Indios Americanos<br /> seguimos armando <br /> esta es la que corresponde<br /> </div><!--cierra columna 1--> <div id="col"><!--columna 2--> A tomar el té<br /> como va a ser<br /> quien quiera oir<br /> que oiga<br /> </div><!--cierra columna 2--> <div id="col"><!--columna 3--> La tetera es de porcelana<br /> es por ahi<br /> dijo el conejo<br /> y siguio hacia la madriguera<br /> </div><!--cierra columna 3--> </div><!--cierra fila--> </div><!--cierra izq--> <div id="der"> ¿Has oído hablar del 2012 como un año en que algo va a suceder? Bueno, por un lado hay varias profecías que indican a esta fecha como un punto importante en la historia de la humanidad, pero la más significativa es el término del calendario Maya, cuya profecía se ha interpretado de distintas maneras, los más negativos piensan que ese año se termina el mundo, pero no será así, es sabido que ese año comienza una nueva era, la era de acuario. Esto tiene que ver con la rotación del sistema solar completo (ciclo solar) que va pasando por las 12 distintas eras y cada una de ellas dura 5.125 años. La era en la que estamos llamada era de piscis, comenzó el año 3.113 AC y termina el 2012. Lo cierto es que el planeta viene cambiando su estado de vibración y este cambio se ha intensificado desde el año 1989 donde los polos magnéticos se desplazaron estos últimos 20 años lo que no había ocurrido en miles de años. Sí hay un cambio en el magnetismo de la tierra, hay un cambio no sólo de conciencia sino que también una adaptación a nivel físico para esta nueva vibración. Los cambios no sólo son en nuestro planeta, sino que afectan al universo completo, y la ciencia hoy día puede dar cuenta de ello. Infórmate sobre los cambios en las tormentas solares (que son tormentas magnéticas) y verás que los científicos están al tanto de estas cosas, o pregúntale a algún aviador acerca del desplazamiento de los polos magnéticos en los últimos años, ya que los aeropuertos han tenido que modificar sus instrumentos. </div><!--cierra der--> </div><!--contenido--> </div><!--cierra cuadrouno--> </body> </html>
y el .css
#cuadrouno{
width:auto;
height:100%;
background-color:#9CF;/*color Celeste*/
}
#contenido{
width:1000px;
height:100%;
min-height:560px;
margin-left:auto;
margin-right:auto;
margin-top:7px;
margin-bottom:7px;
background-color:#63C;/*color Violeta*/
}
#izq{
width:750px;
height:100%;
float:left;
/*margin-left:0px;
margin-top:0px;*/
background-color:#F63;/*color Naranja*/
}
#fila{
width:750px;
height:100%;
float:left;
background-color: #0C9;/*color Verde botella*/
/*border: 3px dashed #93C;*/
}
#col{
width:230px;
height:100%;
margin-top:1px;
margin-left:14px;
float:left;
border: 1px solid #966;
}
#der{
width:235px;
height:100%;
float:right;
margin-left:14px;
margin-top:0px;
background-color:#FF6;/*color Amarillo*/
}Nuevamente muchas gracias.
Vamos a ver: en primer lugar el código que te funciona en FF e IE9 también debe funcionar en chrome. No hay ningún problema (a menos que has desactivado el javascript en tu navegador, claro).
En cuanto la otra pregunta, tienes un pequeño lio con los height. Ante todo, quita YA todos esos height:100% del css. Piensa que css coge el 100% del alto de contenedor padre del elemento, no del contenido del elemento, motivo por el cual no tiene sentido usar eos height:100% realmente, apenas se usa.
Más cosas: usas varios div con id=col o id=fila. MAL. En HTML no puede haber 2 elementos en la misma pagina con el mismo id, este ha de ser ÚNICO. En su lugar usa clases:
class=col o class= fila, que en css se describen como .fila o .col.
Y para el tema del descuadre en el alto que mencionas, se trata de que debes limpiar los floats. Para ello coloca la siguiente linea justo antes de cerrar el div contenido:
<div style="clear:both"></div>
Hay más maneras de hacer esto, pero esta es la más fácil para tu nivel. Sobre ello hay mucha literatura, y te convendría informarte bien. Busca en google "limpiar floats" y lee mucho sobre ello
Miquel
Muchas gracia Miquel, un éxito tu ayuda!!! Chrome sigue sin mostrarlo (los permisos de java están activados), veré como solucionarlo.
Voy a seguir tus sugerencias de lectura, y nuevamente muchas gracias.
Saludos.
No olvides cerrar la pregunta. Y sin algún día tienes otra duda, ya sabes.
Miquel
Miquel sigo con el problema de que en Chrome no toma el script y no encuentro solución, ¿sabes por que puede ser?
Gracias
Realmente no tengo idea de lo que te pasa con Chrome. He preguntado por ahí y me dicen que deberías quitar el atributo scrolling del iframe, que a Chrome no le gusta.
Pruébalo y ya me dirás. La verdad es que yo he probado tu código tal cual esta y no me da problemas con Chrome ni con nada.
Mira esta página (mía) donde uso iframes para ver las poesias. Mirala en Chrome y dime.
<a>www.detotunamica.cat/poesia/poesies2.html</a>
Y si puedes mándame el link donde tienes colgada la tuya y le daré un vistazo.
