Foros del Web » Creando para Internet » CSS »

lista de imagenes con float queda escalonada

Estas en el tema de lista de imagenes con float queda escalonada en el foro de CSS en Foros del Web. Estoy haciendo una galeria de imagenes con listas desordenadas, de este estilo: http://www.desarrolloweb.com/articul...as/index2.html La segunda imagen queda escalonada respecto de la primera. Por que? Este ...
  #1 (permalink)  
Antiguo 15/11/2010, 09:11
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años
Puntos: 101
lista de imagenes con float queda escalonada

Estoy haciendo una galeria de imagenes con listas desordenadas, de este estilo:
http://www.desarrolloweb.com/articul...as/index2.html

La segunda imagen queda escalonada respecto de la primera. Por que?

Este es mi css
Código CSS:
Ver original
  1. ul#listado_de_artistas li {
  2. margin: 1px;
  3. border: 1px solid #ccc;
  4. width: 280px;
  5.  display:inline;
  6. padding: 2px; float: left}

Este el html:

Código HTML:
Ver original
  1. <ul id="listado_de_artistas">
  2.  
  3.                     <li>
  4.  
  5.            
  6.            
  7.  
  8.             <img src="../perfiles/guil" alt='foto de perfil' class="miniatura_perfil" />   
  9.  
  10.             <a href="http://localhost/estudiodigital/galeria/3">guil guil</a>                  
  11.  
  12.             Nicaragua           </li>
  13.  
  14.             <br/>          
  15.  
  16.                     <li>
  17.  
  18.                        
  19.  
  20.            
  21.  
  22.             <img src="../perfiles/fgh" alt='foto de perfil' class="miniatura_perfil" />
  23.  
  24.             <a href="http://localhost/estudiodigital/galeria/4">Guille fh</a>                  
  25.  
  26.             Paraguay            </li>
  27.  
  28.             <br/>          
  29.  
  30.                
  31.  
  32.         </ul>
  #2 (permalink)  
Antiguo 15/11/2010, 09:44
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: lista de imagenes con float queda escalonada

¿Podrías indicar en qué navegador y SO se presenta la escalera?
Visto en ff y chrome en vi$ta no hay tal.

Por cierto, y ya que entré al enlace, puedes evitar el teclear tanto |<br/>| ente imagen y span definiendo el span como elemento de bloque.
Alguna cosilla más, pero no he verificado posibles efectos secundarios, como el retirar el |inline| de los |li| (están flotados)

¿Has previsto qué ocurrirá si el texto descriptivo ocupa más de una línea?
Y ya acabo con las "pegas", supongo que las miniaturas de la galerías las editarás con el potochop de turno para hacerlas de las mismas medidas.
  #3 (permalink)  
Antiguo 15/11/2010, 09:48
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años
Puntos: 101
Respuesta: lista de imagenes con float queda escalonada

Perdon, me expresé mal. El link es a un tutorial de galeria de imagenes con listas desordenadas.

EDITADO: Gracias !!! Ese <br> se me había pasado por alto y era el que causaba el desorden!!!
  #4 (permalink)  
Antiguo 15/11/2010, 10:27
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: lista de imagenes con float queda escalonada

Mayid:
Mi comentario anterior era sobre los códigos del enlace.

Sobre el código que publica:
No se qué intentas lograr. Por un lado a los li los flota a la izquierda y los declara en línea. Supongo que para que queden adyacentes uno al lado del otro.
Pero por otro lados, en el html, entre cada li añade un retorno de carro (br) que lo fuerza a ir la línea inferior.

Debe aclarar cuál es la intención, si adyacentes en la horizontal o superpuestos en la vertical.
  #5 (permalink)  
Antiguo 15/11/2010, 10:32
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años
Puntos: 101
Respuesta: lista de imagenes con float queda escalonada

Me queda clarisimo. El problema era de html (que es generado desde php). Tenía un <br> que hacía escalonar los <li> flotantes...

Gracias otra vez por comentar!

Etiquetas: float, imagenes, lista, queda
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 03:41.