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;}
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;}