Sticky header and footer CSS Rumi, July 24, 2013 HTML Code- <!– BEGIN: Sticky Header –> <div id="header_container"> <div id="header"> Header Content </div> </div> <!– END: Sticky Header –> <!– BEGIN: Page Content –> <div id="container"> <div id="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet ipsum magna, et convallis sem. Nunc pulvinar magna vitae orci malesuada blandit. Proin ac purus dui. Suspendisse venenatis egestas egestas. Sed tincidunt diam et massa convallis et mollis enim malesuada. Nullam eget metus nunc, eget imperdiet urna. Quisque vehicula ipsum non sapien vulputate convallis quis quis ligula. Aenean gravida mollis blandit. Nullam lacus tortor, viverra a auctor ac, porta eget neque. Duis placerat mi metus, a gravida quam. <br /><br /> Nam ut augue mauris, at dapibus quam. Pellentesque eu nunc enim. Proin facilisis, dolor nec sollicitudin mattis, sem velit mollis sem, sagittis sagittis libero ante id nunc. Nam congue, mauris non porttitor convallis, purus elit faucibus nunc, in mollis sem lorem eu tortor. Cras nec justo id libero fringilla placerat ac et leo. Mauris ac vehicula odio. Cras augue erat, sodales vel porttitor ut, scelerisque nec justo. Praesent vitae lorem erat. Suspendisse elementum tortor vitae diam venenatis eget fermentum lacus suscipit. Quisque varius vulputate tempus. … </div> </div> <!– END: Page Content –> <!– BEGIN: Sticky Footer –> <div id="footer_container"> <div id="footer"> Footer Content </div> </div> <!– END: Sticky Footer –> CSS Code /* Reset body padding and margins */ body { margin:0; padding:0; } /* Make Header Sticky */ #header_container { background:#eee; border:1px solid #666; height:60px; left:0; position:fixed; width:100%; top:0; } #header{ line-height:60px; margin:0 auto; width:940px; text-align:center; } /* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/ #container { margin:0 auto; overflow:auto; padding:80px 0; width:940px; } #content{} /* Make Footer Sticky */ #footer_container { background:#eee; border:1px solid #666; bottom:0; height:60px; left:0; position:fixed; width:100%; } #footer { line-height:60px; margin:0 auto; width:940px; text-align:center; } COMPLETE CODE <!DOCTYPE html> <html> <head> <title>Sticky Header and Footer</title> <style type="text/css"> /* Reset body padding and margins */ body { margin:0; padding:0; } /* Make Header Sticky */ #header_container { background:#eee; border:1px solid #666; height:60px; left:0; position:fixed; width:100%; top:0; } #header{ line-height:60px; margin:0 auto; width:940px; text-align:center; } /* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/ #container { margin:0 auto; overflow:auto; padding:80px 0; width:940px; } #content{} /* Make Footer Sticky */ #footer_container { background:#eee; border:1px solid #666; bottom:0; height:60px; left:0; position:fixed; width:100%; } #footer { line-height:60px; margin:0 auto; width:940px; text-align:center; } </style> </head> <body> <!– BEGIN: Sticky Header –> <div id="header_container"> <div id="header"> Header Content </div> </div> <!– END: Sticky Header –> <!– BEGIN: Page Content –> <div id="container"> <div id="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet ipsum magna, et convallis sem. Nunc pulvinar magna vitae orci malesuada blandit. Proin ac purus dui. Suspendisse venenatis egestas egestas. Sed tincidunt diam et massa convallis et mollis enim malesuada. Nullam eget metus nunc, eget imperdiet urna. Quisque vehicula ipsum non sapien vulputate convallis quis quis ligula. Aenean gravida mollis blandit. Nullam lacus tortor, viverra a auctor ac, porta eget neque. Duis placerat mi metus, a gravida quam. <br /><br /> Nam ut augue mauris, at dapibus quam. Pellentesque eu nunc enim. Proin facilisis, dolor nec sollicitudin mattis, sem velit mollis sem, sagittis sagittis libero ante id nunc. Nam congue, mauris non porttitor convallis, purus elit faucibus nunc, in mollis sem lorem eu tortor. Cras nec justo id libero fringilla placerat ac et leo. Mauris ac vehicula odio. Cras augue erat, sodales vel porttitor ut, scelerisque nec justo. Praesent vitae lorem erat. Suspendisse elementum tortor vitae diam venenatis eget fermentum lacus suscipit. Quisque varius vulputate tempus. … </div> </div> <!– END: Page Content –> <!– BEGIN: Sticky Footer –> <div id="footer_container"> <div id="footer"> Footer Content </div> </div> <!– END: Sticky Footer –> </body> </html> Related Scripts
Daily Shell Backup Script April 19, 2013 #!/bin/sh DAY=`/bin/date +%Y%m%d` TFILE="/var/log/pdns-cache/$(basename $0).$DAY.csv" rec_control dump-cache $TFILE echo "cache dump completed, dump script by rumi (hasan.emdad@mango.com.bd)" Related Read More
IP Setting on CentOS6 using Shell Script December 6, 2015 #!/bin/bash if [ $# -eq 5 ] then echo “” echo “Taking the backup and Changing the hostname from $(hostname) to $1 …” sed -i.bk “s/$(hostname)/$1/g” /etc/sysconfig/network echo “” echo “Backing up & Assigning the Static IP …” echo “” cp /etc/sysconfig/network-scripts/ifcfg-$2 /etc/sysconfig/network-scripts/$2.bk cat <<EOF > /etc/sysconfig/network-scripts/ifcfg-$2 DEVICE=$2 BOOTPROTO=static IPADDR=$3.$4… Read More
Submit Once- Form Validation Javascript July 23, 2008 If you have forms on your site, you know they are extremely prone to abuse by users. Apart from incomplete or bogus entries, the most common offense is duplicate submissions by the same individual, caused by pressing the “Submit” button over and over and over again. Well, this DHTML script… Read More