Foros del Web » Creando para Internet » CSS »

desbordamiento de dos bloques

Estas en el tema de desbordamiento de dos bloques en el foro de CSS en Foros del Web. hola, bien los problemas lo tengo con ff e ie. en ff el problema es que el bloque contenedor, en color naranja, toma un alto ...
  #1 (permalink)  
Antiguo 02/01/2011, 15:15
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
desbordamiento de dos bloques

hola, bien los problemas lo tengo con ff e ie. en ff el problema es que el bloque contenedor, en color naranja, toma un alto demasiado exagerado, pero en el colector, contenedor_secciones, el height está con el valor relativo 100%.
el otro problema es en ie, el height de lo bloques de color carne de nuevo se desborda. el colector que controla esta parte es secciones
os dejo el css, html y una imagen para ver si dais con la solución a estos problemas

gracias


Código CSS:
Ver original
  1. .contenedor_secciones {
  2.   background: orange;
  3.   height: 100%;
  4.   padding: 20px 7px;
  5. }
  6.  
  7.  
  8. .secciones {
  9.   background: #C89580;
  10.   float: left;
  11.   width: 238px;
  12.   height: 138px;
  13.   margin: 10px 35px;
  14. }
  15.  
  16.  
  17. .secciones div{  
  18.   background: #111;
  19.   /*color: #FFF;*/
  20.   text-align: center;
  21.   filter: alpha(opacity=55);
  22.   opacity: .55;  
  23.   position: relative;  
  24.   bottom: 37px;
  25.   *bottom: 41px;
  26.   left: 0px;  
  27.   padding: 10px;
  28.   margin: 0px 1px;
  29.   border-top: 1px solid #999;
  30.   *height: 1px; /* solo para IE */
  31. }  
  32.  
  33.  
  34. .secciones a {  
  35.   color: #FFF;
  36.   text-decoration: none;
  37. }
Código HTML:
Ver original
  1. <div class="contenedor_secciones">
  2.  
  3. <div class="secciones">
  4. <img src="./anfora.png" />
  5. <div><a href="#">Imitaciones de ánforas antiguas</a></div>
  6. </div>
  7.  
  8. <div class="secciones">
  9. <img src="./anfora.png" />
  10. <div><a href="#">Imitaciones de ánforas antiguas</a></div>
  11. </div>
  12.  
  13. <div class="secciones">
  14. <img src="./anfora.png" />
  15. <div><a href="#">Imitaciones de ánforas antiguas</a></div>
  16. </div>
  17.  
  18. <div class="secciones">
  19. <img src="./anfora.png" />
  20. <div><a href="#">Imitaciones de ánforas antiguas</a></div>
  21. </div>
  22.  
  23. <div class="secciones">
  24. <img src="./anfora.png" />
  25. <div><a href="#">Imitaciones de ánforas antiguas</a></div>
  26. </div>
  27.  
  28. <div class="secciones">
  29. <img src="./anfora.png" />
  30. <div><a href="#">Imitaciones de ánforas antiguas</a></div>
  31. </div>
  32.  
  33.      </div>
  #2 (permalink)  
Antiguo 03/01/2011, 06:35
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Respuesta: desbordamiento de dos bloques

Hola Isabel,

no acabo de comprender bien los comportamientos que mencionas ¿no tendrás el ejemplo tal cual colgado en algún server para poder probarlos in-situ?
__________________
Javascript Códigos - Bambú difunde
  #3 (permalink)  
Antiguo 03/01/2011, 14:18
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: desbordamiento de dos bloques

gracias por responder. aquí puedes ver los problemas que indico
  #4 (permalink)  
Antiguo 03/01/2011, 15:07
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Respuesta: desbordamiento de dos bloques

Hola de nuevo,

en firefox (3.6) yo lo veo bien y el contenedor naranja llega hasta donde me da la impresión que debe llegar. Vamos, que lo veo igual en firefox que en chrome.

En explorer sí que veo lo que sucede. El caso es que no estás indicando al navegador la definición de tipo de documento con lo que entra a renderizarlo al modo que le parece y obtenemos resultados inesperados. Si le asignas una dtd para xhtml 1.0 transitional se arregla ese desbordamiento en explorer, aunque te descoloca un poco el div con el alpha pero se arregla asignándole la altura que quieras asignarle (en mis pruebas una altura de 15px lo acomoda bastante bien). Eso para explorer, para otros navegadores no hace falta que le asignes altura, tal como lo tienes ahora.

Con la dtd se te anulará la altura del contenedor naranja en otros navegadores, pero lo solucionas asignándole a ese contenedor la propiedad overflow con un valor de hidden.
__________________
Javascript Códigos - Bambú difunde
  #5 (permalink)  
Antiguo 04/01/2011, 06:41
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: desbordamiento de dos bloques

tunait, muchimas gracias por tu colaboración. he hecho todo lo que me dijistes y ha funcionado

Etiquetas: bloques, dos
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 18:36.