Foros del Web » Creando para Internet » CSS »

Como puedo ubicar asi a los divs???

Estas en el tema de Como puedo ubicar asi a los divs??? en el foro de CSS en Foros del Web. Como puedo poner estos divs en esta posicion: pude poner el primero de la izq y dsp los dos de la derecha, pero el problema ...
  #1 (permalink)  
Antiguo 04/12/2008, 08:32
 
Fecha de Ingreso: noviembre-2008
Mensajes: 112
Antigüedad: 9 años, 1 mes
Puntos: 0
Como puedo ubicar asi a los divs???

Como puedo poner estos divs en esta posicion:




pude poner el primero de la izq y dsp los dos de la derecha, pero el problema es cuando quiero poner el de la esquina inferior izq, ahi se mueve todo lo que esta a la derecha y se va para cualquier lado!!!

Espero q puedan ayudarmee!!
  #2 (permalink)  
Antiguo 04/12/2008, 08:55
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Como puedo ubicar asi a los divs???

lo que tienes que hacer es un contenedor para cada columna, mira hice esto para explicarte mejor

Código:
#contenedor{width:800px; height:auto; display:table; background-color:#CCCCCC; margin:0 auto;}
#col_izquierda{ width:200px; height:auto;background-color:#CCCCCC; float:left;border:1px solid #000000;}
#izquierda_superior{ width:200px; height:400px; border-bottom:1px solid #000000;}
#izquierda_inferior{ width:200px; height:200px;}
#col_derecha{ width:596px; height:auto;background-color:#CCCCCC; float:right; color:#FFFFFF;border:1px solid #000000;}
#derecha_superior{ width:596px; height:300px;border-bottom:1px solid #000000;}
#derecha_inferior{ width:596px; height:300px;}
Código HTML:
<div id="contenedor">
	<div id="col_izquierda">
		<div id="izquierda_superior"></div>
		<div id="izquierda_inferior"></div>
	</div>
	<div id="col_derecha">
		<div id="derecha_superior"></div>
		<div id="derecha_inferior"></div>
	</div>
</div> 
adecua esto a tu diseño le puse medidas fijas solo para el ejemplo, espero te sirva
  #3 (permalink)  
Antiguo 04/12/2008, 15:49
 
Fecha de Ingreso: noviembre-2008
Mensajes: 112
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Como puedo ubicar asi a los divs???

No solo me funciono! me recontra funcionó!!!!!

excelente!! genio!!

capaz q es una boludes pero para mi era un carma!

me sacaste una duda gigante!!

y ya que lo hiciste tan bien, simple y claro,, para aprender un poco...

Siempre que quiero hacer cosas asi tengo q ponerle contenedores?

cuando se debe usar contenedor puntualmente?

Última edición por sebak2003; 04/12/2008 a las 16:04
  #4 (permalink)  
Antiguo 04/12/2008, 16:05
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Como puedo ubicar asi a los divs???

Que bueno que te sirva

lo de si debe siempre utilizar un contenedor depende del diseño que estes montando, no siempre lo necesitas, por ejemplo en un diseño líquido marqueteado con porcentajes o en em que tiene una cabecera y dos columnas al 100% no siempre lo necesitaras.

Última edición por willyfc; 04/12/2008 a las 16:12
  #5 (permalink)  
Antiguo 04/12/2008, 16:11
 
Fecha de Ingreso: noviembre-2008
Mensajes: 112
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Como puedo ubicar asi a los divs???

sabes q me di cuenta?

que yo en mi codigo, en el contenedor principal, no ponia "display:table" ...

Para que es eso? porq lo usas?
  #6 (permalink)  
Antiguo 04/12/2008, 16:59
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Como puedo ubicar asi a los divs???

el display table lo uso por que con eso hago que las columnas te den la impresión de que van creciendo parejas, en realidad lo puse ahí por que se me fue no lo necesitas, al menos no en el ejemplo que te dí.

lo que pasa es que para hacer una repetición de un fondo, por decir, tu contenido mide 800px de ancho pero nunca sabes cuanto puede llegar a medir de alto, entonces se colocan los fondos de manera que el fondo se repita sin importar cuanto pueda llegar a tener de largo el contenido y antes yo utilizaba tablas para poder hacer una repetición y con el display table en el div que va a tener el contenido no necesito tablas.

te lo explicaré con un ejemplo:

corta una imagen como esta de 800px de ancho y solo 1px de alto como si estuvieras simulando 3 columnas izquierda - contenido - derecha



y luego coloca este código:

Código:
#contenedor{ width:800px; height:auto; display:table;background:url(imagenes/prueba.jpg) repeat-y}
#col_izq{ width:200px; height:auto; float:left;}
#col_der{ width:200px; height:auto; float:right;}
Código HTML:
<div id="contenedor">
	<div id="col_izq">
		sdfasf asdf asdf asdf
	s sasdfsdf sdf asdf asdf asdf </div>
	<div id="col_der">
	sdf asfas dfasf asfasf  sadfasdfs adfa sdfasdf adf
	</div>
</div> 
pruebalo con y sin display table y verás el resultado

Bye
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:24.