Centrer footer!!! [Fermé]

Signaler
-
mpmp93
Messages postés
6709
Date d'inscription
mercredi 13 avril 2011
Statut
Membre
Dernière intervention
28 septembre 2015
-
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; 
}

7 réponses

Messages postés
711
Date d'inscription
dimanche 7 décembre 2008
Statut
Membre
Dernière intervention
12 février 2015
76
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
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 87089 internautes nous ont dit merci ce mois-ci

merci pour ton aide
malheureusement, il ne veut pas bouger de son coin en bas à gauche de ma page... ^^'
Messages postés
3141
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
12 avril 2017
376
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.
Navid_92
Messages postés
711
Date d'inscription
dimanche 7 décembre 2008
Statut
Membre
Dernière intervention
12 février 2015
76
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.
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? :)
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...
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!
Navid_92
Messages postés
711
Date d'inscription
dimanche 7 décembre 2008
Statut
Membre
Dernière intervention
12 février 2015
76
Vu que c'est un examen, passe tout le code que tu as je vais te le faire :p
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 ^^'
Messages postés
3141
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
12 avril 2017
376
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.
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?
Navid_92
Messages postés
711
Date d'inscription
dimanche 7 décembre 2008
Statut
Membre
Dernière intervention
12 février 2015
76
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.
Navid_92
Messages postés
711
Date d'inscription
dimanche 7 décembre 2008
Statut
Membre
Dernière intervention
12 février 2015
76
Envoi moi le html que je te règle ton histoire de centrage de menu.
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;
Je crois que c'est surtout un probleme d'organisation des fichiers:
j'ai laissé les fichiers scripts dans un dossier "banner-rotator" dans mon dossier de base web. Donc, dans le code je change:
<script type="text/javascript" src="swfobject.js"></script>
en
<script type="text/javascript" src="banner-rotator/swfobject.js"></script>


Mais
Dans le dossier que j'ai telechargé, j'ai une page html et une page css c'est juste pour nous donner l'exemple? Mais y'a quand meme un truc que je comprend pas, au niveau css faut reporter qqch?
Je copie le code script dans ma page a moi:


<html lang="fr">
   <head>
      <!-- meta -->
      <meta charset="utf-8" />
      <meta name="keywords" content="Charlie Ropsy" />
      <meta name="description" content="Il s'agit de mon premier site web" />
      <meta name="author" content="Charlie Ropsy / Design textile">
	  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
      <!-- include -->
      <link rel="stylesheet" href="style.css" media="all" />
 
      <title>Charlie Ropsy / Design textile</title> 

      <!--[if lt IE 9]>
         <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
   </head>
   
   
   <body><div>
   
  		<div class="logo"><img src="images/logo.png" alt="Logo" width="170" height="170" id="logo"/></div>
			<section id="wrapper">
    
   			   <header id="entete">
         <h1>Bienvenue sur le site de Charlie Ropsy</h1>
    			</header>
      
		<article id="content">
		   <p>Contenu de la page</p>
           
          <div id="DivBannerRotatorFX"></div>
 
          <script type="text/javascript" src="banner-rotator/swfobject.js"></script>
          <script type="text/javascript">
 var flashvars = {};
 var params = {};
 params.base = "";
 params.scale = "noscale";
 params.salign = "tl";
 params.wmode = "transparent";
 params.allowFullScreen = "true";
 params.allowScriptAccess = "always";
 swfobject.embedSWF("BannerRotatorFX.swf", "DivBannerRotatorFX", "600", "260", "9.0.0", false, flashvars, params);
             </script>
          </p>
</article>
        
		<footer id="footer">
			<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>
		</footer>
        
	</section>
</div> </body>
</html> 
Et aussi, j'ai ajouté une image que j'arrive pas a placer correctement, tu vois le "wrapper", elle se glisse un peu dessous, comment l'avoir dessus? ^^'
Encore merci hein!
Navid_92
Messages postés
711
Date d'inscription
dimanche 7 décembre 2008
Statut
Membre
Dernière intervention
12 février 2015
76
D'un côté j'ai pas trop envie de le faire car si tu n'y arrives pas par toi même, c'est pas cool.
Oui je comprend et je suis pas du genre à passer mon boulot aux autres pour me frotter les mains sur le coté en sifflant.
C'est la premiere fois que je poste des trucs sur un forum parce que je dois me rendre à l'evidence: je manque de temps. Voila pourquoi je me permet d'importuer d'autres personnes, et comme je t'ai dit, vraiment tu m'as deja beaucoup aidé, m'a fait gagné un temps fou et je t'en remercie vraiment car en effet tu es loin de me devoir qqch!
J'ai bien avancé, mais j'ai des problemes dans mon code. Genre mettre mon formulaire sur la droite, je l'ai mis dans un tableau, align:"right" et il m'enleve mon menu ^^', la j'ai reussi a le recuperer mais il se centre au ieu de se mettre a droite... Tu vois, des conneries, souligner un mot en rose quand on passe la souris dessus, tout ca j'ai trouvé comment faire mais il veut pas...
Apres c'est sur que le script, j'ai envie de trouver comment faire, je sais, tout est expliqué, seulement je ne sais pas quel fichier sert a quoi... J'ai envie d'apprendre, le webmastering me plait, je ne comprend pas pourquoi mon prof nous a donné un seul cours de Dreamweaver en une année.... Pour mon exam de noel, j'ai fait un site en tapant tout a la main et j'etais seule, je me suis démerdée, là je suis dans la merde j'essaye juste de gagner du temps...
Enfin, là je te raconte ma vie ^^', juste que tu comprennes que je suis honnete et tres reconnaissante! :)
Messages postés
1177
Date d'inscription
dimanche 30 août 2009
Statut
Membre
Dernière intervention
22 novembre 2016
150
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
kataiyai
Messages postés
4
Date d'inscription
samedi 26 mai 2012
Statut
Membre
Dernière intervention
27 mai 2012

Oui merci, j'ai ma structure là :)
Maintenant je me bat avec du javascript :)
Merci et bonne soirée!
Messages postés
6709
Date d'inscription
mercredi 13 avril 2011
Statut
Membre
Dernière intervention
28 septembre 2015
1 233
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+