Foros del Web » Creando para Internet » CSS »

problemas con alineamiento de capas

Estas en el tema de problemas con alineamiento de capas en el foro de CSS en Foros del Web. Hola, estoy haciendo mi primera pagina web y decidi maquetar usando capas <div>. Pero no logro alinear como yo quiero. Tengo 6 capas distribuidas de ...
  #1 (permalink)  
Antiguo 27/08/2011, 16:40
 
Fecha de Ingreso: agosto-2008
Mensajes: 38
Antigüedad: 8 años, 4 meses
Puntos: 0
problemas con alineamiento de capas

Hola, estoy haciendo mi primera pagina web y decidi maquetar usando capas <div>.
Pero no logro alinear como yo quiero.
Tengo 6 capas distribuidas de la siguiente manera:

1: Div #menu: esta capa esta a la izquierda y tiene un menu

2: Div #foto: esta div se encuentra al lado derecho de #menu y contiene una foto grande

3: Div #foto1: es una foto pequeña, esta debajo de la foto grande #foto y a la derecha del #menu

4: Div #foto2: es otra foto pequeña esta debajo de la foto grande #foto y a la derecha de #foto1

5: Div #foto3: es otra foto pequeña esta debajo de la foto grande #foto y a la derecha de #foto2

6: Div #foto4: es otra foto pequeña esta debajo de la foto grande #foto y a la derecha de #foto3

Bueno, no he podido lograr que las 4 fotos pequeñas se ubiquen debajo de la foto grande y al lado derecho de #menu

Ojalá me puedan ayudar
  #2 (permalink)  
Antiguo 27/08/2011, 17:43
 
Fecha de Ingreso: julio-2011
Mensajes: 220
Antigüedad: 5 años, 4 meses
Puntos: 72
Respuesta: problemas con alineamiento de capas

Me parece que lo más conveniente es colocar los <div> que contienen las imagenes dentro de un <div> mayor y dar a la propiedad overflow de este <div> el valor hidden y a la propiedad height el valor -1%, además a los <div> que contienen las imagenes que van debajo de la imagen mayor se les da el valor left en la propiedad float. Dejo el siguiente código para que lo pruebes.
Código SQL:
Ver original
  1. <STYLE TYPE="text/css">
  2. #menu {
  3. width: 150px;
  4. height: 500px;
  5. FLOAT: LEFT;
  6. background-color: #366;
  7. }
  8.  
  9. #imagenes {
  10. height: -1%;
  11. overflow: hidden;
  12. }
  13.  
  14. #fotoG {
  15. width: 400px;
  16. height: 250px;
  17. background-color: #fc0;
  18. }
  19.  
  20. #foto1, #foto2, #foto3, #foto4 {
  21. width: 100px;
  22. height: 100px;
  23. background-color: #ccc;
  24. FLOAT: LEFT;
  25. }
  26.  
  27. .imagen {
  28. width: 95%;
  29. height: 95%;
  30. }
  31. </style>
  32.  
  33. <div id="menu">menu</div>
  34. <div id="imagenes">
  35. <div id="fotoG"><img src="" class="imagen" alt="imagen_grande"></div>
  36. <div id="foto1"><img src="" class="imagen" alt="imagen_chica_1"></div>
  37. <div id="foto2"><img src="" class="imagen" alt="imagen_chica_2"></div>
  38. <div id="foto3"><img src="" class="imagen" alt="imagen_chica_3"></div>
  39. <div id="foto4"><img src="" class="imagen" alt="imagen_chica_4"></div>
  40. </div>
  #3 (permalink)  
Antiguo 27/08/2011, 18:18
 
Fecha de Ingreso: agosto-2008
Mensajes: 38
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Gracias, una sola cosita mas!!!

Excelente!!! me funciono muchas gracias.

Un solo problemilla que se me generó, pero fue culpa mia por no mencionarlo cuando plantee la situacion.

Resulta que tengo otra capa que se llama #descrip, en la cual coloco texto y esta a la derecha de la Foto grande #fotoG. Cuando puse las div como me indicaste, se me descuadro la capa #descrip, se fue hacia abajo ¿como puedo dejarla al lado derecho de la foto grande?
  #4 (permalink)  
Antiguo 27/08/2011, 19:03
 
Fecha de Ingreso: julio-2011
Mensajes: 220
Antigüedad: 5 años, 4 meses
Puntos: 72
Respuesta: problemas con alineamiento de capas

Prueba con esta modificación.

Código CSS:
Ver original
  1. <style type="text/css">
  2. #menu {
  3. width: 150px;
  4. height: 500px;
  5. float: left;
  6. background-color: #366;
  7. }
  8.  
  9. #imagenes {
  10. height: -1%;
  11. overflow: hidden;
  12. }
  13.  
  14. #fotoG {
  15. width: 400px;
  16. height: 250px;
  17. background-color: #fc0;
  18. float: left;
  19. }
  20.  
  21. #descrip {
  22. width: 200px;
  23. height: 250px;
  24. background-color: #ff0;
  25. float: left;
  26. }
  27.  
  28. #foto1
  29. {
  30. width: 100px;
  31. height: 100px;
  32. background-color: #ccc;
  33. float: left;
  34. clear: left;
  35. }
  36.  
  37. #foto2, #foto3, #foto4 {
  38. width: 100px;
  39. height: 100px;
  40. background-color: #ccc;
  41. float: left;
  42. }
  43.  
  44. .imagen {
  45. width: 95%;
  46. height: 95%;
  47. }
  48. </style>
  49.  
  50. <div id="menu">menu</div>
  51. <div id="imagenes">
  52. <div id="fotoG"><img src="" class="imagen" alt="imagen_grande"></div>
  53. <div id="descrip">Descripci&oacute;n</div>
  54. <div id="foto1"><img src="" class="imagen" alt="imagen_chica_1"></div>
  55. <div id="foto2"><img src="" class="imagen" alt="imagen_chica_2"></div>
  56. <div id="foto3"><img src="" class="imagen" alt="imagen_chica_3"></div>
  57. <div id="foto4"><img src="" class="imagen" alt="imagen_chica_4"></div>
  58. </div>

Lo que se hizo fue agregar la propiedad 'float:left' a <div id="fotoG"> con lo cual el <div id="descrip"> es forzado a alinearse al lado de este; además, los estilos de la primera imagen pequeña se declaran por separado incluyendo en estos la propiedad 'clear:left' lo que provoca que este <div> se posicione en la siguiente linea limpia a su izquierda, el resto de <div> contenedores de imagenes pequeñas son colocados al lado del primero con la propiedad 'float:left'.
Por último te recomiendo, por si no lo haz hecho, que pongas al declaración DTD la comienzo de tu página, ya que con esto la compatibilidad de los estilos con diferentes navegadores sera mejor.
  #5 (permalink)  
Antiguo 27/08/2011, 19:12
 
Fecha de Ingreso: agosto-2008
Mensajes: 38
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Mil gracias

Muchas, muchas gracias.......me funcionó perfecto!!
  #6 (permalink)  
Antiguo 29/08/2011, 12:51
 
Fecha de Ingreso: agosto-2008
Mensajes: 38
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: problemas con alineamiento de capas

Estimado lubtufano, disculpa por preguntar tanto, pero tenias razon con el tema de la compatibilidad ¿que problema ese no? la pagina se ve muy bien tanto en Firefox como el Chrome, sin embargo, las fotos pequeñas no aparecen en IE.
En la página principal coloco <!DOCTYPE html> ¿conoces de alguna otra cosa que me ayude a que la pagina se vea en IE?

Gracias
  #7 (permalink)  
Antiguo 29/08/2011, 17:24
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 2 meses
Puntos: 63
Respuesta: problemas con alineamiento de capas

Puedes que sea por no finalizar bien la etiqueta img. Tienes que acabar asi

Código:
<img src="TuImagen.png" alt="Descripción" /> 

Tambien podrias pensar en el usar la propiedad z-index, si estas colocando una capa por encima de las imagenes.

Código CSS:
Ver original
  1. img{
  2. z-index: 1;
  3. }


Saludos

Etiquetas: alineamiento, capas
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 08:32.