Diferencia entre revisiones de «Posición del pie de página»
De MoodleDocs
(Copiado de Docs en) |
Sin resumen de edición |
||
| Línea 1: | Línea 1: | ||
{{FAQ de temas}} | {{FAQ de temas}} | ||
En ''footer.html'', el div de pie de página está contenido habitualmente dentro del div de la página, por ejemplo en ''moodle/theme/standardblue/footer.html'' | |||
<pre></div> <!-- | |||
<pre></div> <!-- final del div content --> | |||
<div id="footer"> | <div id="footer"> | ||
<hr size="1" noshade="noshade" /> | <hr size="1" noshade="noshade" /> | ||
| Línea 9: | Línea 9: | ||
<?php echo $homelink ?> | <?php echo $homelink ?> | ||
</div> <!-- | </div> <!-- final del div footer --> | ||
</div> <!-- | </div> <!-- final del div page --> | ||
</body> | </body> | ||
</html></pre> | </html></pre> | ||
Cambie esto para que el div del pie de página aparezca tras el div de página | |||
<pre></div> <!-- | <pre></div> <!-- fin del div content --> | ||
</div> <!-- | </div> <!-- fin del div page --> | ||
<div id="footer"> | <div id="footer"> | ||
| Línea 26: | Línea 26: | ||
</body> | </body> | ||
</html></pre> | </html></pre> | ||
Después en el fichero de composición CSS, añada lo siguiente | |||
<pre>html, body { | <pre>html, body { | ||
margin: 0; padding: 0; | margin: 0; padding: 0; | ||
| Línea 34: | Línea 34: | ||
#page { | #page { | ||
margin: 0; padding: 0; | margin: 0; padding: 0; | ||
min-height: 100%; _height: 100%; /* min-height | min-height: 100%; _height: 100%; /* min-height para navegadores inteligentes | ||
_height | _height para Internet Explorer ;-)*/ | ||
} | } | ||
| Línea 43: | Línea 43: | ||
#footer { | #footer { | ||
margin: -100px 0 0 0; padding: 0 0 10px 0; /* | margin: -100px 0 0 0; padding: 0 0 10px 0; /* suponemos un pie de página de altura 100px */ | ||
} | } | ||
</pre> | </pre> | ||
Esto crea un div que siempre debería llenar al menos la altura del puerto de vista del navegador, independientemente de la cantidad de contenido de la página. El pie de página se posiciona bajo este div y se empuja hacia arriba usando un margen superior negativo. También tenemos que permitir algo de espacio adicional bajo el contenido, de forma que cuando el pie de página se reposicione no sobreescriba nada. 105 pixels de padding se añaden en la parte inferior del div de contenido para hacer sitio para el pie de página, y luego el pie de página se mueve hacia arriba 100 pixels desde su posición. | |||
== | ==Referencias== | ||
* [http://www.themaninblue.com/writing/perspective/2005/08/29/ footerStickAlt: A more robust method of positioning a footer] | * [http://www.themaninblue.com/writing/perspective/2005/08/29/ footerStickAlt: A more robust method of positioning a footer] | ||
Revisión actual - 12:58 29 jun 2008
En footer.html, el div de pie de página está contenido habitualmente dentro del div de la página, por ejemplo en moodle/theme/standardblue/footer.html
</div> <!-- final del div content --> <div id="footer"> <hr size="1" noshade="noshade" /> <?php echo $loggedinas ?> <?php echo $homelink ?> </div> <!-- final del div footer --> </div> <!-- final del div page --> </body> </html>
Cambie esto para que el div del pie de página aparezca tras el div de página
</div> <!-- fin del div content --> </div> <!-- fin del div page --> <div id="footer"> <hr size="1" noshade="noshade" /> <?php echo $loggedinas ?> <?php echo $homelink ?> </div> <!-- end div footer --> </body> </html>
Después en el fichero de composición CSS, añada lo siguiente
html, body {
margin: 0; padding: 0;
height: 100%;
}
#page {
margin: 0; padding: 0;
min-height: 100%; _height: 100%; /* min-height para navegadores inteligentes
_height para Internet Explorer ;-)*/
}
#content {
padding-bottom: 105px;
}
#footer {
margin: -100px 0 0 0; padding: 0 0 10px 0; /* suponemos un pie de página de altura 100px */
}
Esto crea un div que siempre debería llenar al menos la altura del puerto de vista del navegador, independientemente de la cantidad de contenido de la página. El pie de página se posiciona bajo este div y se empuja hacia arriba usando un margen superior negativo. También tenemos que permitir algo de espacio adicional bajo el contenido, de forma que cuando el pie de página se reposicione no sobreescriba nada. 105 pixels de padding se añaden en la parte inferior del div de contenido para hacer sitio para el pie de página, y luego el pie de página se mueve hacia arriba 100 pixels desde su posición.
