html - How to keep buttons from moving when re-sizing the web browser -
this image-button website. http://puu.sh/ck7sf/6309c39cdb.jpg when re-size browser goes on here http://puu.sh/ck7vu/f17dafcc41.jpg
here code
html
<div class="nav"> <div id="buttons"> <a href="/"><div id="home_button"></div></a>
css
#home_button { background-image: url("home.png"); background-repeat:no-repeat; background-size: 100%; width: 150px; height: 60px; position: absolute; top: 196px; left: 502px; z-index: 10; }
keep in mind new css , html, please dont hate
you should not use absolute position this. change position: relative;
or position: static;
absolute positioning causing button shift coordinates (top: 196px; left: 502px;) edge of browser window.
i suggest researching float
property well, because it's useful in positioning things flow nicely, navigation this.
Comments
Post a Comment