development:css:fixed_header_footer

Differences

This shows you the differences between two versions of the page.


—development:css:fixed_header_footer [2019/10/31 09:04] (current) – created - external edit 127.0.0.1
Line 1: Line 1:
 +====== 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>