Kickstarter.com barra "superior" imágenes pequeñas ¿CÓMO?

He estado tratando de hacer mi versión de la barra superior de Kickstarter.com para exhibir imágenes pequeñas y atractivas, sin suerte.

He intentado posicionar los elementos absolutamente, pero no importa lo que haga, simplemente no "funciona".

Esto es lo que ha hecho:

$('#holder .box').each(function(n){
   var pLeft = $(this).position().left;

   $(this).css({
     position: 'absolute',
     left: pLeft
   });
});

Pero luego todos los artículos se apilan uno encima del otro.

Por cierto: SÉ que esto no es suficiente para hacer el truco, pero necesito ayuda para seguir adelante con este problema. Con otras palabras: ¡Estoy ATRAPADO!

preguntado el 29 de julio de 12 a las 17:07

3 Respuestas

Cuando ves algo genial y te preguntas "¿Cómo hicieron eso?" ... ¿cuál debería ser tu primera respuesta?

Míralo en Firebug. O las herramientas de desarrollo de Chrome. O algo. Vea cuál es la estructura HTML. Vea qué es el CSS que se aplica a todo. Si hay una regla CSS que no entiendes lo que hace, simplemente desactívala temporalmente o altera el valor. Usa la habilidad de Firebug para manipular cosas en vivo a tu favor.

En este caso, en realidad no es tan difícil. Los artículos dentro solo usan imágenes que son float:left; width:120px; height:90px - hay muchos de ellos. El envoltorio tiene 2640 píxeles de ancho y está centrado, por lo que es position:absolute; margin-left:50%; width:2640px; left:1320px.

Respondido 29 Jul 12, 17:07

gracias amigo Lo sé. Pero pensé que tenía que hacer algo con JS ya que hay más imágenes cuanto más grande es la pantalla que tienes. También pensé que necesitaba JS ya que hay algunas imágenes que son la mitad tanto en el lado izquierdo como en el derecho. - skolind

¡No! :) Es solo un div muy amplio que está centrado. ¡Solo aleja el zoom y verás! - Molinos Anthony

¡Ya veo! awww... He perdido 3 horas de mi día luciendo tonto -.-' bueno.. gracias Anthony :) - skolind

"El que hace una pregunta es un tonto durante cinco minutos. El que no hace una pregunta sigue siendo un tonto para siempre". -- antiguo proverbio chino :) - Molinos Anthony

Creo que quieres algo como esto:

http://fiddle.jshell.net/sfkzY/

¿No está seguro de por qué está tratando de hacer su diseño usando JS?

Respondido 29 Jul 12, 17:07

Es una cuadrícula, así que iría por una mesa, como esta. jsviolín.

Respondido 29 Jul 12, 17:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.