|
|
| Line 1: |
Line 1: |
| {{Scrapbook}} | | {{Moved_to_dev_docs}} |
| | |
| In ''footer.html'', the footer div is normally contained inside the page div e.g. ''moodle/theme/standardblue/footer.html''
| |
| | |
| <code php>
| |
| </div> <!-- end div content -->
| |
| | |
| <div id="footer">
| |
| <hr size="1" noshade="noshade" />
| |
| <?php echo $loggedinas ?>
| |
| <?php echo $homelink ?>
| |
| </div> <!-- end div footer -->
| |
| | |
| </div> <!-- end div page -->
| |
| </body>
| |
| </html>
| |
| </code>
| |
| | |
| Change this so the footer div appears after the page div
| |
| | |
| <code php>
| |
| </div> <!-- end div content -->
| |
| </div> <!-- end div page -->
| |
|
| |
| <div id="footer">
| |
| <hr size="1" noshade="noshade" />
| |
| <?php echo $loggedinas ?>
| |
| <?php echo $homelink ?>
| |
| </div> <!-- end div footer -->
| |
|
| |
| </body>
| |
| </html>
| |
| </code>
| |
| | |
| Then in the layout CSS file add the following
| |
| | |
| <code php>
| |
| html, body {
| |
| margin: 0; padding: 0;
| |
| height: 100%;
| |
| }
| |
|
| |
| #page {
| |
| margin: 0; padding: 0;
| |
| min-height: 100%; _height: 100%; /* min-height for smart browsers
| |
| _height for Internet Explorer ;-)*/
| |
| }
| |
|
| |
| #content {
| |
| padding-bottom: 105px;
| |
| }
| |
|
| |
| #footer {
| |
| margin: -100px 0 0 0; padding: 0 0 10px 0; /* assuming footer of height 100px */
| |
| | |
| }
| |
| </code>
| |
| | |
| This creates a div that should always at least fill the height of the browser viewport, regardless of the amount of page content. The footer is positioned underneath this div and nudged up using a negative top margin. We also need to allow some extra space underneath the content so that when the footer gets repositioned it doesn't overlap anything. 105 pixels of padding are added to the bottom of the content div to make a space for the footer, then the footer is moved up from its current position by 100 pixels.
| |
| | |
| ==References==
| |
| * [http://www.themaninblue.com/writing/perspective/2005/08/29/ footerStickAlt: A more robust method of positioning a footer]
| |
| | |
| [[Category:Administrator]]
| |
| [[Category:Developer]]
| |
| [[Category:Themes]]
| |
Latest revision as of 07:20, 22 June 2011
