css - Sticky HTML footer not working -
css - Sticky HTML footer not working -
so have looked @ these posts sticky footers on here...and tried every "fix" can find, still can't create footer show , stick bottom of page. not sure if has responsive iframe have in page or not - seems wipe out footer. closest have gotten footer float above content towards bottom, can't stick bottom content stopping above footer. help can give appreciated!
class="snippet-code-css lang-css prettyprint-override">html { position: relative; min-height: 100%; } body { font-family: 'pt_sansregular'; background-image: url(images/body_bg.jpg); background-repeat: repeat; } body, td, th { font-family: "pt_sansregular"; color: #ffffff; } a:link { color: #ff0004; text-decoration: none; } a:visited { text-decoration: none; color: #dc7f81; } a:hover { text-decoration: none; color: #fd5f61; } a:active { text-decoration: none; } body { font-family: 'pt_sansregular'; font-size: 12px; color: #000 margin: 0 0 95px; } .header { background: url(../images/top_pattern.png) repeat-x; height: 85px; width: 100%; } .footer { background: url(../images/foot_pattern.png) repeat-x; height: 95px; width: 100%; text-align: center; margin-top: 5px; color: #fff; font-size: 14px; position: absolute; left: 0; bottom: 0; } class="snippet-code-html lang-html prettyprint-override"><script type="text/javascript"> function setiframesource() { var theselect = document.getelementbyid('location'); var theiframe = document.getelementbyid('preview-frame'); var theurl; theurl = theselect.options[theselect.selectedindex].value; theiframe.src = theurl; } </script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <style> html body { width: 100%; height: 100%; padding: 0px; margin: 0px; overflow: hidden; font-family: arial; font-size: 10px; color: #6e6e6e; background-color: #000; } #preview-frame { width: 100%; background-color: #fff; } </style> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> var calcheight = function() { $('#preview-frame').height($(window).height()); } $(document).ready(function() { calcheight(); }); $(window).resize(function() { calcheight(); }).load(function() { calcheight(); }); </script> </head> <body> <div class="header"> <div class="wrapper"> <div class="logo"> <img src="images/easyadminlogo.png" width="180" height="57" alt="" /> </div> <div class="dropdown"> <form id="form1" name="form1" method="post" action=""> <label> <select name="location" id="location" onchange="setiframesource()"> <option value="http://www.saviodesigns.com/easyadmin/">select module ...</option> <option value="../admin_cms/">powercms</option> <option value="../news/">news manager</option> <option value="../resources/">resources/links manager</option> <option value="../blog/">academic portal manager</option> </select> </label> </form> </div> <a href="http://www.saviodesigns.com/contact.php" target="_blank" class="infolink"> <img src="images/requestquate.png" border="0" /> </a> <div class="clear"></div> </div> </div> <p align="center"> <iframe id="preview-frame" src="http://www.saviodesigns.com/easyadmin/" frameborder="0" noresize="noresize" scrolling="yes"> </p> </div> <div class="footer"> <div class="wrapper"> <p align="center"><em> help , ongoing support, please <a href="http://www.saviodesigns.com/faq_support.php" target="_blank">click here</a>. </em> <p>savio designs easy admin copyright © <?php $then=2 007; $now=d ate( 'y'); if ($then==$ now) echo $now; else echo "2014 - $now"; ?> <a href="http://www.saviodesigns.com" target="_blank">saviodesigns.com</a>, rights reserved.</a> </p> </div> </div> </body> </html>
here's code. dont forgot close tags when open. alter own colors!
class="snippet-code-html lang-html prettyprint-override"><!doctype html> <html> <head> <title>title</title> </head> <body> <style type="text/css"> body { font: 100%/1.4 verdana, arial, helvetica, sans-serif; background: #42413c; margin: 0; padding: 0; color: #000; } a:link { color: #ff0004; text-decoration: none; } a:visited { text-decoration: none; color: #dc7f81; } a:hover { text-decoration: none; color: #fd5f61; } a:active { text-decoration: none; } /* ~~ fixed width container surrounds other divs ~~ */ .container { width: 960px; background: #fff; margin: 0 auto; /* auto value on sides, coupled width, centers layout */ } /* ~~ header not given width. extend total width of layout. contains image placeholder should replaced own linked logo ~~ */ .header { background: #adb96e; } /* ~~ layout information. ~~ 1) padding placed on top and/or bottom of div. elements within div have padding on sides. saves "box model math". maintain in mind, if add together side padding or border div itself, added width define create *total* width. may take remove padding on element in div , place sec div within no width , padding necessary design. */ .content { padding: 10px 0; } /* ~~ footer ~~ */ .footer { padding: 10px 0; background: #ccc49f; } /* ~~ miscellaneous float/clear classes ~~ */ .fltrt { /* class can used float element right in page. floated element must precede element should next on page. */ float: right; margin-left: 8px; } .fltlft { /* class can used float element left in page. floated element must precede element should next on page. */ float: left; margin-right: 8px; } .clearfloat { /* class can placed on <br /> or empty div final element next lastly floated div (within #container) if #footer removed or taken out of #container */ clear:both; height:0; font-size: 1px; line-height: 0px; } --> </style> </style> <script type="text/javascript"> function setiframesource() { var theselect = document.getelementbyid('location'); var theiframe = document.getelementbyid('preview-frame'); var theurl; theurl = theselect.options[theselect.selectedindex].value; theiframe.src = theurl; } </script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <style> #preview-frame {width: 100%;background-color: #fff;}</style> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> var calcheight = function() { $('#preview-frame').height($(window).height()); } $(document).ready(function() { calcheight(); }); $(window).resize(function() { calcheight(); }).load(function() { calcheight(); }); </script> </head> <body> <div class="container"> <div class="header"> <div class="wrapper"> <div class="logo"> <img src="images/easyadminlogo.png" width="180" height="57" alt=""/> </div><div class="dropdown"> <form id="form1" name="form1" method="post" action=""> <label> <select name="location" id="location" onchange="setiframesource()"> <option value="http://www.saviodesigns.com/easyadmin/">select module ...</option> <option value="../admin_cms/">powercms</option> <option value="../news/">news manager</option> <option value="../resources/">resources/links manager</option> <option value="../blog/">academic portal manager</option> </select> </label> </form> <!-- end .header --> </div> <div class="content"> <a href="http://www.saviodesigns.com/contact.php" target="_blank" class="infolink"><img src="images/requestquate.png" border="0" /></a> <div class="clear"></div> </div> </div> <p align="center"> <iframe id="preview-frame" src="http://www.saviodesigns.com/easyadmin/" frameborder="0" noresize="noresize" scrolling="yes"></iframe> </p> <!-- end .content --></div> <div class="footer"> <div class="wrapper"> <p align="center"><em> help , ongoing support, please <a href="http://www.saviodesigns.com/faq_support.php" target="_blank">click here</a>. </em> <p>savio designs easy admin copyright ©<?php $then = 2007; $now = date('y'); if ($then == $now) echo $now; else echo "2014 - $now"; ?> <a href="http://www.saviodesigns.com" target="_blank">saviodesigns.com</a>, rights reserved. </a></p> </div> <!-- end .footer --></div> <!-- end .container --></div> </body> </html>
good luck!
html css css3 sticky
Comments
Post a Comment