Previous | Home | Next |
Following example is for creating top frame in website:
<html> <head> <title>CSS Top Frame Layout</title> <style type="text/css"> body{ margin: 0; padding: 0; border: 0; overflow: hidden; height: 100%; max-height: 100%; } #framecontent{ position: absolute; top: 0; left: 0; width: 100%; height: 130px; overflow: hidden; background-color: navy; color: white; } #maincontent{ position: fixed; top: 130px; left: 0; right: 0; bottom: 0; overflow: auto; background: #fff; } .innertube{ margin: 15px; } * html body{ padding: 130px 0 0 0; } * html #maincontent{ height: 100%; width: 100%; } </style> </head> <body> <div id="framecontent"> <div class="innertube"> <h1>CSS Top Frame Layout</h1> <h3>Sample text here</h3> </div> </div> <div id="maincontent"> <div class="innertube"> <p style="text-align: center" >Credits: <a href="http://www.r4r.co.in" >R4R CSS Tutorials</a></p> </div> </div> </body> </html>
output
Previous | Home | Next |