Eureka Moment Wiki

One eureka moment at the time

User Tools

Site Tools


development:css:fixed_header_footer

Differences

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

Link to this comparison view

development:css:fixed_header_footer [2017/12/12 10:05] (current)
tplecko created
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>​
development/css/fixed_header_footer.txt · Last modified: 2017/12/12 10:05 by tplecko