Sujet Précédent Sujet Suivant

Centrer footer!!!

Fermé
kataiyai - 24 mai 2012 à 22:33
mpmp93 Messages postés 6652 Date d'inscription mercredi 13 avril 2011 Statut Membre Dernière intervention 28 septembre 2015 - 27 mai 2012 à 21:03
Bonjour,
Je sais que normalement ça doit être du gâteau mais moi je n'y arrive pas...
En fait j'aimerais que mon menu soit en bas de ma page et je l'ai donc mis en footer (c'est peut être deja une première erreur?).
Mais comment centrer mon menu qui est une balise div dans mon footer?
Merci d'avance ^^'

code:
HTML: 

<footer>
<div id="footer" align="center">
	<ul id="menu">

        <li>
                <a href="index.html">Accueil</a>
        </li>
        
        <li>
                <a href="biographie.html">Biographie</a>
        </li>
        
        <li>
                <a href="projets.html">Projets</a>
                
        </li>
        
        <li>
                <a href="contact.html">Contact</a>
        </li>
	</ul>
    </div>
</footer>



CSS: 
div#footer { 
	font-weight : bold;
        font-family : Arial; 
        font-size : 20px; 
	margin: 0; 
	display: block ; 
	text-align: center; 
	color: #8a0 ; 
	position:absolute; 
	bottom:0;
	width: 100%;
		 	}

	
#menu, #menu ul /* Liste */     
{
        padding : 0; 
        margin : 0; 
        list-style : none; 
        line-height : 21px; 
        text-align : center; 


#menu /* Ensemble du menu */
{
        font-weight : bold;
        font-family : Arial;
        font-size : 12px; 
}

#menu a /* Contenu des listes */
{
        display : block; 
        padding : 0; 
        background : #000;     
        color : #fff; 
        text-decoration : none;
        width : 144px;
}

#menu li /* Éléments des listes */      
{ 
        float : left; /* pour IE qui ne reconnaît pas "transparent" */
        border-right : 10px solid;
	border-color: transparent;
}


#menu a:hover 
{
        color: #000; 
        background: #fff; 
}
A voir également:

7 réponses

Réponse 1 / 7
Navid_92 Messages postés 711 Date d'inscription dimanche 7 décembre 2008 Statut Membre Dernière intervention 12 février 2015 87
24 mai 2012 à 22:47
Essaye ça: 

#footer {
font:bold 20px Arial;
display:block;
text-align:center;
color:#8a0;
position:absolute;
bottom:0;
width:100%;
margin:0
}

/* Liste */ 
#menu,#menu ul {
list-style:none;
line-height:21px;
text-align:center;
margin:0 auto;
padding:0
}

/* Ensemble du menu */
#menu {
font:bold 12px Arial
}

/* Contenu des listes */
#menu a {
display:block;
background:#000;
color:#fff;
text-decoration:none;
width:144px;
padding:0
}

/* Éléments des listes */
#menu li {
float:left;
border-right:10px solid;
border-color:transparent
}

#menu a:hover {
color:#000;
background:#fff
}
1
kataiyai
24 mai 2012 à 23:02
merci pour ton aide
malheureusement, il ne veut pas bouger de son coin en bas à gauche de ma page... ^^'
0
Réponse 2 / 7
txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 515
24 mai 2012 à 23:08
Salut,
Je pense qu'il faut donner une valeur en px ou autre au lieu d'un pourcentage. J'ai eu le même souci et l'ai réglé en mettant une valeur en pixels. 

#footer { /* paramètres du footer */
	font-weight : bold;
        font-family : Arial; 
        font-size : 20px; 
	margin: auto; /* marge automatique */
	display: block ; 
	text-align: center; /* texte aligné au centre */
	color: #8a0 ; 
	position:absolute; 
	bottom:0; /* valeur par rapport au bas */
	width: 500px; /* valeur en px */
		 	}

Mais tu aurais aussi bien pu (et même conseillé) de faire un include de ce footer.


Le bonheur est la seule chose que l'on peut donner sans l'avoir.
0
Navid_92 Messages postés 711 Date d'inscription dimanche 7 décembre 2008 Statut Membre Dernière intervention 12 février 2015 87
24 mai 2012 à 23:28
Mais lol c'est juste que tu as mis position absolute, donc il se calle par rapport à ta page, et donc en bas, et par défault à gauche.
0
kataiyai
24 mai 2012 à 23:35
Te fou pas de moi, j'essaye d'apprendre... ^^'
Mais j'avais changé ca j'ai chipoté a tout, j'ai mis absolute fixed et le troisieme je sais meme plus ... Du coup c'est lequel? :)
0
kataiyai
24 mai 2012 à 23:38
je viens de reessayer avec fixed c'est la meme chose que absolute, avec relative ou si je l'enleve, c'est comme si ca annulait le footer...
0
Réponse 3 / 7
kataiyai
24 mai 2012 à 23:32
Salut :)

Non il ne veut toujours pas, quand je met une valeur en pixel il me place le menu "contact" en dessous du reste... ^^'
En plus si on ouvre mon site avec safari c'est le bordel, y'a qu'avec chrome et firefox que ca va...

ok je vais faire des recherches sur ce que c'est faire un include ^^'

En gros ma situation: je dois faire un site pour lundi avec Dreamweaver qu'on a vu qu'une fois en cours... On a a peine vu le code (juste les bases) et c'est un examen!!!! Ahaha la blague!

En tout cas ta phrase de fin est magnifique! Et rien que ca, ca donne le sourire! :)
On en a tous besoin dans cette société...!
Merci!
0
Navid_92 Messages postés 711 Date d'inscription dimanche 7 décembre 2008 Statut Membre Dernière intervention 12 février 2015 87
24 mai 2012 à 23:47
Vu que c'est un examen, passe tout le code que tu as je vais te le faire :p
0
kataiyai
24 mai 2012 à 23:57
Tu peux pas savoir comme j'aimerais qu'il n'y ai pas ce bonhomme qui me tire la langue à la fin de ta phrase!!! lol
Je deviens folle ^^'
0
Réponse 4 / 7
txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 515
24 mai 2012 à 23:47
L'include c'est ceci:
tu crée une page où il n'y a que le footer (en html si tu veux). Dans la page où tu veux afficher le footer tu y met: 
<?php include "Mon_Footer.htm";?>
Note: toutes les pages qui auront un include devront avoir l'extension .php.
Le bonheur est la seule chose que l'on peut donner sans l'avoir.
0
kataiyai
24 mai 2012 à 23:59
Et donc ca revient au fait que je peux juste ecrire 
<?php include "Mon_Footer.htm";?>
dans toutes mes pages html pour que mon menu reste partout?
0
Navid_92 Messages postés 711 Date d'inscription dimanche 7 décembre 2008 Statut Membre Dernière intervention 12 février 2015 87
25 mai 2012 à 00:25
Désolé pour le smiley, mais là une include sa sert à rien vu qu'elle n'a pas dynamiser sa page avec une seule page. En plus, la tu dois renommer ton fichier en php et donc avoir un serveur pour pouvoir tester.
0
Navid_92 Messages postés 711 Date d'inscription dimanche 7 décembre 2008 Statut Membre Dernière intervention 12 février 2015 87
25 mai 2012 à 00:26
Envoi moi le html que je te règle ton histoire de centrage de menu.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
kataiyai
25 mai 2012 à 00:36
Bah y'a pas grand chose pour l'instant je chipote ^^'
HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Charlie Ropsy</title>
<link href="style.css" rel="stylesheet" type= "text/css" media="screen" />

</head>

<body>

<footer>
<div id="footer" align="center">
<ul id="menu">

<li>
<a href="index.html">Accueil</a>
</li>

<li>
<a href="biographie.html">Biographie</a>
</li>

<li>
<a href="projets.html">Projets</a>

</li>

<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</div>
</footer>

<h1 class="titre">Bienvenue sur le site de Charlie Ropsy</h1>

</body>
</html>



CSS:

@charset "UTF-8";
/* CSS Document */

body{
background:url(images/banner_rotator1.png);
}


h1{
color: #;
display: block ;
text-align: center;
}

#footer {
font:bold 20px Arial;
margin: auto;
display: block;
text-align: center;
position:fixed;
bottom:0;
width: 1000px;
opacity: 0.5;
margin: auto;
}



#menu, #menu ul /* Liste */
{
list-style:none;
line-height:21px;
text-align:center;
margin:0 auto;
padding:0
}


#menu /* Ensemble du menu */
{
font:bold 12px Arial
}

#menu a /* Contenu des listes */
{
display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
padding : 0; /* aucune marge intérieure */
background : #000; /* couleur de fond */
color : #fff; /* couleur du texte */
text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
width : 144px; /* largeur */
padding: 0;
}

#menu li /* Éléments des listes */
{
float : left; /* pour IE qui ne reconnaît pas "transparent" */
border-right : 10px solid;
border-color: transparent; /* on met une bordure transparente à droite de chaque élément */
}


#menu a:hover /* Lorsque la souris passe sur un des liens */
{
color: #000;
background: #F3C;
0
kataiyai
25 mai 2012 à 00:37
Oups tu veux que je te renvoie tout sans les commentaires? ^^'
0
kataiyai
25 mai 2012 à 00:41
@charset "UTF-8";
/* CSS Document */

body{
background:url(images/banner_rotator1.png);
}


h1{
color: #;
display: block ;
text-align: center;
}

#footer {
font:bold 20px Arial;
margin: auto;
display: block;
text-align: center;
position:fixed;
bottom:0;
width: 1000px;
opacity: 0.5;
margin: auto;
}



#menu, #menu ul
{
list-style:none;
line-height:21px;
text-align:center;
margin:0 auto;
padding:0
}


#menu
{
font:bold 12px Arial
}

#menu a
{
display : block;
padding : 0;
background : #000;
color : #fff;
text-decoration : none;
width : 144px;
padding: 0;
}

#menu li
{
float : left;
border-right : 10px solid;
border-color: transparent;
}


#menu a:hover
{
color: #000;
background: #F3C;
0
kataiyai
25 mai 2012 à 00:43
bon il me manque deja une couleur pour h1 et la largeur de 1000px dans footer c'etait pour voir la difference ^^'
0
Navid_92 Messages postés 711 Date d'inscription dimanche 7 décembre 2008 Statut Membre Dernière intervention 12 février 2015 87
25 mai 2012 à 01:19
tkt je te le fais la
0
kataiyai
25 mai 2012 à 01:23
:)))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))
0
Réponse 6 / 7
djosfr Messages postés 1163 Date d'inscription dimanche 30 août 2009 Statut Membre Dernière intervention 22 novembre 2016 191
Modifié par djosfr le 26/05/2012 à 19:42
bonjour,

nettoie un peu ton code pour ne laisser que l'essentiel.

Les propriétés importantes pour le centrage, c'est la largeur et les marges automatiques. Oublie la propriété position, ce n'est pas nécessaire.

Pour ceux que ça intéresse, il y a une technique avec la propriété text-align:center, mais telle qu'elle est utilisée là, ce n'est que pour centrer le texte dans la balise de pied de page.

Bref, un simple : 
div#footer{ 
width:500px; 
margin:0 auto; 
}

doit le faire.
CM ECS FSB 222MHz OC, AMD Athlon X2 4450e OC 2.55GHz, 4890 de base, 4Go DDR2 425MHz OC, DD BARRACUDA
0
kataiyai Messages postés 4 Date d'inscription samedi 26 mai 2012 Statut Membre Dernière intervention 27 mai 2012
26 mai 2012 à 20:13
Oui merci, j'ai ma structure là :)
Maintenant je me bat avec du javascript :)
Merci et bonne soirée!
0
Réponse 7 / 7
mpmp93 Messages postés 6652 Date d'inscription mercredi 13 avril 2011 Statut Membre Dernière intervention 28 septembre 2015 1 339
27 mai 2012 à 21:03
Bonsoir,

Arggghhhh (cri d'agonie...), c'est quoi ça?:

<footer>
<div id="footer" align="center">

Z'avez pas besoin d'un div dans un footer!

le css qui va bien:

1) soit ceci:

footer {
display: block;
width: 100%;
text-align: center;
}

2) soit ceci:

footer {
display: block;
margin-left: auto;
margin-right: auto;
}

3) et vous virez DIV:

<footer>
.....mon contenu de footer sans les DIV...
</footer>


ATTENTION: footer n'est pas bien digéré par IE6/7. Ici l'astuce pour que ça passe:

http://html5.immo-scope.com/index.php?page=html5/premierePageHtml5

A+
0

Discussions similaires

Formule Excel : "SI" une cellule contient un mot, alors ?
Tonio5933 -
Mike-31 -

9 réponses
Trouver le mot réellement écrit en lettres capitales PIX
ETHAN -
kirikou -

4 réponses
Excel si cellule contient texte alors...
caba_44 -
RENOU -

41 réponses
copie de texte
jean -
jean -

5 réponses
Dépixeliser / déflouter un texte ?
Edmaxel -
contrariness -

2 réponses