Cargar Links en Div

[bjorkboy]

Hola, esta es mi primera prueba con css, baje un template y lo estoy modificando, todo iba bien hasta que intente cargar en el div "content" desde el menu que esta en el div "navigation", como debo hacer para que al hacer click cargue en el div "contenedor" tipo Iframe?

Espero su ayuda, gracias!

Aqui les dejo el codigo del css










html {min-height: 100%;}

* {
margin: 0;
padding: 0;
}

a {color: #963;}
a:hover {color: #C60;}

img {
border: 0;
}

body {
background: #006699 url(img/bg.jpg) repeat-x left bottom;
color: #444;
font: normal 62.5% Tahoma,sans-serif;
}

p,code,ul {padding-bottom: 1.2em;}

li {list-style: none;}

h1 {
font: normal 1.8em Tahoma,sans-serif;
margin-bottom: 4px;
}





h1,h2,h3 {padding-top: 6px;}

/* misc */
.clearer {clear: both;}

.left { float: left; }

.right {float: right;}

/* structure */
.container {
background-color: #FFF;
font-size: 1.2em;
margin: 0 auto;
padding: 0 10px 10px;
width: 780px;
}

/* header */
.top {
padding: 10px 10px 0;
}

/* title */
.header {
background-color: white;
font-size: 1.2em;
height: 105px;
margin: 0 auto;
padding: 10px 10px 5px;
width: 780px;
}
.header .left, .header .right {
background-color: #257CA9;
color: #FFF;
height: 105px;
}
.header .left {
background-color: #006699;
font: normal 2.8em "Trebuchet MS",sans-serif;
line-height: 105px;
width: 564px;
text-align: left;

}
.header .right {
overflow: auto;
width: 212px;
}
.header .right p,.header .right h2 {padding: 0 16px;}
.header .right h2 {padding-top: 16px; font: normal 1.6em "Trebuchet MS",sans-serif;}

/* navigation */
.navigation {
background: #D9E1E5 url(img/nav.jpg);
border: 1px solid #D8EBD8;
height: 41px;
}
.navigation a {
background: transparent url(img/nav.jpg) left top repeat-x;
border-right: 1px solid #D8EBD8;
color: #FFFFFF;
display: block;
float: left;
font: bold 1.1em sans-serif;
line-height: 41px;
padding: 0 18px;
text-decoration: none;
}
.navigation a:hover {
background: transparent url(img/nav.jpg) left bottom;
color: #CCCCCC;
}

/* main */
.main {
border-top: 4px solid #FFF;
background: url(img/bgmain.gif) repeat-y;
}

/* sub navigation */
.sidenav {
float: right;
width: 210px;
}
.sidenav h2 {
color: #333300;
font-size: 1em;
line-height: 30px;
margin: 0;
padding-left: 12px;
}
.sidenav ul {
padding: 0;
border-top: 1px solid #D8EBD8;
}
.sidenav li {border-bottom: 1px solid #D8EBD8;}
.sidenav li a {
font-size: 1.1em;
color: #333300;
display: block;
padding: 8px 0 8px 5%;
text-decoration: none;
width: 95%;
}
.sidenav li a:hover {
background-color: #ebebeb;
color: #654;
}

/* content */
.content {
float: left;
margin: 10px 0;
padding: 0 16px;
width: 531px;
}
.content .descr {
color: #664;
font-size: 0.9em;
margin-bottom: 6px;
}
.content li {
list-style: url(img/li.gif);
margin-left: 18px;
}

.content .imgright {
padding: 5px;
border: 1px solid #D8EBD8;
margin-left: 4px;
float: right;
}

.content p {
color: #969696;
}


/* footer */
.footer {
background: url(img/bgfooter.gif) repeat-x;
color: #FFF;
font: bold 1em sans-serif;
line-height: 39px;
text-align: center;
}
.footer a,.footer a:hover {color: #FFF;}

div.tabMain {
background-color: #c0c0c0;
border: 1px solid #000000;
padding: 1em;}










Saludos

[Mikmoro]

Yo diría que con javascript.

Mikel.

[bjorkboy]

Mikmoro, con javascript funciona bien?, se alarga el div junto con el contenido verdad?

[Mikmoro]

Sï, concretamente mejor con AJAX, si es que entiendo bien lo que queires hacer.

Mikel.

[bjorkboy]

lo que yo necesito es que al clicar en un item "X" del menu, se cargue un html en el div, "content", si se puede, me podrias decir como?

[JavierB]

Mensaje movido al foro de AJAX desde Css.

Saludos,

[Mikmoro]

Ya suponía que te iban a mover al foro de AJAX, que es donde debe estar este mensaje.

Mira, aquí te pongo un ejemplo de lo que quieres hacer: cargar un archivo externo dentro de un contenedor de tu html. Tienes todos los archivos necesarios en la misma carpeta. Creo que no es difícil de entender. Prueba a estudiarlo e imitar lo que hay ahí, y si tienes problemas consultas de nuevo.

http://www.menoslobos.com/mikel/foro...mplo_ajax.html

Mikel.

[MikiBroki]

Muy interesante. No sabía que podría haber más de un BODY en una misma página.

Y perdón por mi ignorancia en este tema, pero... ¿este método es válido sólo para HTML "plano"?, ¿si la página contiene javaScript lo carga también?, ¿y si a su vez carga otros ficheros CSS/javaScript"?, y en caso de cargarse el javaScript, ¿si hay una variable con el mismo nombre en la página principal?

Muchas gracias

[Mikmoro]

Iniciado por MikiBroki

Muy interesante. No sabía que podría haber más de un BODY en una misma página.

Y perdón por mi ignorancia en este tema, pero... ¿este método es válido sólo para HTML "plano"?, ¿si la página contiene javaScript lo carga también?, ¿y si a su vez carga otros ficheros CSS/javaScript"?, y en caso de cargarse el javaScript, ¿si hay una variable con el mismo nombre en la página principal?

Muchas gracias

Hola, Miki.
No es que haya dos BODY's, porque el html cargado nunca está realmente físicamente en el código del html original.

Yo siempre lo he usado para html plano, al que aplico los estilos desde el html original, y si debo cargar un javascript para él, lo cargo en el original. El problema es con los "onload", que no funcionan. Hay que buscar otra manera de hacerlo.

Realmente este de cargar css y javascripts del archivo cargado es uno de los caballos de batalla de AJAX, y por eso es un asunto del que se discute bastante por aquí. Como aquí hay gente que sabe mucho de esto, se han aportado diversas soluciones, por ejemplo:

http://www.forosdelweb.com/f127/permitir-ejecutar-javascript-contenido-llamado-457513/

Había hace poco un post que se titulaba algo como "solución definitiva para el asunto de...", pero no lo encuentro.

Mikel.