PDA

View Full Version : New spacing issue...


brandofamily
Oct-08-2009, 07:23 PM
With the addition of the stretchy homepage slideshow I had to re-adjust my thumb spacing for the popular thumbnail hack that I have above the slideshow. The only problem is that the spacing is static the number of thumbs fluxuates w/ screen size thus leaving a large gap at the left for various screen sizes. Using standard CSS (at least what I know) I must set the spacing to fit my particular size monitor and let everyone else live w/ the gap... I do not like that.
Any thoughts on making the spacing adjust with the size od the screen thus eliminating the large gap that is there at times?

Here's the basic hack code...

/*Popular Photos Hack*/
.homepage #popularPhotosList {background:#000; width:auto !important; height:70px; overflow:hidden; margin-left:7px !important; margin-right:7px !important; ~margin-left:5px !important; ~margin-right:5px !important; margin-bottom:0; border:double #D5B790; border-bottom:0;}
.homepage #popularPhotos {margin-bottom:0;}
.homepage #popularPhotos .boxTop {display:none;}
.homepage #popularPhotosList .photo {margin:6px 2px 0 4px; width:64px; height:64px;}
.homepage #popularPhotosList .photo img {background:#000; _background-image:none; background-position:bottom left; padding:0 0 0 0; border:none; width:50px; height:50px; _margin-right:2px;}
.homepage #popularPhotosList .photo img:hover {width:60px; height:60px; ~width:50px; ~height:50px; position:relative; z-index:999; left:-2px; top:-4px; ~left:0px; ~top:0px; padding:0 0 0 0;}

jfriend
Oct-08-2009, 07:45 PM
I've never seen a way to center a variable number of objects like this using only CSS. The same way you can't center the thumbs in a stretchy category. I just don't think it can be done with just CSS.

It could be done with javascript with a separate container around the thumbs that was always set (via the script) to an integral number of thumbnails (so the thumbs fit in the container with no extra space) and then the container is centered in the page using CSS.

brandofamily
Oct-09-2009, 07:12 PM
I've never seen a way to center a variable number of objects like this using only CSS. The same way you can't center the thumbs in a stretchy category. I just don't think it can be done with just CSS.

It could be done with javascript with a separate container around the thumbs that was always set (via the script) to an integral number of thumbnails (so the thumbs fit in the container with no extra space) and then the container is centered in the page using CSS.
I think I get what you are saying, but the # of thumbs would be constant, correct?

jfriend
Oct-09-2009, 07:17 PM
I think I get what you are saying, but the # of thumbs would be constant, correct? No. You'd let the overall width float initially, then once the page is laid out, you'd trigger a JS function to set left/right padding on the outer container to force it to be centered and force it's inner width to an exact multiple of how many thumbs were in it.

Then, a different JS routine would watch for window resize events and upon resize, again recalculate the padding values to allow an integral number of thumbs.

The number of thumbs should be managed exactly the same as they are now, we'd just be tweaking the container they were in so that it would be centered.

brandofamily
Oct-09-2009, 07:20 PM
No. You'd let the overall width float initially, then once the page is laid out, you'd trigger a JS function to set left/right padding on the outer container to force it to be centered and force it's inner width to an exact multiple of how many thumbs were in it.

Then, a different JS routine would watch for window resize events and upon resize, again recalculate the padding values to allow an integral number of thumbs.

The number of thumbs should be managed exactly the same as they are now, we'd just be tweaking the container they were in so that it would be centered.
I'm sure you're quite busy, but if you get a bit of extra time I'd appreciate it if you could take a stab at this. I have zero JS ability...

brandofamily
Oct-13-2009, 06:46 PM
jfriend, any thoughts or free time for this idea?

jfriend
Oct-14-2009, 12:59 PM
jfriend, any thoughts or free time for this idea? It's not something I'm planning on looking at Anthony.

brandofamily
Oct-14-2009, 02:59 PM
It's not something I'm planning on looking at Anthony.
Thanks anyway :(