Footer positioning: Difference between revisions
From MoodleDocs
(positioning the theme footer) |
Frank Ralf (talk | contribs) mNo edit summary |
||
| (10 intermediate revisions by 5 users not shown) | |||
| Line 1: | Line 1: | ||
{{Scrapbook}} | |||
In footer.html, the footer div is normally contained inside the page div e.g. moodle/theme/standardblue/footer.html | In ''footer.html'', the footer div is normally contained inside the page div e.g. ''moodle/theme/standardblue/footer.html'' | ||
< | |||
<div id="footer"> | <code php> | ||
<hr size="1" noshade="noshade" /> | </div> <!-- end div content --> | ||
<?php echo $loggedinas ?> | |||
<?php echo $homelink ?> | <div id="footer"> | ||
<hr size="1" noshade="noshade" /> | |||
</div> <!-- end div footer --> | <?php echo $loggedinas ?> | ||
</div> <!-- end div page --> | <?php echo $homelink ?> | ||
</body> | </div> <!-- end div footer --> | ||
</html></ | |||
</div> <!-- end div page --> | |||
</body> | |||
</html> | |||
</code> | |||
Change this so the footer div appears after the page div | Change this so the footer div appears after the page div | ||
< | |||
</div> <!-- end div page -- | <code php> | ||
</div> <!-- end div content --> | |||
</div> <!-- end div page --> | |||
</div> <!-- end div footer --> | <div id="footer"> | ||
<hr size="1" noshade="noshade" /> | |||
<?php echo $loggedinas ?> | |||
<?php echo $homelink ?> | |||
</div> <!-- end div footer --> | |||
</body> | </body> | ||
</html></ | </html> | ||
</code> | |||
Then in the layout CSS file add the following | Then in the layout CSS file add the following | ||
< | |||
<code php> | |||
html, body { | |||
margin: 0; padding: 0; | margin: 0; padding: 0; | ||
height: 100%; | height: 100%; | ||
| Line 45: | Line 55: | ||
} | } | ||
</ | </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. | 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:Administrator]] | ||
[[Category:Developer]] | [[Category:Developer]] | ||
[[Category:Themes]] | [[Category:Themes]] | ||
Latest revision as of 18:11, 12 May 2010
In footer.html, the footer div is normally contained inside the page div e.g. moodle/theme/standardblue/footer.html
</body>
</html>
Change this so the footer div appears after the page div
</body>
</html>
Then in the layout CSS file add the following
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 */
}
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.
