Foros del Web » Creando para Internet » CSS »

colocar el 3er div

Estas en el tema de colocar el 3er div en el foro de CSS en Foros del Web. hola, he estado probando las diferentes formas de alinear 3 divs en horizontal dentro de un contenedor pero no consigo una manera facil, seguramente se ...
  #1 (permalink)  
Antiguo 28/05/2010, 20:07
 
Fecha de Ingreso: mayo-2010
Mensajes: 10
Antigüedad: 7 años, 6 meses
Puntos: 0
colocar el 3er div

hola, he estado probando las diferentes formas de alinear 3 divs en horizontal dentro de un contenedor pero no consigo una manera facil, seguramente se podrá metiendolo dentro de otro div, pero me pregunto si habria otra manera mas facil.

esto es lo que tengo y se descuadra al final:

Código HTML:
<div id="contenedor">
<div id="top"><img src="imagenes/b1_s1.jpg" alt="" width="900" height="307" /></div>
  <div id="laterizq">IZQUIERDA</div>
  <div id="centro">CENTRO</div>
  <div id="derecha">DERECHA</div>
</div> 
Código:
#contenedor {
	width: 900px;
	margin: 0 auto;
	background-color: #090;
	height: 400px;
	padding: 0;
#top {
	background-color: #09F;
	height: 307px;
	width: 900px;
	float: right;
	margin: auto;
}
#laterizq {
	background-color: #F00;
	width: 250px;
	float: left;
}
#centro {
	width: 510px;
	background-color: #F90;
	margin-left: 250px;
}
#derecha {
	background-color: #FF0;
	width: 140px;
	float: right;
}
  #2 (permalink)  
Antiguo 28/05/2010, 21:39
Avatar de SPAWN3000  
Fecha de Ingreso: marzo-2008
Ubicación: Bogota
Mensajes: 858
Antigüedad: 9 años, 9 meses
Puntos: 15
Respuesta: colocar el 3er div

Busca en GOOGLE 960 grid Framework...
  #3 (permalink)  
Antiguo 28/05/2010, 21:43
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 8 meses
Puntos: 1314
Respuesta: colocar el 3er div

A ver ponlo así:

Código CSS:
Ver original
  1. #contenedor {
  2.     width: 900px;
  3.     margin: 0 auto;
  4.     background-color: #090;
  5.     height: 400px;
  6.     padding: 0;
  7. #top {
  8.     background-color: #09F;
  9.     height: 307px;
  10.     width: 900px;
  11.     float: right;
  12.     margin: auto;
  13. }
  14. #laterizq {
  15.     background-color: #F00;
  16.     width: 250px;
  17.     float: left;
  18. }
  19. #centro {
  20.     width: 510px;
  21.     background-color: #F90;
  22.     float:left;
  23. }
  24. #derecha {
  25.     background-color: #FF0;
  26.     width: 140px;
  27.     float: right;
  28. }

Y no pongas las medidas en el HTML, ya lo tienes en el CSS (aunque diferentes por cierto).

Cita:
Iniciado por SPAWN3000 Ver Mensaje
Busca en GOOGLE 960 grid Framework...
Eso a que viene???

Saludos
__________________
Grupo Telegram Docker en Español
  #4 (permalink)  
Antiguo 28/05/2010, 21:47
Avatar de eZakto  
Fecha de Ingreso: julio-2008
Mensajes: 214
Antigüedad: 9 años, 5 meses
Puntos: 5
Respuesta: colocar el 3er div

Yo creo que se arregla editando el HTML, poniendo los dos flotantes antes del contenedor:
Código HTML:
Ver original
  1. <div id="contenedor">
  2. <div id="top"><img src="imagenes/b1_s1.jpg" alt="" width="900" height="307" /></div>
  3.   <div id="laterizq">IZQUIERDA</div>
  4.   <div id="derecha">DERECHA</div>
  5.   <div id="centro">CENTRO</div>
  6. </div>
__________________
eZakto™
  #5 (permalink)  
Antiguo 29/05/2010, 06:42
 
Fecha de Ingreso: mayo-2010
Mensajes: 10
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: colocar el 3er div

Cita:
Iniciado por Carlangueitor Ver Mensaje
A ver ponlo así:

Código CSS:
Ver original
  1. #contenedor {
  2.     width: 900px;
  3.     margin: 0 auto;
  4.     background-color: #090;
  5.     height: 400px;
  6.     padding: 0;
  7. #top {
  8.     background-color: #09F;
  9.     height: 307px;
  10.     width: 900px;
  11.     float: right;
  12.     margin: auto;
  13. }
  14. #laterizq {
  15.     background-color: #F00;
  16.     width: 250px;
  17.     float: left;
  18. }
  19. #centro {
  20.     width: 510px;
  21.     background-color: #F90;
  22.     float:left;
  23. }
  24. #derecha {
  25.     background-color: #FF0;
  26.     width: 140px;
  27.     float: right;
  28. }


Saludos
Lo he mirado y creo que es lo mismo que tengo puesto, no veo diferencia. Ya arregle lo del height.
  #6 (permalink)  
Antiguo 29/05/2010, 06:43
 
Fecha de Ingreso: mayo-2010
Mensajes: 10
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: colocar el 3er div

Cita:
Iniciado por eZakto Ver Mensaje
Yo creo que se arregla editando el HTML, poniendo los dos flotantes antes del contenedor:
Código HTML:
Ver original
  1. <div id="contenedor">
  2. <div id="top"><img src="imagenes/b1_s1.jpg" alt="" width="900" height="307" /></div>
  3.   <div id="laterizq">IZQUIERDA</div>
  4.   <div id="derecha">DERECHA</div>
  5.   <div id="centro">CENTRO</div>
  6. </div>
Eso ya lo habia probado, y que va, lo he intentado borrandolo todo y poniendolo en ese orden y de mil maneras y nada...
  #7 (permalink)  
Antiguo 29/05/2010, 06:54
 
Fecha de Ingreso: mayo-2010
Mensajes: 10
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: colocar el 3er div

ok amigos, he probado a quitarle el div de arriba "top" y ahora si se encaja con esto asi, osea como lo tenia ya antes.

Código:
#laterizq {
	background-color: #F00;
	width: 250px;
	float: left;
}
#centro {
	width: 510px;
	background-color: #F90;
	margin-left: 250px;
}
#derecha {
	background-color: #FF0;
	width: 140px;
	float: right;
}
¿¿¿¿Pero porque pasa esto????
  #8 (permalink)  
Antiguo 29/05/2010, 10:00
 
Fecha de Ingreso: mayo-2010
Mensajes: 10
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: colocar el 3er div

vale, creo que el fallo es que en dreamweaver se ve mal, pero en el explorador bien.

¿hay alguna manera de qrreglarlo en dreamweaver para que salga derecho para que no este tan desordenado?
  #9 (permalink)  
Antiguo 29/05/2010, 11:34
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 8 meses
Puntos: 1314
Respuesta: colocar el 3er div

El código que te di no es igual, pero bueno....
__________________
Grupo Telegram Docker en Español
  #10 (permalink)  
Antiguo 29/05/2010, 12:22
 
Fecha de Ingreso: mayo-2010
Mensajes: 10
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: colocar el 3er div

gracias de todas formas
  #11 (permalink)  
Antiguo 29/05/2010, 12:36
 
Fecha de Ingreso: marzo-2010
Mensajes: 51
Antigüedad: 7 años, 8 meses
Puntos: 1
Respuesta: colocar el 3er div

Check this out

http://www.dynamicdrive.com/style/layouts/

(ayayay... muy ingles xD)

Ahi hay layouts de columnas... te puedes inspirar de ahí ;)
__________________
Julio Flores (@JulioRFA)
JFA Studios
  #12 (permalink)  
Antiguo 29/05/2010, 14:23
 
Fecha de Ingreso: mayo-2010
Mensajes: 10
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: colocar el 3er div

es una buena guia, buena pagina.

Etiquetas: Ninguno
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 17:41.