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

Popular posts from this blog

c++ - QTextObjectInterface with Qml TextEdit (QQuickTextEdit) -

javascript - angular ng-required radio button not toggling required off in firefox 33, OK in chrome -

xcode - Swift Playground - Files are not readable -