html - How to stop my page elements from shrinking when I restore down the browser? -
i know must simple can't find solution works me. when restore down browser page elements move out of place , shrink, want them stay in same position , retain size.
here code far:
<!doctype html> <html> <head> <title> what's in picnic basket? </title> <link href="home.css" type="text/css" rel="stylesheet"/> <head> <body> <div id="wrapper"> <div class="titlebutton"> <img src="images/title.gif" id="titlebutton"> </div> <div class="grass"> <img src="images/grasspatch.gif" id="grass"> </div> </div> </body> </html> and css:
body{ text-align: center; } #wrapper{ width: 500px; margin: 0 auto; position: absolute; } .titlebutton{position: fixed; top: 35px; left: 340px; z-index: 1;} #titlebutton{ height: 75%; width: 75%; } .grass { position: fixed; top: 140px; left: 400px; } #grass{ height: 80%; width: 80%; } thanks million help, i'm such coding noob :p
you need change position attribute in css. when element fixed, it's properties become relative browser window. in case, when elements fixed, sized percentage of browser's window. setting them absolute, become relative first static parent.
from:
.titlebutton{ position: fixed; etc... } .grass { position: fixed; etc... } to:
.titlebutton{ position: absolute; etc... } .grass { position: absolute; etc... }
Comments
Post a Comment