le contenu dynamique chevauche le pied de page mais reste dans le flux de contenu?

Mon pied de page est-il assez élevé? Je me demande s'il est possible d'obtenir un léger chevauchement du contenu tout en restant dans le flux de contenu.le contenu dynamique chevauche le pied de page mais reste dans le flux de contenu?

Je suppose que l'alternative est de faire le pied de quelques milliers de pixels de haut et de le positionner en bas. Ce n'est pas une solution élégante cependant, n'importe qui a une meilleure idée?

http://www.digiflipconcepts.com/temporary-images/footer-overlap.jpg http://www.digiflipconcepts.com/temporary-images/footer-overlap.jpg

Source

2009-03-18 morktron

+1 pour les notes de serviette –

merci Ken, j'aspire à être une note de serviette roi un jour et grâce à vous suis un peu plus;) – morktron

d'accord avec le premier commentaire. +1 pour les notes de serviette :) –

Ce semble être une bonne idée. Si vous avez besoin de chevauchement, alors une position absolue doit être faite.

Définissez votre pied de page absolument au bas de la page et z-index: 0. Ensuite, votre contenu z-index: 1 et padding-bottom: (hauteur du pied de page - chevauchement souhaité).

Source

2009-03-18 23:27:40 Seb

Merci Seb, ça me semble être une bonne solution. Je vais essayer, beaucoup merci en effet :) – morktron

Salut Seb, je l'ai eu de travail :) http://www.digiflipconcepts.com/smokinhot/templates/smokinhot/ Bien que j'ai ajouté une colonne de gauche juste pour faire les choses un peu plus difficiles mais je n'arrive pas à être dans le flux de contenu. Des idées? – morktron

Vous pouvez utiliser sticky footer que j'ai trouvé un certain temps il y a in this question

J'ai fait ce qui fonctionne dans Firefox, mais je ne peux pas le faire jouer bien avec l'aide de IE 7. Tout le monde serait génial.

EDIT: Fait fonctionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<title>A CSS Sticky Footer with Overlap</title> 
<style type="text/css"> 
body { 
    text-align: center; 
} 

.wrapper { 
    margin: 0 auto -142px; 
    position: relative; 
    text-align: left; 
    width: 700px; 
} 
.header { 
    /*Go download the header yourself from http://ryanfait.com/sticky-footer/header.png 
    Please don't steal the guy's bandwidth*/ 
    background: transparent url(header.png) no-repeat scroll 0 0; 
    height: 160px; 
} 
.footer_bg { 
    /*Go download the header yourself from http://ryanfait.com/sticky-footer/footer.jpg 
    Please don't steal the guy's bandwidth*/ 
    background: transparent url(footer.jpg) no-repeat scroll 0 0; 
    border: 1px solid blue; 
    height: 100%; 
    margin: 0 auto; 
    width: 700px; 
} 

.footer { 
    clear:both; 
    border: 1px solid red; 
    margin: 0 auto; 
    position: relative; 
    width: 100%; 
} 
.footer_bg p { 
    bottom: 4px; 
    color: #FFFFFF; 
    left: 0; 
    position: absolute; 
    text-align: center; 
    width: 100%; 
} 
* { 
    margin: 0; 
} 
html, body { 
    height: 100%; 
} 
.wrapper { 
    height: auto !important; 
    min-height: 100%; 
} 
.push { 
    height: 142px; 
    position: absolute; 
} 
.footer { 
    height: 142px; 
    z-index: -1; 
} 
#content { 
    z-index: 10; 
} 

</style> 
<link rel="stylesheet" type="text/css" media="screen" href="style.css" /> 
</head> 
<body> 
<div class="wrapper"> 
    <div class="header"> 
     <h1>CSS Sticky Footer</h1> 
    </div> 
    <div id="content"> 
     <h2>A CSS sticky footer that just works</h2> 
     <p>We've all tried to use a <strong>sticky footer</strong> one time or another, but they never seem to come out right, do they? Well, the days of a hard to understand CSS-based <strong>sticky footer</strong> are thankfully over. In just a few simple CSS classes with minimal extra HTML markup, I've fashioned a <strong>sticky footer</strong> that even beginners can get a handle on. It's been tested in IE 5 and up, Firefox, Safari and Opera.</p> 
     <h2>Usage of the CSS</h2> 
     <p><q>Great! this is exactly what I'm looking for! Can I use it?</q></p> 
     <p>Absolutely. There are no terms, licenses, fees or requirements. Use it as you will. If you find the kindness to link to me on your site, I'd appreciate it, but it's by no means necessary. Have fun, and don't be afraid to ask me any questions or send me your thoughts.</p> 
     <p class="download"><a href="layout.css" title="Download the stylesheet">View the CSS</a> or <a href="/resources/footer-stick-to-bottom-of-page/" title="Make a footer stick to the bottom of a page">learn about using it</a></p> 
    </div> 
    <div class="push"></div> 
</div> 
<div class="footer"> 
    <div class="footer_bg"> 
     <p>Copyright &copy; 2006-2008 <a href="http://ryanfait.com/" title="Las Vegas Web Design">Ryan Fait</a></p> 
    </div> 
</div> 
</body> 
</html>

Source

2009-03-18 23:32:10 MrChrister

Merci, pas exactement ce que je cherchais mais une excellente ressource :) – morktron

Je sais. J'essaie maintenant de l'utiliser pour faire le chevauchement, ce qui est un joli coup d'oeil en passant. J'aime vraiment l'idée. – MrChrister

le contenu dynamique chevauche le pied de page mais reste dans le flux de contenu?

Répondre

Questions connexes