Foros del Web » Creando para Internet » CSS »

Caja de logos

Estas en el tema de Caja de logos en el foro de CSS en Foros del Web. Muy buenas gente, hacía ya algún tiempo que no necesitaba de la sabiduría colectiva de estos foros, últimamente encuentro todo por internet bastante rápido. Bueno, ...
  #1 (permalink)  
Antiguo 05/11/2012, 03:13
Avatar de bNd170  
Fecha de Ingreso: agosto-2009
Ubicación: $this->setLocation('Valencia', 'Spain');
Mensajes: 365
Antigüedad: 15 años, 1 mes
Puntos: 13
Caja de logos

Muy buenas gente, hacía ya algún tiempo que no necesitaba de la sabiduría colectiva de estos foros, últimamente encuentro todo por internet bastante rápido.

Bueno, mi duda ésta vez es que necesito y que parámetros son esenciales para hacer una especie de "slider" de logotipos, en este caso son logotipos de empresas, los cuales van en un div y que a los lados tiene dos flechitas para mover los logotipos y dejar ver los que desde inicio estaban ocultos.

Ésto lo he visto en varias webs de personajes o jugadores profesionales con patrocinadores personales pero no entiendo bien como estructurar el HTML ni que valores de CSS otorgarle.

¿Alguien tiene por ahí algún tutorial, de como hacer este tipo de cosas?

¡Gracias de antemano!
  #2 (permalink)  
Antiguo 05/11/2012, 05:39
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 2 meses
Puntos: 2114
Respuesta: Caja de logos

Normalmente los sliders se hacen con un elemento de tamaño fijo y posición relativa, con overflow oculto, y un elemento interno con posición absoluta que se va moviendo con javascript cambiando su propiedad left.
  #3 (permalink)  
Antiguo 05/11/2012, 16:46
Avatar de bNd170  
Fecha de Ingreso: agosto-2009
Ubicación: $this->setLocation('Valencia', 'Spain');
Mensajes: 365
Antigüedad: 15 años, 1 mes
Puntos: 13
Respuesta: Caja de logos

Bien, hasta aqui lo tenía claro, me ocurre una cosa que llevo días dándole vueltas y aun no he conseguido solventar.

Las imagenes dentro del div interno (El que hace la animación de movimiento) se alinean hasta un numero máximo, en este caso son tres, la cuarta imagen hace una especie de breaklane y se alinea debajo del resto...

¿A que puede deberse esto?

Código CSS:
Ver original
  1. div#header div#spolier_sponsors div#sponsors_box { float: left; width: 350px; height: 100px; margin: -35px 15px 0px 15px; position: relative; overflow: hidden; }
  2.         div#header div#spolier_sponsors div#sponsors_box div#box { height: 100px; position:absolute; }

Esos son los estilos para la caja contenedora y el box de movimiento.
  #4 (permalink)  
Antiguo 06/11/2012, 05:28
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 2 meses
Puntos: 2114
Respuesta: Caja de logos

Tendrás que darle un ancho al elemento que contiene todos los logos que sea igual al ancho del logo multiplicado por el número de logos —en caso de que se vea siempre un logo.

Etiquetas: caja, html, logos
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 09:21.