Foros del Web » Creando para Internet » CSS »

Problema con elementos de listas flotantes

Estas en el tema de Problema con elementos de listas flotantes en el foro de CSS en Foros del Web. Hola: Tengo una lista con fotos dentro.Los "li" de la lista los tengo a float: left; de modo que cuando no caben más fotos a ...
  #1 (permalink)  
Antiguo 16/11/2009, 15:11
 
Fecha de Ingreso: septiembre-2009
Mensajes: 215
Antigüedad: 8 años, 2 meses
Puntos: 1
Problema con elementos de listas flotantes

Hola:

Tengo una lista con fotos dentro.Los "li" de la lista los tengo a float: left; de modo que cuando no caben más fotos a lo ancho se pasa a la siguiente fila.

El problema es que cuando las fotos tienen distinta altura(unas llegan más abajo que otras) al saltar de linea las siguientes fotos no se colocan como deberían, tienden a colocarse debajo de las fotos más cortas de la fila superior dejando huecos sin rellenar.

¿Cómo soluciono esto de modo que en cada fila haya la misma cantidad de elementos?

Gracias
  #2 (permalink)  
Antiguo 16/11/2009, 15:19
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Problema con elementos de listas flotantes

Hola:

No sé si te valdrá la solución que te doy, dale a todas las imágenes el heigth de la más alta, automáticamente el width se adaptará de manera que la imagen no se deformará y al saltar de línea no se colocarán debajo de las más cortas.

Saludos.

  #3 (permalink)  
Antiguo 16/11/2009, 15:24
 
Fecha de Ingreso: septiembre-2009
Mensajes: 215
Antigüedad: 8 años, 2 meses
Puntos: 1
Respuesta: Problema con elementos de listas flotantes

La verdad que lo quería hacer sin tener que recurrir a eso porque teniendo un width fijo puedo controlar mejor cómo se muestran las imágenes.

Una cosa que se me ocurrió es :

-Como se el width de las imagenes puedo saber cuantas me caben por fila.
-Meter cada fila dentro de un div que tomara la altura del más alto

Lo que pasa es que no sé si es una buena idea o si se puede hacer con css sin falta de recurrir a esto
  #4 (permalink)  
Antiguo 16/11/2009, 15:35
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Problema con elementos de listas flotantes

Hola:

Estoy pensando otra cosa, ¿y si en lugar de meter cada fila en un <div> le das una altura al <li>.?

Saludos.

  #5 (permalink)  
Antiguo 16/11/2009, 15:39
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema con elementos de listas flotantes

Hola Jomaruro:
creo que has olvidado mencionar el error del viernes

Pinchu, pon un enlace a esa página (pues al usar imágenes es difícil ajustarse a tus necesidades sin contar con ellas).
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 16/11/2009, 15:41
 
Fecha de Ingreso: septiembre-2009
Mensajes: 215
Antigüedad: 8 años, 2 meses
Puntos: 1
Respuesta: Problema con elementos de listas flotantes

Sería una forma pero claro entonces tendría que saber la altura máxima que va a tener una imagen.

Yo las imágenes las redimensionaba a 90px de width y height proporcional pero me imagino que de todas maneras debería de establecer un height máximo tb...



Gracias por las respuestas,¿alguna otra manera?
  #7 (permalink)  
Antiguo 16/11/2009, 15:44
 
Fecha de Ingreso: septiembre-2009
Mensajes: 215
Antigüedad: 8 años, 2 meses
Puntos: 1
Respuesta: Problema con elementos de listas flotantes

El codigo que saca las imagenes es este:

$path = "img/usuarios/usuario-".$idUsuario."/thumbs/";
$dir = opendir($path);


echo '<p class = "titulo-tablon">Mis fotos</p><div id = "fotos">';
echo '<ul>';
while ($foto = readdir($dir)) {

if (($foto != '.') && ($foto != '..')) {

echo '<li class = "foto"><img src = "'.$path.$foto.'" alt = "'.$foto.'"/></li>';
}
}
echo '</ul></div>';

y el css este:

div#contenedorFotos div#fotos
{
padding: 15px 10px 0 10px;
}

div#contenedorFotos div#fotos ul li
{
float: left;
margin: 5px;
padding: 3px;
border: 1px solid #C2E600;
}
  #8 (permalink)  
Antiguo 16/11/2009, 16:17
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Problema con elementos de listas flotantes

Hola:

Cita:
Iniciado por kseso? Ver Mensaje
Hola Jomaruro:
creo que has olvidado mencionar el error del viernes
Creo que tienes razón, a cada paso que se da aparece información nueva.

Saludos.

  #9 (permalink)  
Antiguo 17/11/2009, 13:20
 
Fecha de Ingreso: septiembre-2009
Mensajes: 215
Antigüedad: 8 años, 2 meses
Puntos: 1
Respuesta: Problema con elementos de listas flotantes

jomauro estaba pensando que lo que propones no lo puedo hacer, porque según entiendo tendría que darle a cada li el máximo alto que puede tener una foto, pero si resulta que en esa linea no hay una foto de tamaño máximo quedaría muy feo.

¿Alguna solución más o haré lo de meter la fila de <li> dentro de un <div>?
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 17:32.