Centrer footer!!!

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

Afficher la suite

A voir également:

Centrer texte gimp
Gimp - Télécharger - Retouche d'image
Texte de chanson gratuit pdf - Télécharger - Vie quotidienne
Transcription audio en texte word gratuit - Guide
Excel cellule couleur si condition texte - Guide
Texte barré whatsapp - Guide

7 réponses

Réponse 1 / 7

Navid_92 Messages postés 711 Date d'inscription Statut Membre Dernière intervention 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
}

kataiyai

merci pour ton aide
malheureusement, il ne veut pas bouger de son coin en bas à gauche de ma page... ^^'

Réponse 2 / 7

txiki Messages postés 6596 Date d'inscription Statut Contributeur Dernière intervention 521

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 Statut Membre Dernière intervention 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.

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? :)

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...

Réponse 3 / 7

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!

Navid_92 Messages postés 711 Date d'inscription Statut Membre Dernière intervention 87

Vu que c'est un examen, passe tout le code que tu as je vais te le faire :p

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 ^^'

Réponse 4 / 7

txiki Messages postés 6596 Date d'inscription Statut Contributeur Dernière intervention 521

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.

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?

Navid_92 Messages postés 711 Date d'inscription Statut Membre Dernière intervention 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.

Navid_92 Messages postés 711 Date d'inscription Statut Membre Dernière intervention 87

Envoi moi le html que je te règle ton histoire de centrage de menu.

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

Posez votre question

Réponse 5 / 7

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;

kataiyai

Oups tu veux que je te renvoie tout sans les commentaires? ^^'

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;

kataiyai

bon il me manque deja une couleur pour h1 et la largeur de 1000px dans footer c'etait pour voir la difference ^^'

Navid_92 Messages postés 711 Date d'inscription Statut Membre Dernière intervention 87

tkt je te le fais la

kataiyai

:)))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))

Réponse 6 / 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

kataiyai Messages postés 4 Date d'inscription Statut Membre Dernière intervention

Oui merci, j'ai ma structure là :)
Maintenant je me bat avec du javascript :)
Merci et bonne soirée!

Réponse 7 / 7

mpmp93 Messages postés 6648 Date d'inscription Statut Membre Dernière intervention 1 340

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+

Discussions similaires

Formule Excel : "SI" une cellule contient un mot, alors ?

Excel formule : savoir si une cellule contient partie texte

[Excel] Recherche de Texte avec RechercheV

Sur gimp, comment passer en mode CMJN

Votre réponse

Discussions similaires