Foros del Web » Creando para Internet » HTML »

Problema con lista

Estas en el tema de Problema con lista en el foro de HTML en Foros del Web. Hola a [email protected], Estoy haciendo una lista para mostrar unos productos, esta lista tiene 2 columnas, donde hay una imagen de cada producto más un ...
  #1 (permalink)  
Antiguo 09/02/2011, 04:42
Avatar de sergi_multimedia  
Fecha de Ingreso: noviembre-2010
Mensajes: 213
Antigüedad: 7 años
Puntos: 4
Exclamación Problema con lista

Hola a [email protected],

Estoy haciendo una lista para mostrar unos productos, esta lista tiene 2 columnas, donde hay una imagen de cada producto más un pie de foto de 3 filas.

El código que estoy utilizando es el siguiente:
Código HTML:
Ver original
  1. <ul class="imatges">
  2.  
  3. <li><img src="../imatges/floover_03/wood/300/WD1001.jpg" alt="WD1001" width="300" height="105" /></li>
  4. <li><img src="../imatges/floover_03/wood/300/WD1002.jpg" alt="WD1002" width="300" height="106" /></li>
  5. <li><div class="parquet">0.3 Antic WD1001</div></li>
  6. <li><div class="parquet">0.3 Green Grey WD1002</div></li>
  7. <li><div class="parquet">915x305x9.8 mm</div></li>
  8. <li><div class="parquet">915x305x9.8 mm</div></li>
  9. <li><div class="parquet2">45.51€/m2 - Contingut caixa: 6 unitats: 1.68 m2</div></li>
  10. <li><div class="parquet2">45.51€/m2 - Contingut caixa: 6 unitats: 1.68 m2</div></li>
  11. <li><img src="../imatges/floover_03/wood/300/WD1003.jpg" alt="WD1003" width="300" height="105" /></li>
  12. <li><img src="../imatges/floover_03/wood/300/WD1004.jpg" alt="WD1004" width="300" height="105" /></li>
  13. <li><div class="parquet">0.3 Wengue WD1003</div></li></li>
  14. <li><div class="parquet">0.3 White Grey WD1004</div></li></li>
  15. <li><div class="parquet">915x305x9.8 mm</div></li></li>
  16. <li><div class="parquet">915x305x9.8 mm</div></li></li>
  17. <li><div class="parquet2">45.51€/m2 - Contingut caixa: 6 unitats: 1.68 m2</div></li>
  18. <li><div class="parquet2">45.51€/m2 - Contingut caixa: 6 unitats: 1.68 m2</div></li>
  19. <li><img src="../imatges/floover_03/wood/300/WD1005.jpg" alt="WD1005" width="300" height="106" /></li>
  20. <li><img src="../imatges/floover_03/wood/300/WD1006.jpg" alt="WD1006" width="300" height="105" /></li>
  21. <li><div class="parquet">0.3 Jatoba WD1005</div></li></li>
  22. <li><div class="parquet">0.3 Maple WD1006</div></li></li>
  23. <li><div class="parquet">915x305x9.8 mm</div></li></li>
  24. <li><div class="parquet">915x305x9.8 mm</div></li></li>
  25. <li><div class="parquet2">45.51€/m2 - Contingut caixa: 6 unitats: 1.68 m2</div></li>
  26. <li><div class="parquet2">45.51€/m2 - Contingut caixa: 6 unitats: 1.68 m2</div></li>
  27. </ul>

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

Bien, hasta ahí, todo correcto.

En este caso, en esta lista por ejemplo son 9 artículos, y en cada fila hay dos artículos, así que llegaremos a la última fila con solo 1 artículo. Aquí me vienen los problemas.

Que es lo que tengo que hacer? He probado muchas combinaciones, pero en la mayoría de los casos me sale la imagen, el pie de foto de filas debajo, y el pie de foto de la tercera fila me sale en el otro lado de la pantalla, y se me desconfigura todo. He intentado poner una imagen del mismo color del fondo para engañar, pero tampoco me ha funcionado.

Debajo de todo esto tengo este código:

Código HTML:
Ver original
  1. <div class="titol_h2"><h2><a id="country">Country</a></h2></div>

Código CSS:
Ver original
  1. .titol_h2 {
  2.  
  3.     border-bottom: 1px solid #7d7c7c;
  4.     height: 2em;
  5.     margin-bottom: 2em;
  6.     }

y también se me desconfigura el h2.

La verdad es que no se si me he explicado bien, quizás así es difícil de entender. Si veo que no me explico miraré de subir la página en un servidor y os lo muestro. Bien, creo que igualmente es lo que voy hacer.

Gracias de antemano, y perdón por el tocho.
  #2 (permalink)  
Antiguo 09/02/2011, 05:43
Avatar de sergi_multimedia  
Fecha de Ingreso: noviembre-2010
Mensajes: 213
Antigüedad: 7 años
Puntos: 4
Respuesta: Problema con lista

Hola a todos, he subido la "página web" (lo pongo en comillas, ya que está recién empezada), y me he llevado varios chascos...y como buen novato en esto creo que es lo más normal. La visualización entre diferentes navegadores.

Bien, lo que yo os he puesto en el primer mensaje, es básicamente esto:

http://s310876771.mialojamiento.es/productes/floover_03.html

Si lo veis en Safari, veréis que se ve bien, menos el final, me descuadra los pie de foto, y el título <h2>.

Ahora, si lo ves con Internet Explorer, está todo fatal! madre mía!

Espero que con esto este un poco más claro que es lo que quiero decir, sino ya miraré de explicarlo de otro modo.

Muchas gracias por la atención!

Etiquetas: list, ul
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 00:36.