problemas con posicion absoluta

[taldigi]

Hola a todos , estoy haciendo una pagina donde uso el plugin jquery wookmark.
Es un plugin que adapta todos los elementos a la resolución de la pantalla.
El problema es que todos los elementos coloca de forma absoluta, y otros elementos
como pj, footer que se colocan por debajo lo ignoran.
Es deficil de explicar , pero he puesto un ejemplo aqui:

http://muchaspruebas.16mb.com/wookmark/index.html

mi pregunta.
¿como coloco el footer abajo de las imagenes?
pero quiero que el footer se ve siempre abajo de la pagina incluso si la resolucion de la pantalla cambia.
¿Alguien puede ayudarme?

[noruas]

Usando la propiedad position:fixed puedes fijar el div abajo del todo.

[taldigi]

Pero vamos a ver. si pongo position fixed el footer siempre va a estar visible , lo que se significa que en caso si alguien va a ver la pagina en un dispositivo movil , va a ver solo footer nada mas.
Pero igual ,ver el footer siempre en una pantalla grande no es una buena idea según mi opinion, porque el footer no es un elemento que tenia que ser como prioritario.
ya lo he probado con todo tipo de posiciones, y nada.
El problema empieza , porque quiero adaptar la pagina a "responsiv design" como algunos llaman "diseño adaptivo".
Para que la pagina se ve en cada pantalla de otra manera.
pj. resolucion 1024px en 4 columnas y en 240px pj moviles en una columna.
por este motivo elegido plugin wookmark.
antes he usado column count pero con column count hay que definir en cuantas columnas se tiene que ver el diseño.
Se puede usar pj . Media queries :
pj
@media screen (min-width: 1024px){


column-count:4;
etc...

}
@media screen (min-width: 300px){
column-count:1;
etc...


}

pero creo que si encuentro el modo de solucionar como poner los elementos abajo de position absolute, y se va a ver respetando la posicion absolute seria mejor.
porque position absolute tiene mucho futuro en "responsive design"
Esto es único inconveniente que despuest de position absolute no se puede poner ningun elemento.
Asi que nececito una mano, y creo que la solucion va a servir para muchos desarolladores.
muchas gracias por interes,

[taldigi]

bueno , ya tengo la solucion a este problema, en twitter @CKGrafico me ha dado la solucion en jquery
https://github.com/CKGrafico/WookMark_Example
aqui esta la solucion.
ahora no se como hacer ancho pj 75% de contenedor de los elementos posicionados absoluto.
Creo que con css no se puede hay que usar jquery, pero tampoco no se como hacerlo con jquery,
alguien tiene alguna idea?

[undakel]

Si te refieres a como seleccionar los contenedores, le pondría una id al contendor (section o ul) como por ejemplo #gallery y entonces sería así en jquery:

$("#gallery li") esto selecciona los contenedores de las imagenes
$("#gallery img") esto selecciona las imágenes

Y si quieres modificar el ancho sería:

$("#gallery li").css("widht", "75%");

Claro que con CSS sólo y sin jquery es más sencillo y haría:

#gallery li {width: 75% !important;}

[taldigi]

hola undakel, si te fijas haciendo pj #gallery li {width: 75% !important;}
haces width para columnas , no para contenedor para columnas.
Pero el problema es que quiero que se ve solo el ancho 75% de la pagina no 100%

si pones li 75 % solo el item li se va a ver 75 % pero todos li va a verse en la pagina entera.
y no queda espacio.

bueno es dificil explicar por esto he subido al servidor el ejemplo
http://muchaspruebas.16mb.com/wookmark/

como hacer para que estas imagenes se ven solo en 75% de la pagina . para que al 25 % que queda se puede insertar anuncios de adsense.

[taldigi]

solucionado, he modificado un poquito el plugin wookmark,
https://github.com/taldigi/WookMark_Example

aqui se puede ver y usarlo.

[memoadian]

me gusta más masonry.

[pzin]

Yo iba a recomendar masonry también.

[taldigi]

masonry esta muy bien muchas gracias.