Foros del Web » Creando para Internet » CSS »

Problema con li de imagenes horizontal

Estas en el tema de Problema con li de imagenes horizontal en el foro de CSS en Foros del Web. Holag ente del foro. Les cuento mi problema, estuve armando una galeria de fotos en javascript y me surgio un problema: al querer mostrar las ...
  #1 (permalink)  
Antiguo 07/06/2009, 21:36
 
Fecha de Ingreso: marzo-2009
Mensajes: 168
Antigüedad: 8 años, 8 meses
Puntos: 1
Problema con li de imagenes horizontal

Holag ente del foro.
Les cuento mi problema, estuve armando una galeria de fotos en javascript y me surgio un problema: al querer mostrar las imagenes en una lista horizontal, me las muestra o vertical, o en dos columnas
Aca les dejo el link:
http://pareddupla.com.ar/fotos.html

Ahora les cuento que esa galeria la tengo en un div.
Aca les dejo mis codigos a ver si entienden mejor:

Código HTML:
<div id="content">

<ul class="gallery">
<li><img src="images/fondocopado.jpg" title="" alt="Image01"></li>
<li><img src="images/azules.jpg" title="" alt="Image02"></li>
<li><img src="images/envivo1.jpg" title="" alt="Image03"></li>
<li><img src="images/letra.jpg" title="" alt="Image04"></li>
<li><img src="images/vivo2.jpg" title="" alt="Image05"></li>
</ul>
</div> 
Aca les dejo donde esta el id content

Código:
div#content {
	width:100%;
	background-color:#000000;
	height:100%;
}
div#content ul li {

float:right;
   	
}
Y por ultimo el gallery.css de la class gallery

Código:
.galleria{list-style:none;width:200px}
.galleria li{display:block;width:80px;height:80px;overflow:hidden;/*float:left;*/ margin:0 10px 10px 0}
.galleria li a{display:none}
.galleria li div{position:absolute;display:none;top:0;left:180px}
.galleria li div img{cursor:pointer}
.galleria li.active div img,.galleria li.active div{display:block}
.galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto}
.galleria li .caption{display:block;padding-top:.5em}
* html .galleria li div span{width:400px}
La verdad es que no se q cambiar, yo puse como comentario el float ya que si lo saco queda afuera del div, y me arruina todo.
De ultima, si no hay forma de que la lista de imagenes quede horizontal, me gustaria que la foto al hacer click aparezca a la derecha, no arriba.
Gracias
Matias
  #2 (permalink)  
Antiguo 08/06/2009, 02:17
Avatar de galizian  
Fecha de Ingreso: junio-2009
Mensajes: 11
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: Problema con li de imagenes horizontal

Espero no equivocarme pero el problema lo debes tener en otra parte del codigo, he copiado lo que as puesto con las mismas imagenes y estas aparecen listadas en horizontal.
Como digo espero no equivocarme.
  #3 (permalink)  
Antiguo 08/06/2009, 03:48
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema con li de imagenes horizontal

Tienes en el html:
Cita:
<div id="content">
<ul class="gallery">
...
y en el css:
Cita:
.galleria{...
Deben ser iguales lo que está en negrita.

¿Supongo bien si supongo que lo que quieres mostrar en horizontal son las miniaturas de la galería?
SI es así, mira tu css:
Cita:
.galleria li{display:block;width:80px;height:80px;overflow:hidden;/*float:left;*/ margin:0 10px 10px 0}
Borra el display:bock; y quita el comentario (/* */) a float: left.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 08/06/2009, 11:13
 
Fecha de Ingreso: marzo-2009
Mensajes: 168
Antigüedad: 8 años, 8 meses
Puntos: 1
Respuesta: Problema con li de imagenes horizontal

Gracias por la ayuda.
Lamentablemente cambie eso que me dijiste, y no obtuve resultados, me sigue apareciendo lo mismo. No se les ocurre otra cosa que pueda hacer?
  #5 (permalink)  
Antiguo 08/06/2009, 11:21
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema con li de imagenes horizontal

¿Y qué ancho tienen las miniaturas? Por que la caja que las contiene tiene una anchura de
Cita:
.galleria{list-style:none;width:200px}
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 08/06/2009, 11:21
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con li de imagenes horizontal

Tienes un ancho que te sobra:
Cita:
.galleria {list-style-image:none;
list-style-position:outside;
list-style-type:none;
width:200px;
}
porque eso no permite que se coloquen en horizontal.

¡Hay!
  #7 (permalink)  
Antiguo 08/06/2009, 11:23
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema con li de imagenes horizontal

Qué buena fotofinish
Ya era hora que por una vez ...
Después de dos años jejeje
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 08/06/2009, 11:24
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con li de imagenes horizontal

Esta vez ha sido hasta el mismo minuto. Dita sea...
  #9 (permalink)  
Antiguo 08/06/2009, 11:26
 
Fecha de Ingreso: marzo-2009
Mensajes: 168
Antigüedad: 8 años, 8 meses
Puntos: 1
Respuesta: Problema con li de imagenes horizontal

Era eso.
Agrande el width a 500 px y se ajusto mas como queria.
Muchas gracias
  #10 (permalink)  
Antiguo 08/06/2009, 11:29
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema con li de imagenes horizontal

o no le des anchura (o utiliza un max-width con su equivalente para ie si tienes un ancho máximo) y así no quedarán espacios en blanco o te saldrá una segunda fila.

<offtopic>debe ser por el lunes, Mik</offtopic>
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #11 (permalink)  
Antiguo 08/06/2009, 11:46
 
Fecha de Ingreso: marzo-2009
Mensajes: 168
Antigüedad: 8 años, 8 meses
Puntos: 1
Busqueda Respuesta: Problema con li de imagenes horizontal

Che ya que estamos con css, queria ver otra cosa que me acabo de dar cuenta.
En firefox el index encaja perfecto, pero en ie se ven dos partes blancas a los costados del flash.
http://www.pareddupla.com.ar
Hay alguna forma de arreglar eso?
Les dejo los codigos.

Código HTML:
<div id="content">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="100%" height=300px scale="exactfit" fullscreen="true">
<param name="movie" value="Camino_Escena 1.swf" />
<param name="quality" value="high" />
<embed src="Camino_Escena 1.swf" width=600px height=300px quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" scale="exactfit"
fullscreen="true" ></embed>
</object>
</div> 
En el css , probe varias cosas sin exito

Código:
div#content {
        max-width:100%;
        max-height:100%;
	background-color:#000000;
	/*height:100%;
	width:100%;*/
        /*height: 300px
        width :600px*/

}
Estan comentados las cosas que probe sin resultado positivo
Jeje gracias de nuevo
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 22:30.