Emular Frames con DIV

leydiariana · #1 (**permalink**) 14/02/2011, 09:50

Soy algo nuevo en el uso de Divs, y he leido en muchas partes que los frames ya no se usan, asi que quisiera encontrar una salida.

Como podria hacer que una etiqueta DIV actúe como frame
Bueno la parte de diagramar ya esta:
- Div Encabezado
- Div Cuepo
- Div derecho
- Div Centro
- Div Izquierdo

Lo que me gustaria lograr es que interactuen el div encabeza y el div derecho y que su contenido se aprecie en el div centro.

No tengo la menor idea

HELPPPPPPPPP!!!!

jomaruro · #2 (**permalink**) 14/02/2011, 13:23

Hola:

Quizá deberías utilizar AJAX.

Saludos.

uikekarallo · #3 (**permalink**) 14/02/2011, 13:37

necesitas aprender CSS (sitio1, sitio2 en inglés).

la manera de maquetar esos div, como ejemplo, sería la siguiente:

Código HTML:

<div id="wrapper"> <!-- aquí meteré todas las capas -->
  <div id="superior">logotipo</div> <!-- aquí podría ir el logo -->
  <div id="content"> <!-- aquí meteremos todo el contenido -->
    <div id="izquierdo">soy un menú</div>
    <div id="centro">texto y más cosas</div>
    <div id="derecho">otro menú</div>
  </div>
  <div id="footer">hola!</div> <!-- y este sería el pie de página -->
</div>

bien, eso es sólo un ejemplo. visto así verás un texto debajo de otro, ya que los div, por defecto, son elementos en bloque. pero ahora crea un archivo nuevo y llámale style.css. entre las etiquetas <head></head> pon lo siguiente:

Código HTML:

<link rel="stylesheet" type="text/css" href="style.css" />

de esta manera vinculas ese nuevo archivo que has creado a lo que tienes. muy bien, para darle forma, tu archivo style.css debería de quedar de la siguiente manera:

Código CSS:

Ver original#wrapper
{
  width: 800px; /*indicas el ancho total para el sitio*/
  height: auto; /*con el valor auto le decimos que el alto vaya creciendo con el contenido */
  margin: 0 auto; /*el primer valor indica el margen top y bottom (arriba y abajo) y el segundo el margen right y left (derecho e izquierdo). podrías poner los 4 valores en este orden: 0 auto 0 auto (top,right,bottom,left). cuando los valores para right y left se establecen en auto en la capa que contiene a todas las demás, se centra en la pantalla del usuario*/
}
  #superior
  {
    width: 100&#37;; /*como esta capa está dentro de wrapper, 100% equivale al total de la capa padre, que son 800px*/
    text-align: center;
  }
    #content /*este lo dejamos vacío, pero podríamos decirlo que todo lo que haya dentro sea de color azul, por ejemplo*/
    {
    }
    #izquierdo
    {
      float: left; /*de esta manera flotarás la capa a la izquierda*/
      width: 200px;
      color: green;
    }
    #centro
    {
      float: left; /*esta capa también la flotamos a la izquierda, para pegarla a la anterior*/
      width: 400px;
      text-align: center;
      color: blue;
    }
    #derecho
    {
      float: right; /*y esta última la flotaremos a la derecha*/
      width: 200px; /*fíjate que la capa izquierda mide 200px, la central 400px y esta última otros 200px. la suma hace 800px, que es el ancho que tenemos disponible. de esta manera se verá todo correctamente*/
      text-align: right;
      color: red;
    }
    #footer
    {
      clear: both; /*la propiedad float hace que un elemento salga del flujo del documento. cuando queramos que el flujo vuelva a su sitio, utilizamos la propiedad clear en el elemento siguiente (el que debe volver al sitio)*/
      text-align: center;
    }

y bueno, a modo de ejemplo rápido, esto para empezar te servirá, ya que realiza lo que pides. hay más maneras de hacerlo, esta es la de un diseño de ancho fijo (utilizando medidas en píxeles). para empezar creo que es lo más sencillo.
el css es un lenguaje con una sintaxis muy sencilla y la base también es realmente sencilla de aprender.

un saludo y suerte con tus futuros proyectos.

pd: este post iría mejor en el foro de CSS.

edito: donde pone & # 3 7 ; es un %

leydiariana · #4 (**permalink**) 14/02/2011, 14:49

Muy bueno tu aporte pero mi pregunta iba por el lado de como hacer que interactuen los div superior e izquierdo con el div centro.
En esa parte me confundo, no se como hacer ke la etiqueta div central cambie de acuerdo a ordenes ejecutadas por los menus.

uikekarallo · #5 (**permalink**) 14/02/2011, 15:00

ah! vaya! bueno, pues queda para el que como yo, lo entienda mal ^^

la manera, como te comentaban ahí arriba, es por medio de ajax. para hacerlo simple, te recomiendo utilizar jQuery

un ejemplo sencillo sería el siguiente:

Código HTML:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <!-- cargamos jQuery -->

<script type="text/javascript"> <!-- y a trabajar, aunque mejor utilizar un archivo js en lugar de poner el javascript directamente en el html -->
$('#izquierdo').live('click' , function()
{
  $('#centro').load('pagina.html #capa_a_cargar')
});
</script>

eso vendría a ser: al hacer click en el elemento con id izquierdo (en este caso toda una capa), en la capa con id "centro" cargas el div #capa_a_cargar de esta pagina.html.

a ver si de esta te doy la solución adecuada :)

un saludo.

GatorV · #6 (**permalink**) 14/02/2011, 15:06

Tema movido desde Web general a AJAX