28172 sujets

CSS et mise en forme, CSS3

Footer à 100%, élément qui dépasse

Bonjour !

Je suis en train de réaliser l'intégration HTML5/CSS3 d'une maquette que j'ai créé.
Sur celle-ci, j'ai un footer qui doit prendre toute la largeur du navigateur. Le problème, c'est que lorsque je réduit les dimensions du navigateur, le footer ne prend plus toute la largeur et les éléments qui sont dedans dépassent...

En fait, sa donne ça :

http://img92.xooimage.com/files/a/d/5/bug-3a55328.png

Le footer (en noir) devrait aller jusqu'au bord droit, et le "suivez-nous" devrait donc se trouver par-dessus.

Je sais que sa peut venir d'une histoire de floats, mais je n'arrive pas à résoudre le problème... Voici le HTML:

        <footer>
            <div class="page">
                <p id="nk">Propulsé par <a href="http://www.nuked-klan.org/">Nuked Klan</a></p>
                <p id="copyright">© SAW Team 2013 | Réalisation : <a href="https://www.facebook.com/XenosisProductions">Xenosis Productions</a></p>
                <span id="fb">Suivez-nous sur <a href="https://www.facebook.com/SawTeamTrackmania"><img src="images/logo-facebook.png" alt="Facebook" title="Facebook"/></a></span>
            </div>
        </footer>


Et le CSS :

.page{
    clear: both;
    width: 960px;
    margin: 0 auto;
}

footer{
    background-color: #000000;
    width: 100%;
    margin-top: 20px;
    min-height: 40px;
}

footer .page{
   padding: 10px;
}

footer p{
    float: left;
    margin: 0;
}

footer #nk{
    margin-right: 200px;
}

footer #fb{
    float: right;
}

footer #fb > a{
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 10px;
    vertical-align: middle;
}


Merci d'avance pour votre aide Smiley smile
Modifié par ClementParis (13 Dec 2012 - 17:36)
A première vu, tu déclares une class 'page' qui fait 960px de largeur dans un footer de largeur 100%, qui doit être 100% de la page HTML si je ne me trompe pas.

Comme tout tes éléments de ton footer son compris dans cette div de class 'page' qui fait 960px de large, pour moi, c'est logique que sa merdouille.

D'un coté tu as un élément de largeur fixe 'class page';
D'un autre, tu as un élément de largeur variable 'footer';
Page étant contenu dans footer, les éléments réagisse en fonction de l'élément parent, soit footer, et pas page.

Enfin, je pense que c'est ça.
Merci pour ta réponse.

Je ne pense pas que le problème vienne de là, car j'ai fait la même chose sur le même site mais avec une barre qui se trouve en haut de la fenêtre, en position fixed et elle ne subit aucune modification au redimensionnement.

Je vais essayer de mettre le contenu de mon footer dans une autre class pour voir si change quelque chose.
Bonjour,

J'ai essayé de faire quelque chose en changeant un peu le code:

<footer>
  <div id="aaa">
    <p id="nk">Propulsé par <a href="http://www.nuked-klan.org/">Nuked Klan</a></p>
    <p id="copyright">© SAW Team 2013 | Réalisation : <a href="https://www.facebook.com/XenosisProductions">Xenosis Productions</a></p>
  </div>
  <div id="bbb"> <span id="fb">Suivez-nous sur <a href="https://www.facebook.com/SawTeamTrackmania"><img src="images/logo-facebook.png" alt="Facebook" width="30" height="30" title="Facebook"></a></span> </div>
</footer>

footer {
	background-color: #000000;
	width: 100%;
	margin-top: 20px;
	min-height: 40px;
	color: #FFF;
}
footer p {
	margin: 0;
}
#aaa {
	width: 360px;
	height: auto;
	float: left;
	margin-left: 10px;
}
#bbb {
	width: 160px;
	height: auto;
	float: right;
}
J'ai testé le auto, sa ne change rien.

Ta solution ne correspond pas à ce que je cherche à faire rodolphed, je voudrais que le footer soit une barre noire qui fait toute la largeur de la fenêtre et que le contenu de ce footer soit lui aligné avec le reste, c'est à dire une largeur de 960px centré. Avec le code que tu me proposes, le texte du footer n'est pas au centre.

Merci pour votre aide Smiley cligne

Il doit y avoir un truc que je ne comprends pas, j'ai fait un test en repartant de zéro (avec des pages html et css vides) et j'ai le même problème...
J'ai trouvé une solution Smiley smile

J'ai appliqué un min-width: 980px sur body et le problème est résolu !

Merci pour vos réponses.
Sujet clos
Aller à