html - Html5 with CSS elements move when zooming -
hi guys might easy question i'm struggling bit 1 problem in html , css page.
problem: when zoom int "section" part moves under nav , when zoom out footer moves next section part.....
here sample of html page:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>mywebsite</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <header> header </header> <body> <nav> <ul> <li> tab1 </li> <li> tab2 </li> <li> tab3 </li> <li> tab4 </li> <li> tab5 </li> </ul> </nav> <section id=""> section </section> <footer> footer </footer> </body> </html>` here css page:
header { width: 1325px; height: 150px; background-color: green; position: relative; } nav { position: relative; width: 400px; height: 500px; background-color: teal; float: left; overflow: hidden; } section { position: relative; float: left; width: 925px; height: 500px; background-color: blue; } footer { float: left; width: 1325px; height: 50px; background-color: lime; position: relative; overflow: hidden; } thanks , time in advance
your body tag needs before header. add wrapper width html/css.
here fiddle: http://jsfiddle.net/msjlw/
<div id="wrap"> <header> header </header> <nav> <ul> <li> tab1 </li> <li> tab2 </li> <li> tab3 </li> <li> tab4 </li> <li> tab5 </li> </ul> </nav> <section id=""> section </section> <footer> footer </footer> </div> #wrap{ width:1325px; } header { width: 1325px; height: 150px; background-color: green; } nav { width: 400px; height: 500px; background-color: teal; float: left; overflow: hidden; } section { float: left; width: 925px; height: 500px; background-color: blue; } footer { float: left; width: 1325px; height: 50px; background-color: lime; overflow: hidden; }
Comments
Post a Comment