HTML CSS examples for CSS Widget:Header
Header Filling page top
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> html {<!--from w ww . j a v a 2s. c o m--> position: relative; height: 100%; } body { height: 100%; margin: 0 0 100px; padding-top: 70px; background-color: lightblue; } #wrapper { width: 100%; overflow: hidden; } #container { width: 100%; margin: 0 auto; } .banner-img { width: 100%; position: fixed; top: 51px; } .overflow { padding-top: 100px; } ul.nav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; position: fixed; top: 0; width: 100%; } ul.nav-right { float:right; list-style-type:none; } li.nav { float: left; } li.nav a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } </style> </head> <body> <div id="wrapper"> <div id="container"> <a> <img class="banner-img" src="https://www.java2s.com/style/demo/Opera.png"> </a> </div> </div> <ul class="nav"> <li class="nav"> <a class="active" href="default.asp">Home</a> </li> <li class="nav"> <a href="news.asp">News</a> </li> <li class="nav"> <a href="contact.asp">Contact</a> </li> <ul class="nav-right"> <li class="nav"> <a href="about.asp">About</a> </li> </ul> </ul> <div class="overflow"> <ul> <li>For overflow</li> <li>For overflow</li> <li>For overflow</li> <li>For overflow</li> <li>For overflow</li> <li>For overflow</li> <li>For overflow</li> <li>For overflow</li> <li>For overflow</li> <li>For overflow</li> </ul> </div> </body> </html>