Centrer footer CSS
kevin76110
Messages postés
5350
Statut
Membre
-
AssassinTourist Messages postés 7838 Statut Contributeur -
AssassinTourist Messages postés 7838 Statut Contributeur -
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.
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.
A voir également:
- Footer center css
- Control center 4 - Télécharger - Divers Utilitaires
- Copytrans control center - Télécharger - Divers Utilitaires
- Catalyst control center - Télécharger - Pilotes & Matériel
- Family center - Guide
- Etd control center - Forum Virus
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é :
J'espère avoir pu t'aider correctement!
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!
