Centrer footer CSS
kevin76110
Messages postés
5350
Statut
Membre
-
AssassinTourist Messages postés 409 Date d'inscription Statut Contributeur Dernière intervention -
AssassinTourist Messages postés 409 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour,
Je n'arrive jamais à centrer mes éléments du footer dans le CSS.
J'ai une image à gauche, du texte à droite.
Ce qui est un peu embêtant vu qu'à chaque fois je perds 2h, je trouve la solution puis je l'oublie.
Voici mon html :
et mon CSS :
Y a t'il des trucs à virer ? à ajouter ?
J'aimerais que l'image soit centrée, et le texte soit centré, mais aligné à gauche ( collé à l'image quoi).
Merci d'avance.
K.
--
°º¤ø,¸¸,ø¤º°'°º¤ø, Contributeur CCM °º¤ø,¸¸,ø¤º°'°º¤ø,
Sous Linux, 99% des bugs se situent entre le clavier et la chaise de bureau...
Je n'arrive jamais à centrer mes éléments du footer dans le CSS.
J'ai une image à gauche, du texte à droite.
Ce qui est un peu embêtant vu qu'à chaque fois je perds 2h, je trouve la solution puis je l'oublie.
Voici mon html :
<div id="footerContainer">
<div id="footer">
<img src="img/image.gif" width="130" height="80" alt="mon-alt" />
<p>ligne1</p>
<p>ligne2</p>
<br>
<p>ligne3</p>
<p>ligne4</p>
<p><a href="mailto:contact@monsite.fr" target="_blank">contact@monsite.fr</a></p>
</div>
</div>
et mon CSS :
/* --------------- FOOTER ---------------*/
#footerContainer {
position: absolute;
bottom: 0;
padding: 0;
background-color: #000;
color: #fff;
margin:0 auto;
width:100%;
height:120px;
display: block;
}
#footer{
margin:0 auto;
width:900px;
display: block;
text-align: center;
}
#footer p {
line-height: 2px;
}
#footer img {
float: left;
margin: 10px 10px;
}
#footer a {
color: #2D9AD1;
text-decoration: underline;
}
Y a t'il des trucs à virer ? à ajouter ?
J'aimerais que l'image soit centrée, et le texte soit centré, mais aligné à gauche ( collé à l'image quoi).
Merci d'avance.
K.
--
°º¤ø,¸¸,ø¤º°'°º¤ø, Contributeur CCM °º¤ø,¸¸,ø¤º°'°º¤ø,
Sous Linux, 99% des bugs se situent entre le clavier et la chaise de bureau...
2 réponses
-
Salut!
Alors, il faudrait que tu rajoutes deux div : un qui contient l'image et un autre qui contient le texte. Chacun d'eux devra faire 50% de la taille de ton footer. Puis, le div de gauche (donc celui qui contient ton image si j'ai bien compris) sera flottant à gauche et celui de droite (le texte) flottant à droite. Et finalement, tu appliques un float:right; au div de ton image et un text-align:left à tes paragraphes.
Le plus simple est de te montrer ton code corrigé :
Les styles: #footerContainer { position: absolute; bottom: 0; padding: 0; background-color: #000; color: #fff; margin:0 auto; width:100%; height:120px; display: block; } #footer{ margin:0 auto; width:700px; display: block; text-align: center; } #footer-img{ width:50%; float:left; } #footer-text{ width:50%; float:right; } #footer-text p{ line-height: 2px; text-align:left; } #footer-img img { margin: 10px 10px; float:right; } #footer a { color: #2D9AD1; text-decoration: underline; } Et le html: <div id="footerContainer"> <div id="footer"> <div id="footer-img"> <img src="img/image.gif" width="130" height="80" alt="mon-alt" /> </div> <div id="footer-text"> <p>ligne1</p> <p>ligne2</p> <br> <p>ligne3</p> <p>ligne4</p> <p><a href="mailto:contact@monsite.fr" target="_blank">contact@monsite.fr</a></p> </div> </div> </div>
J'espère avoir pu t'aider correctement! -
Bonjour,
Est-ce que ça marche ?=)
