Sujet Précédent Sujet Suivant

Centrer footer CSS

Fermé
kevin76110 Messages postés 4273 Date d'inscription vendredi 14 août 2009 Statut Membre Dernière intervention 27 mars 2013 - 16 janv. 2012 à 10:53
AssassinTourist Messages postés 5710 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 - 3 févr. 2012 à 11:14
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 : 
<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:

2 réponses

Réponse 1 / 2
The Dead T Messages postés 80 Date d'inscription vendredi 24 juillet 2009 Statut Membre Dernière intervention 19 janvier 2012 17
Modifié par The Dead T le 16/01/2012 à 11:13
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!
1
Réponse 2 / 2
AssassinTourist Messages postés 5710 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 1 311
3 févr. 2012 à 11:14
Bonjour,
Est-ce que ça marche ?=)
0

Discussions similaires

A quoi sert ETDctrl ? Peut-on le supprimer ?
Siempre2407 -
Siempre2407 -

2 réponses
ETD Control Helper dans System32 - Dois-je le supprimer ?
Miaou -
MisteryBean -

10 réponses
CodeMeter Runtime c'est quoi????
AZE 19 -
dsy73 -

1 réponse
Soulager Windows au Demarrage
titusdu37 -
tanteelise -

23 réponses
A quoi sert ATI Catalyst Control Center ?
Ryder-SCS -
lepinojp -

16 réponses