Problème de centrage "interne"

Résolu/Fermé
Raid - Modifié par Raid le 20/05/2015 à 19:27
 Raid - 22 mai 2015 à 17:03
Salut à tous,

J'ai un petit problème que je n'arrive pas à résoudre.
Mon site : http://www.gng-france.com/0Accueil.html
Le problème se situe au niveau du footer. J'ai un écran 13" et pour que mon site s'adapte aux autres taille j'ai center les conteneurs, mais le contenue du footer ne veut pas ce centrer.

J'aimerais que "haut de page" reste à gauche, le copyright sois centrer au milieu et les réseaux sociaux soit coller sur la droite.

Voici mes codes :

HTML :

<div id="footer">
<span id="hdp"><a href="#">Haut de page</a></span>

<span id="gng">© Gang Nations Gameplay - France 2015</span>

<span>

<a href="https://www.facebook.com/groups/GNGFrance/" target="Google"><img id="logof" src="img/imageshtml/logof.png" alt="Logo Facebook" /></a>

<a href="https://twitter.com/gngfrance" target="Google"><img id="logot" src="img/imageshtml/logot.png" alt="Logo Twitter" /></a>

<a href="Contact.html#mail" target="Google"><img id="logoc" src="img/imageshtml/logoc.png" alt="Logo du Courrier" /></a>

</span>
</div>

CSS :

#footer{ z-index: 2; position:relative; background: black; width:90%; height:100px; top:180px; opacity: 0.88; margin-left:auto; margin-right:auto; }

#hdp { position :relative; top: 10px; left: 30px; }

#hdp a { color:white; font-family:Impact; font-size:25px; text-decoration:none; }

#gng { position: relative; color:white; font-family:Impact; font-size:30px; left:165px; top:30px; }

#logof { position:absolute; width: 50px; height: 50px; list-style-type:none;top:28px; left:900px; }

#logot { position:absolute; width: 50px; height: 50px; list-style-type:none; top:28px; left:960px; }

#logoc { position:absolute; width: 50px; height: 50px; list-style-type:none; top:28px; left:1020px; }



Merci à vous

2 réponses

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 20/05/2015 à 22:16
Salut
fais comme cela
html

<div id="footer">
<div id="footerG">contenu a gauche</div>
<div id="footerD">contenu a droite</div>
<div id="footerC">contenu au milieu</div>

</div>

css

#footerG{
width:30%; /*ou valeur en px*/
float:left;
text-align:left;
}
#footerD{
width:30%; /*ou valeur en px*/
float:right;
text-align:right;
}
#footerC{
text-align:center;
}


voila après tu adaptes les tailles de police dimensions etc... mais evite les position absolute pour tes images

Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
1
Ah pas bête les divs autour de l'élément centrer... j'avais pas penser à sa. J'essaye demain je te redis sa merci bien
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
21 mai 2015 à 00:43
ok
0
salut animostab,

En suivant ton code et en le mettant à ma sauce j'ai réussit à refaire ce que je voulais, et le centrer grâce à ton code donc merci.

Par contre j'ai 2 autres soucis,

A la fin de mon fond blanc, j'ai l'espace de 3 ou 4 <br/> qui se sont incrustés alors que y'en a pas dans mon code HTML et je vois pas pas d'où c'est venue.

Et mon footer n'est pas collé comme avant au pied de page, c'est pas très gênant mais je ne vois pas comment faire, j'ai tester plusieurs solution, mais rien ne bouge. Je ne veut pas de : position:fixed; ...

Merci @+
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
22 mai 2015 à 14:36
ca vient de #footer qui a un top de 200px
tu peux utiliser firefox avec les extension firebug et webdeveloper pour rechercher ce genre de truc (clic droit sur l'élément / examiner l'élément)
0
Ok merci j'aurais surement d'autres questions plus tard =')
0