Centrer footer!!!

kataiyai -  
mpmp93 Messages postés 2931 Date d'inscription   Statut Membre Dernière intervention   -
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

  1.
    Navid_92 Messages postés 778 Statut Membre 87
     
    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
    1. kataiyai
       
      merci pour ton aide
      malheureusement, il ne veut pas bouger de son coin en bas à gauche de ma page... ^^'
      0
  2. txiki Messages postés 6514 Date d'inscription   Statut Contributeur Dernière intervention   610
     
    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
    1. Navid_92 Messages postés 778 Statut Membre 87
       
      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
    2. kataiyai
       
      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
    3. kataiyai
       
      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
  3. kataiyai
     
    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
    1. Navid_92 Messages postés 778 Statut Membre 87
       
      Vu que c'est un examen, passe tout le code que tu as je vais te le faire :p
      0
    2. kataiyai
       
      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
  4. txiki Messages postés 6514 Date d'inscription   Statut Contributeur Dernière intervention   610
     
    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
    1. kataiyai
       
      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
    2. Navid_92 Messages postés 778 Statut Membre 87
       
      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
    3. Navid_92 Messages postés 778 Statut Membre 87
       
      Envoi moi le html que je te règle ton histoire de centrage de menu.
      0

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

    Posez votre question
  6. kataiyai
     
    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
    1. kataiyai
       
      Oups tu veux que je te renvoie tout sans les commentaires? ^^'
      0
    2. kataiyai
       
      @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
    3. kataiyai
       
      bon il me manque deja une couleur pour h1 et la largeur de 1000px dans footer c'etait pour voir la difference ^^'
      0
    4. Navid_92 Messages postés 778 Statut Membre 87
       
      tkt je te le fais la
      0
    5. kataiyai
       
      :)))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))
      0
  7. djosfr Messages postés 1163 Date d'inscription   Statut Membre Dernière intervention   191
     
    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
    1. kataiyai Messages postés 4 Statut Membre
       
      Oui merci, j'ai ma structure là :)
      Maintenant je me bat avec du javascript :)
      Merci et bonne soirée!
      0
  8. mpmp93 Messages postés 2931 Date d'inscription   Statut Membre Dernière intervention   1 341
     
    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

Excel formule : savoir si une cellule contient partie texte
plunderer007 -
francois -

14 réponses