css - Scaling sprites below 100% alters their position -
i've followed tutorial on scaling sprites http://tobyj.net/responsive-sprites/ - when set images 100% fine when use value of 35% in media queries sprite images displaced.
any ideas why? site here http://edharrisondesign.com/pocketpictograms/
here's css:
#icon-container { position: absolute; top: 50%; margin-top: -225px; left: 50%; width: 400px; margin-left: -200px; } .icon img{ padding-bottom: 150%; } /*set max-width width of individual sprites:*/ .stretchy { display:block; position:relative; overflow:hidden; width: 100%; max-width:400px; margin: 0 auto; } .stretchy .spacer { width: 100%; height: auto; } .stretchy .sprite { position:absolute; top:0; left:0; max-width:none; max-height:100%; } .stretchy .sprite.s2 {left:-100%;} .stretchy .sprite.s3 {left:-200%;} .stretchy .sprite.s4 {left:-300%;} .stretchy .sprite.s5 {left:-400%;} .stretchy .sprite.s6 {left:-500%;} .stretchy .sprite.s7 {left:-600%;} .stretchy .sprite.s8 {left:-700%;} .stretchy .sprite.s9 {left:-800%;} .stretchy .sprite.s10 {left:-900%;} .stretchy .sprite.s11 {left:-1000%;} .stretchy .sprite.s12 {left:-1100%;} .stretchy .sprite.s13 {left:-1200%;} .stretchy .sprite.s14 {left:-1300%;} .stretchy .sprite.s15 {left:-1400%;} .stretchy .sprite.s16 {left:-1500%;} .stretchy .sprite.s17 {left:-1600%;} .stretchy .sprite.s18 {left:-1700%;} .stretchy .sprite.s19 {left:-1800%;} .stretchy .sprite.s20 {left:-1900%;} and html:
<div id="icon-container"> <a class="stretchy"> <img class="spacer" alt="icon" src="images/assets/spacer.png"> <img class="sprite s" alt="" src="images/assets/spritesheet2.png"> </a> <a class="stretchy"> <img class="spacer" alt="icon" src="images/assets/spacer.png"> <img class="sprite s2" alt="" src="images/assets/spritesheet2.png"> </a> <a class="stretchy"> <img class="spacer" alt="icon" src="images/assets/spacer.png"> <img class="sprite s3" alt="" src="images/assets/spritesheet2.png"> </a> <a class="stretchy"> <img class="spacer" alt="icon" src="images/assets/spacer.png"> <img class="sprite s4" alt="" src="images/assets/spritesheet2.png"> </a> <a class="stretchy"> <img class="spacer" alt="icon" src="images/assets/spacer.png"> <img class="sprite s5" alt="" src="images/assets/spritesheet2.png"> </a> <a class="stretchy"> <img class="spacer" alt="icon" src="images/assets/spacer.png"> <img class="sprite s6" alt="" src="images/assets/spritesheet2.png"> </a> <a class="stretchy"> <img class="spacer" alt="icon" src="images/assets/spacer.png"> <img class="sprite s7" alt="" src="images/assets/spritesheet2.png"> </a> <a class="stretchy"> <img class="spacer" alt="icon" src="images/assets/spacer.png"> <img class="sprite s8" alt="" src="images/assets/spritesheet2.png"> </a> <a class="stretchy"> <img class="spacer" alt="icon" src="images/assets/spacer.png"> <img class="sprite s9" alt="" src="images/assets/spritesheet2.png"> </a> <a class="stretchy"> <img class="spacer" alt="icon" src="images/assets/spacer.png"> <img class="sprite s10" alt="" src="images/assets/spritesheet2.png"> </a> <a class="stretchy"> <img class="spacer" alt="icon" src="images/assets/spacer.png"> <img class="sprite s11" alt="" src="images/assets/spritesheet2.png"> </a> <a class="stretchy"> <img class="spacer" alt="icon" src="images/assets/spacer.png"> <img class="sprite s12" alt="" src="images/assets/spritesheet2.png"> </a> <a class="stretchy"> <img class="spacer" alt="icon" src="images/assets/spacer.png"> <img class="sprite s13" alt="" src="images/assets/spritesheet2.png"> </a> <a class="stretchy"> <img class="spacer" alt="icon" src="images/assets/spacer.png"> <img class="sprite s14" alt="" src="images/assets/spritesheet2.png"> </a> <a class="stretchy"> <img class="spacer" alt="icon" src="images/assets/spacer.png"> <img class="sprite s15" alt="" src="images/assets/spritesheet2.png"> </a> <a class="stretchy"> <img class="spacer" alt="icon" src="images/assets/spacer.png"> <img class="sprite s16" alt="" src="images/assets/spritesheet2.png"> </a> <a class="stretchy"> <img class="spacer" alt="icon" src="images/assets/spacer.png"> <img class="sprite s17" alt="" src="images/assets/spritesheet2.png"> </a> <a class="stretchy"> <img class="spacer" alt="icon" src="images/assets/spacer.png"> <img class="sprite s18" alt="" src="images/assets/spritesheet2.png"> </a> <a class="stretchy"> <img class="spacer" alt="icon" src="images/assets/spacer.png"> <img class="sprite s19" alt="" src="images/assets/spritesheet2.png"> </a> <a class="stretchy"> <img class="spacer" alt="icon" src="images/assets/spacer.png"> <img class="sprite s20" alt="" src="images/assets/spritesheet2.png"> </a> </div>
take @ fiddle:
it offers insight how http://tobyj.net/responsive-sprites/ works.
/* 'stretchy' container div. relatively simple: 'float: left;' floats left. change 'float:right' , , contents float right. 'position: relative;' positions relative browser window, meaning sprites move move window. change absolute, , both stay in top left of window, due float left. 'overflow: hidden;' essential sprites, smaller background image. change 'show', , you'll see what's going on 'behind scenes' resize window. i'd recommend this, helped me lot! 'max width: 160px' prevents sprite becoming larger 160px wide, can see sprite on right. 'width: 35%' sets stretchy's width, dynamically. 35% of browser window. here's awesome part. number can tweaked anything. effects height because div constrained. 'margin: 5%' sets margin width, 5% of browser window. notice how gap between 2 sprites grows , shrinks widen , narrow window? tweak if needed. */ .stretchy { float:left; position: relative; overflow: hidden; max-width:160px; width:35%; margin: 5px; } /* 'spacer' gives each sprite dimensions, both in width , height. other methods of achieving this, using 'spacer' gives solid, cross-compliant results. 'width: 100%' sets width of spacer 100% of parent div. 'display: block' ensures spacer takes full width available. prevents background image sliding right when 'spacer' falls under 160px. changing inline (meaning spacer takes little place possible) spacer shrinks slightly. background image stays centered, because stretchy's overflow set 'hidden' gives illusion background image moving inexplicably right. set display: inline see mean. */ .stretchy .spacer { width: 100%; display: block; } /* 'sprite' makes sure sprites stay in correct position, ontop of spacer. 'position: absolute' makes them stay ontop of image, , doesn't let them move. uses next 2 classes posistion div. 'top:0' top of div absolutely positioned top of parent div, spacer. 'left:0' left side of div absolutely positioned left of parent div, spacer. 'max-height: 100%' prevents background-image sliding when div falls under 160px. works in conjuction 'spacer's display: block rule. */ .stretchy .sprite { position:absolute; top:0; left:0; max-height:100%; } /* 's2' , 's3' sprite selectors. 'left: 0%' change either 0%, 100%, 200%, 300% 400% or 500% change image. if put in number outside of range, see spacer image gives sprite dynamically changing dimensions. notice how percentages, rather pixels. because percentages relative measurement. moving background image on 100% move background-image on same amount div, whether div 100px across or 1,000,000px across. it's relative. play around , i'm sure you'll it. */ .stretchy .sprite.s2 { left:0%; } .stretchy .sprite.s3 { left:-200%; } /*'no-limit' negates effect of strechy, , when applied div allows stretch infinitely.*/ .stretchy.no-limit { max-width: none; } .stretchy.no-limit .sprite { min-height: 100%; } if needed, here without comments:
sometimes it's best learn mucking around!
Comments
Post a Comment