Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] posicionamiento de divs

Estas en el tema de posicionamiento de divs en el foro de CSS en Foros del Web. Hola: Quiero acomodar los divs de esta forma: e intentado con posicionamientos absolute, relative pero no logro conseguirlo este es mi código, he borrado los ...
  #1 (permalink)  
Antiguo 21/07/2014, 10:55
Koyoter
Invitado
 
Mensajes: n/a
Puntos:
posicionamiento de divs

Hola:

Quiero acomodar los divs de esta forma:


e intentado con posicionamientos absolute, relative pero no logro conseguirlo

este es mi código, he borrado los posicionamientos

CSS:

body{
margin:0px;
}
#contenedor{
width:100%;
background:#666;
}
#cabecera{
width:700px;
height:150px;
background:#000;
margin:0 auto;
}
#cuerpo{
width:700px;
height:450px;
background:#CCC;
margin:0 auto;
}
#contenido1{
width:650px;
height:50px;
background:#FFC;
}
#contenido2{
width:650px;
height:100px;
background:#FC3;
}
#contenido3{
width:650px;
height:200px;
background:#FFF;
}
#pie{
width:700px;
height:50px;
background:#000;
margin:0 auto;
}


HTML:
<body>
<div id="contenedor">
<div id="cabecera">
</div>
<div id="cuerpo">
<div id="contenido1">
</div>
<div id="contenido2">
</div>
<div id="contenido3">
</div>
</div>
<div id="pie">
</div>
</div>
</body>


y me queda así:


como debo usar los position???
  #2 (permalink)  
Antiguo 21/07/2014, 11:27
 
Fecha de Ingreso: mayo-2013
Mensajes: 207
Antigüedad: 10 años, 10 meses
Puntos: 31
Respuesta: posicionamiento de divs

Por favor (al menos las próximas veces) usa la opción de "Highlight" en vez de pegarlo directamente y dar colores. Mira por ejemplo tu html como se ve mejor usandolo.
Código HTML:
Ver original
  1. <div id="contenedor">
  2. <div id="cabecera">
  3. </div>
  4. <div id="cuerpo">
  5. <div id="contenido1">
  6. </div>
  7. <div id="contenido2">
  8. </div>
  9. <div id="contenido3">
  10. </div>
  11. </div>
  12. <div id="pie">
  13. </div>
  14. </div>
  15. </body>

¿Position para qué? La posición por defecto es relative. Por ejemplo para centrarlos horizontalmente no entiendo porque no haces como con el div #cuerpo. Y ya de paso añades algo de margin "vertical" a los divs de dentro y ya lo tienes.
  #3 (permalink)  
Antiguo 21/07/2014, 12:42
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: posicionamiento de divs

Cita:
Iniciado por alzacon Ver Mensaje
La posición por defecto es relative.
static
  #4 (permalink)  
Antiguo 21/07/2014, 14:00
 
Fecha de Ingreso: mayo-2013
Mensajes: 207
Antigüedad: 10 años, 10 meses
Puntos: 31
Respuesta: posicionamiento de divs

Cita:
Iniciado por pzin Ver Mensaje
static
ya ni acordaba de que había más positions

Si usas posición absoluta o relativa puedes usar top, left, ... para colocar, aunque más facil con margin (a no ser que otra vez pzin -> )
  #5 (permalink)  
Antiguo 21/07/2014, 19:30
Avatar de Nelsonfmc  
Fecha de Ingreso: febrero-2014
Ubicación: Miranda
Mensajes: 4
Antigüedad: 10 años, 1 mes
Puntos: 0
Respuesta: posicionamiento de divs

¿Y así?

Código CSS:
Ver original
  1. body{
  2. margin:0px;
  3. }
  4. #contenedor{
  5. width:100%;
  6. background:#666;
  7. }
  8. #cabecera{
  9. width:700px;
  10. height:150px;
  11. background:#000;
  12. margin:0 auto;
  13. }
  14. #cuerpo{
  15. padding:50px;
  16. width:700px;
  17. height:450px;
  18. background:#CCC;
  19. margin:0 auto;
  20. }
  21. #contenido1{
  22. width:650px;
  23. height:50px;
  24. background:#FFC;
  25. }
  26. #contenido2{
  27. margin-top:25px;
  28. width:650px;
  29. height:100px;
  30. background:#FC3;
  31. }
  32. #contenido3{
  33. margin-top:25px;
  34. width:650px;
  35. height:200px;
  36. background:#FFF;
  37. }
  38. #pie{
  39. width:700px;
  40. height:50px;
  41. background:#000;
  42. margin:0 auto;
  43. }

Ve cambiando los valores del padding, margin, los width y height hasta que coincida perfecto, suena tedioso pero es rápido.

Es la solución más fácil que le veo, espero que te sirva, saludos.
  #6 (permalink)  
Antiguo 21/07/2014, 20:41
Avatar de siddartha23  
Fecha de Ingreso: septiembre-2013
Mensajes: 357
Antigüedad: 10 años, 5 meses
Puntos: 39
Respuesta: posicionamiento de divs

Te recomiendo que uses clases cuando te des cuenta que algunos elementos van a compartir algunas características, por ejemplo en tu código las tres cajas de contenido miden lo mismo de ancho y están centradas dentro de #cuerpo, por lo tanto lo que necesitarías es crearles una clase .contenido con margin: 0 auto y width:650px.

Y para dejarlos como en la imagen le pones un padding al #cuerpo y al segundo contenido le pones un margin-top y margin-bottom para separarlos...
__________________
velarde23.com - Soluciones Web
  #7 (permalink)  
Antiguo 21/07/2014, 21:20
Koyoter
Invitado
 
Mensajes: n/a
Puntos:
De acuerdo Respuesta: posicionamiento de divs

Cita:
Iniciado por Nelsonfmc Ver Mensaje
¿Y así?

Código CSS:
Ver original
  1. body{
  2. margin:0px;
  3. }
  4. #contenedor{
  5. width:100%;
  6. background:#666;
  7. }
  8. #cabecera{
  9. width:700px;
  10. height:150px;
  11. background:#000;
  12. margin:0 auto;
  13. }
  14. #cuerpo{
  15. padding:50px;
  16. width:700px;
  17. height:450px;
  18. background:#CCC;
  19. margin:0 auto;
  20. }
  21. #contenido1{
  22. width:650px;
  23. height:50px;
  24. background:#FFC;
  25. }
  26. #contenido2{
  27. margin-top:25px;
  28. width:650px;
  29. height:100px;
  30. background:#FC3;
  31. }
  32. #contenido3{
  33. margin-top:25px;
  34. width:650px;
  35. height:200px;
  36. background:#FFF;
  37. }
  38. #pie{
  39. width:700px;
  40. height:50px;
  41. background:#000;
  42. margin:0 auto;
  43. }

Ve cambiando los valores del padding, margin, los width y height hasta que coincida perfecto, suena tedioso pero es rápido.

Es la solución más fácil que le veo, espero que te sirva, saludos.
Gracias por la solución

Etiquetas: divs, margin, plantilla, position
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 03:19.