Tema: lista horizontal con imagenes
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 13/04/2011, 02:55
Avatar de sergi_multimedia
sergi_multimedia
 
Fecha de Ingreso: noviembre-2010
Mensajes: 213
Antigüedad: 13 años, 5 meses
Puntos: 4
Exclamación Respuesta: lista horizontal con imagenes
Hola, me han recomendado que haga la pregunta en el foro css, a ver si me aclaro

Tengo un problema con las lista que contienen imágenes con enlaces, y debajo las imágenes un texto.

En el siguiente enlace veréis que la lista me funciona correctamente en Safari, FireFox, Chrome, Opera y Internet Explorer 8. PERO NO ME FUNCIONA CORRECTAMENTE CON LA VERSIÓN 9 DE INTERNET EXPLORER. En IE9 me salen las imágenes y el texto desordenado y sin sentido.

Podéis comprovarlo en este enlace:

http://s310876771.mialojamiento.es/p...ta_design.html

En los espacios vacíos para llenar el hueco he tenido que meter una imagen del mismo color del fondo, se que esto no es muy correcto...Por eso me gustaría primero de todo que se pueda visualizar correctamente con IE9, y si puede ser crear esta lista de forma más correcta y semántica pues mucho mejor.

Creo que la manera que nos has explicado dargog es mucho más correcta y semántica, pero no sé si se puede aplicar a lo que yo quiero hacer. La verdad es que he provado de hacerlo de las dos maneras, pero no me han salido bien ninguna de las dos, puede ser que no haya aplicado todo correctamente.

En la primera solución que nos ha dado dargog me salen las imágenes de las puertas y el texto en vertical, y lo he puesto igual que su ejemplo.

En el segundo ejemplo que nos ha dicho dargog las imágenes no me salen, están invisibles, pero al poner el ratón encima puedo hacer clic a la imagen para verla en más resolución.

Mi código que no me funciona correctamente con IE9 es el siguiente:

Código HTML: 
Ver original
  1. <ul class="imatges">
  2.         <li><a href="../imatges/vita%20design/square/MM-MR-M1-BL-NG_RGB_700.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-M1-BL-NG_RGB_120.jpg" alt="porta vita design square M1" width="120" height="255"/></a></li>
  3.         <li><a href="../imatges/vita%20design/square/MM-MR-M1-BM-NE_RGB_600_lienzo.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-M1-BM-NE_RGB_120.jpg" alt="porta vita design square M1" width="120" height="255"/></a></li>
  4.         <li><a href="../imatges/vita%20design/square/MM-MR-M1-RO-GR_RGB_700.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-M1-RO-GR_RGB_120.jpg" alt="porta vita design square M1" width="120" height="255"/></a></li>
  5.         <li><a href="../imatges/vita%20design/square/MM-MR-M1-WM-MR_RGB_700.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-M1-WM-MR_RGB_120.jpg" alt="porta vita design square M1" width="120" height="255"/></a></li>
  6.         <li><img src="../imatges/fafafa.png" alt="" width="120" height="255" /></li>
  7.         <li><div class="material2">SQUARE M1</div></li>
  8.         <li><div class="material2">SQUARE M1</div></li>
  9.         <li><div class="material2">SQUARE M1</div></li>
  10.         <li><div class="material2">SQUARE M1</div></li>
  11.         <li><div class="material2"><img src="../imatges/fafafa.png" alt="" width="1" height="1" /></div></li>
  12.         <li><a href="../imatges/vita%20design/square/MM-MR-M2-BL-NG_RGB_700.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-M2-BL-NG_RGB_120.jpg" alt="porta vita design square M2" width="120" height="255"/></a></li>
  13.         <li><a href="../imatges/vita%20design/square/MM-MR-M2-GR-CC_RGB_700.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-M2-GR-CC_RGB_120.jpg" alt="porta vita design square M2" width="120" height="255"/></a></li>
  14.         <li><a href="../imatges/vita%20design/square/MM-MR-M2-NCR-CN_RGB_700.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-M2-NCR-CN_RGB_120.jpg" alt="porta vita design square M2" width="120" height="255"/></a></li>
  15.         <li><img src="../imatges/fafafa.png" alt="" width="120" height="255"/></li>
  16.         <li><img src="../imatges/fafafa.png" alt="" width="120" height="255"/></li>
  17.         <li><div class="material2">SQUARE M2</div></li>
  18.         <li><div class="material2">SQUARE M2</div></li>
  19.         <li><div class="material2">SQUARE M2</div></li>
  20.         <li><div class="material2"><img src="../imatges/fafafa.png" alt="" width="1" height="1" /></div></li>
  21.         <li><div class="material2"><img src="../imatges/fafafa.png" alt="" width="1" height="1" /></div></li>
  22.         <li><a href="../imatges/vita%20design/square/MM-MR-M3-BL-BC-BO-GR_RGB_700.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-M3-BL-BC-BO-GR_RGB_120.jpg" alt="porta vita design square M3" width="120" height="255"/></a></li>
  23.         <li><a href="../imatges/vita%20design/square/MM-MR-NPAD-M1-BL-NG_RGB_700.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-NPAD-M1-BL-NG_RGB_120.jpg" alt="porta vita design square M1" width="120" height="255"/></a></li>
  24.         <li><a href="../imatges/vita%20design/square/MM-MR-NPAD-M2-BL-NG_RGB_700.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-NPAD-M2-BL-NG_RGB_120.jpg" alt="porta vita design square M2" width="120" height="255"/></a></li>
  25.         <li><a href="../imatges/vita%20design/square/MM-MR-NPAD-M2-GR-CC_RGB_700.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-NPAD-M2-GR-CC_RGB_120.jpg" alt="porta vita design square M2" width="120" height="255"/></a></li>
  26.         <li><a href="../imatges/vita%20design/square/MM-MR-NPAD-M1-BL-NG_RGB_700.jpg"><img src="../imatges/vita%20design/square/120/MM-MR-PAD-M1-BL_RGB_120.jpg" alt="porta vita design square M1" width="120" height="255"/></a></li>
  27.         <li><div class="material2">SQUARE M3</div></li>
  28.         <li><div class="material2">SQUARE M1 VIDRE</div></li>
  29.         <li><div class="material2">SQUARE M2 VIDRE</div></li>
  30.         <li><div class="material2">SQUARE M2 VIDRE</div></li>
  31.         <li><div class="material2">SQUARE M10</div></li>
  32.     
  33.     </ul>

Código CSS: 
Ver original
  1. ul.imatges  {
  2.     width: 750px;
  3.     list-style: none;
  4. }
  5.  
  6. .imatges li {
  7.     margin-right: 19px;
  8.     display: inline;
  9.     width: 120px;
  10.     float: left;
  11. }
  12.  
  13. .material2 {
  14.     font-variant: normal;
  15.     font-size: 11.5px;
  16.     text-align: left;
  17.     width: 119px;
  18.     margin-right: 21px;
  19.     float: left;
  20.     font-family: Tahoma, Verdana, "Sans Serif";
  21.     margin-bottom: 25px;
  22.     display: block;
  23. }

Qué puedo hacer para que en IE9 se me vea como el resto de navegadores?

Qué me recomendáis para hacer este tipo de listas?

Gracias de antemano