css - Responsive Div Resize -
i'm new in coding , i'm stucked resize problem.
my header image 2 buttons on top (which menu). want build responsive template. when resize window 2 buttons doesn't entirelly follow image , stays below image.
how can fix it?
<!doctype html> <head> <meta charset="utf-8" /> <title>my website</title> <script src="js/jquery-2.1.0.min.js"></script> <script src="js/flowtype.js"></script> <style type="text/css"> body { overflow-x: hidden; } .image-banners { position: absolute; z-index: -1; max-width: 100%; height: auto; width: auto\9; /* ie8 */ top: 0em; left: 0em; } .banner-title { position: relative; font-family: 'segoe ui', sans-serif; font-size: 2em; text-shadow: 0.05em 0.05em black; color: rgba(255, 255, 255, 1); top: -0.5em; left: 2em } nav { position: fixed; margin-top: 2.5em; margin-left: 23em; font-family: 'segoe ui', sans-serif; font-size: 0.5em; line-height: 2.6em; } .link-nav { text-decoration: none; color: rgba(215,215,215,1); } .menu-button-left { background: rgba(143,3,6,1); background: -webkit-linear-gradient(bottom, rgba(143,3,6,1), rgba(120,3,6,1)); background: -moz-linear-gradient(bottom, rgba(143,3,6,1), rgba(120,3,6,1)); width: 15em; height: 2.5em; text-align: center; float: left; border-radius: 0.3em 0 0 0.3em; border-right: 0.1em solid; border-color: rgba(106,2,4,1); } .menu-button-left:hover { background: rgba(106,2,4,1); background: -webkit-linear-gradient(bottom, rgba(106,2,4,1), rgba(90,2,4,1)); background: -moz-linear-gradient(bottom, rgba(106,2,4,1), rgba(90,2,4,1)); } .menu-button-right { background: rgba(143,3,6,1); background: -webkit-linear-gradient(bottom, rgba(143,3,6,1), rgba(120,3,6,1)); background: -moz-linear-gradient(bottom, rgba(143,3,6,1), rgba(120,3,6,1)); width: 15em; height: 2.5em; text-align: center; float: left; border-radius: 0 0.3em 0.3em 0; } .menu-button-right:hover { background: rgba(106,2,4,1); background: -webkit-linear-gradient(bottom, rgba(106,2,4,1), rgba(90,2,4,1)); background: -moz-linear-gradient(bottom, rgba(106,2,4,1), rgba(90,2,4,1)); } </style> </head> <body> <header> <img class="image-banners" src="images/banner.png" /> <h1 class="banner-title body">my website</h1> <nav> <a class="link-nav body" href="#1"><div class="menu-button-left"><b>button 1</b></div></a> <a class="link-nav body" href="#2"><div class="menu-button-right"><b>button 2</b></div></a> </nav> </header> <script type="text/javascript"> $('body').flowtype({ minimum : 400, maximum : 1000, minfont : 5, maxfont : 40, fontratio : 30 }); </script> </body>
thanks you
first of all, common in these cases create jsfiddle
links or similar demonstrate problem. in case can find 1 here.
now add responsiveness buttons need use media queries
. (this applies in general responsive design) please have how use media queries here , guess ready enough solve it.
Comments
Post a Comment