Show pageOld revisionsBacklinksExport to PDFBack to top This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong. ====== Fixed header/footer with shadow ====== If you need a static header on the web page for a menu system, or a static footer for some data (tips perhaps?) to be displayed, here is how. Header HTML: <code html> <div id="header" class="shadeh">content</div> </code> Header CSS: <code css> #header { position:fixed; left:0px; top:0px; height:30px; width:100%; background:#999; } /* IE 6 */ * html #header{ position:absolute; top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px'); } div.shadeh:after { content: ""; position: fixed; top: 0px; left: 0; width: 100%; height: 30px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); box-shadow: 0px 0px 10px rgba(0,0,0,.8); z-index: 100; } </code> Footer HTML: <code html> <div id="footer" class="shadef">content</div> </code> Footer CSS: <code css> #footer { position:fixed; left:0px; bottom:0px; height:30px; width:100%; background:#999; } /* IE 6 */ * html #footer { position:absolute; top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px'); } div.shadef:after { content: ""; position: fixed; bottom: 0px; left: 0; width: 100%; height: 30px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); box-shadow: 0px 0px 10px rgba(0,0,0,.8); z-index: 100; } </code> development/css/fixed_header_footer.txt Last modified: 2019/10/31 09:04by 127.0.0.1