Centrer un Footer en CSS

11 juin 2018 à 15:54:21

Bonjour,

Je suis à bout...

Je n'arrive pas à centrer mon Footer en bas de page il reste coller à la marge gauche. J'ai utiliser le codage position:relative; ce qui fonctionner mais je n'avais plus accès à mon menus déroulant (va savoir pourquoi).. J'imagine que la solution et toute bête mais je reste bloquer depuis une semaine.. J'ai plus que jamais besoin d'aide ! Je vous montre ci dessous mon codage.

/*Bas De Page*/
	
#main
	{		
	max-width:1321px;

	min-height:100%;

	margin:0 auto;

	position:relative;
	}
 
footer
	{		
	background:black;

	position:absolute;

	bottom:0;

	padding-top:30px;

	height:25px;
	
	color:white;
	
	width: 1321px;
	
	line-height:0px;
	}	

main
	{
	margin-bottom:0;
	}
.main
	{
	text-decoration:none;
	
	color:white;
	}

<div id="main" class="main">
<footer> 
		<div class="container">
			<a href="#" class="auto-style2"><span class="auto-style1">Contacter</span></a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://www.facebook.com/secouristes.aspec/" class="auto-style2"><span class="auto-style1">Facebook</span></a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" class="auto-style2" class="top"><span class="auto-style1">Haut de page</span></a>
		</div>
</footer>
</div>

Offkors

11 juin 2018 à 16:58:58

Salut,

On a pas vraiment assez d'infos pour pouvoir t'aider. Cependant, le bloc qui contient la div "Main" doit avoir une taille autre qu'en % pour que "main" puisse faire 100% de celui-ci. Quand je fais le test sur codepen, si j'attribue par exemple "min-height:100vw;" à ta div "main" le footer se place bien en pas de page. Mais comme je te dis, il nous faudrait l'url de la page pour avoir un aperçu concret du souci.

Loken32

12 juin 2018 à 10:11:15

BurnyOldy

12 juin 2018 à 10:17:54

Pourquoi veux-tu mettre ton footer dans une div ?

Tu devrais supprimer ta div "main" (qui je ne vois pas à quoi elle sert). Les blocks header, footer, section etc se comportent comme des div.

Étudiant en Informatique / C#, PHP, HTML, jQuery, CSS, CMS Drupal, SQL et BDD

Loken32

12 juin 2018 à 10:49:58

J'avoue que je me souvient plus pourquoi j'ai fait ça. J'ai retirer le div "main" et ça donne ça.

/*Bas De Page*/
	
#container
	{		
	max-width:1321px;

	min-height:100%;

	margin:0 auto;

	position:absolute;
	;	
	
	}
 
footer
	{
	background:black;

	position:absolute;

	bottom:0;

	padding-top:30px;

	height:25px;
	
	color:white;
	
	width: 1321px;
	
	line-height:0px;
	
	}	

container
	{
	margin-bottom:0;
	}
.container
	{
	text-decoration:none;
	
	color:white;
	}

<footer> 
		<div class="container" id="container">
			<a href="#" class="auto-style2"><span class="auto-style1">Contacter</span></a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://www.facebook.com/secouristes.aspec/" class="auto-style2"><span class="auto-style1">Facebook</span></a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" class="auto-style2" class="top"><span class="auto-style1">Haut de page</span></a>
		</div>
</footer>

BurnyOldy

12 juin 2018 à 11:40:25

Salut,

Ton footer doit-il prendre toute la largeur de la page ? Si oui, mets lui une valeur de 100% pour 'width'.

footer
    {
    background:black;
 
    position:absolute;
 
    bottom:0;
 
    padding-top:30px;
 
    height:25px;
     
    color:white;
     
    width: 100%;
     
    line-height:0px;
     
    }

Si non, laisse le dans un 'div' qui prend toute la longueur de la page, enlève la position absolute et utilise margin-left:auto et margin-right:auto.

footer
    {
    background:black;
 
    padding-top:30px;
 
    height:25px;
     
    color:white;
     
    width: 1321px;
     
    line-height:0px;

    margin-left:auto;

    margin-right:auto;
     
    }   
#main
{ 
    /* tu règles sa position et tu mets une hauteur légèrement supérieur a ton footer */

    width:100%;

}

Étudiant en Informatique / C#, PHP, HTML, jQuery, CSS, CMS Drupal, SQL et BDD

EmmanuelBeziat

12 juin 2018 à 11:58:02

Salut,

Ton footer n'a pas à être en position absolute. Le reste de tes éléments non plus.

https://www.emmanuelbeziat.com/blog/un-site-qui-prend-toute-la-hauteur-disponible

Au passage, laisse tomber les ID, garde ça pour les ancres. Pour ton CSS, utilise des classes.

Ton footer doit-il prendre toute la largeur de la page ? Si oui, mets lui une valeur de 100% pour 'width'.

Non. https://blog.goetter.fr/2011/11/30/width-100-tu-es-le-mal/

-
Edité par EmmanuelBeziat 12 juin 2018 à 12:08:40

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

BurnyOldy

12 juin 2018 à 13:07:38

rhooManu a écrit:

Ton footer doit-il prendre toute la largeur de la page ? Si oui, mets lui une valeur de 100% pour 'width'.

Non. https://blog.goetter.fr/2011/11/30/width-100-tu-es-le-mal/

En effet, bien vue merci.

Étudiant en Informatique / C#, PHP, HTML, jQuery, CSS, CMS Drupal, SQL et BDD

Loken32

12 juin 2018 à 14:45:54

Alors effectivement mon footer ne doit pas faire 100% de la largeur de la page, j'ai fait ce que tu a dit mais je n'es pas trop compris ce que tu voulais que je fasse avec le div (régler sa position et mettre une hauteur)

Donc j'ai fait ça et voila le résultat.

/*Bas De Page*/
	
#container
	{		
	max-width:1321px;

	min-height:100%;

	margin:0 auto;

	position:absolute;
	;	
	
	}
 
footer
	{
	background:black;
  
    padding-top:30px;
  
    height:25px;
      
    color:white;
      
    width: 1321px;
      
    line-height:0px;
 
    margin-left:auto;
 
    margin-right:auto;	
	}	

container
	{
	margin-bottom:0;
	}
.container
	{
	text-decoration:none;
	
	color:white;
	}
	
#jsp
	{
	height:26px;
	position:absolute;
	width:100%;
	}

<div class="menu" id="menu" >

	<ul><li><a href="index.php">Acceuil</a></li></ul> <ul><li><a href="histoire.php">Histoire</a></li></ul> <ul><li><a href="#">Organigrame </a><ul> <li><a href="#">CA </a></li>  </ul></li></ul>    <ul><li><a href="#">Photo DPS</a></li></ul>   <ul><li><a href="#">Demande DPS</a><ul> <li><a href="#">Formulaire</a></li>   </ul></li></ul>   <ul><li><a href="#">Circuit</a></li></ul>    <ul><li><a href="http://www.circuit-nogaro.com/en/">Nogaro</a></li></ul> <ul><li><a href="#">Acces membre</a></li></ul></font>

</div>

<div class="jsp" id="jsp">

</div>

<footer> 
		<div class="container" id="container">
			<a href="#" class="auto-style2"><span class="auto-style1">Contacter</span></a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://www.facebook.com/secouristes.aspec/" class="auto-style2"><span class="auto-style1">Facebook</span></a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" class="auto-style2" class="top"><span class="auto-style1">Haut de page</span></a>
		</div>
</footer>

EmmanuelBeziat

12 juin 2018 à 17:42:34

C'est bien ça que tu cherches à obtenir ? https://www.emmanuelbeziat.com/blog/un-site-qui-prend-toute-la-hauteur-disponible

-
Edité par EmmanuelBeziat 12 juin 2018 à 17:43:02

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

Loken32

13 juin 2018 à 10:37:20

Oui j'arrive à le faire mais avec la ligne de code position:relative; je n'avais plus accès à mon menu déroulant (quand je voulait passer mon curseur dessus il disparaissait)

EmmanuelBeziat

13 juin 2018 à 10:44:46

Quelle position relative ? Il n'est question de ça nulle part.

https://jsfiddle.net/s2ducyae/3/

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

Loken32

13 juin 2018 à 10:56:12

J'ai modifier mon code avec ce que tu m'a conseillé et effectivement il y a du mieux. Mais j'ai du faire quelque erreurs car mon header et décaler.

body, html{height:100%;}

body
	{

text-align:center;

	}	

.page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	max-width: 700px;
	margin: 0 auto;
}
.main {
	flex: 1;
	}
.header,
	/*bas de page*/
	
.footer {
	color: #fff;
	background: #222;
	text-align: center;
	padding: 1rem;
}
	
.main {
	padding: 1rem;
}	
	/*Menu*/
#menu ul 
	{
	line-height:50px;
	}
	
#menu li 
	{
	left:3.5%;
	right:97.5%;
	margin:0;
	list-style:none;
	float:left;
	position:relative;
	background-color:black;
	}
		
#menu ul li a
	{
	width:150px;
	height:48px;
	color:white;
	text-decoration:none;
.
.
.
.

<div class="page">
<header class="auto-style1">
	<img height="375" src="images/hautsite.png" width="1321" /></header>

<div class="menu" id="menu">

	<ul><li><a href="index.php">Acceuil</a></li></ul> <ul><li><a href="histoire.php">Histoire</a></li></ul> <ul><li><a href="#">Organigrame </a><ul> <li><a href="#">CA </a></li>  </ul></li></ul>    <ul><li><a href="#">Photo DPS</a></li></ul>   <ul><li><a href="#">Demande DPS</a><ul> <li><a href="#">Formulaire</a></li>   </ul></li></ul>   <ul><li><a href="#">Circuit</a></li></ul>    <ul><li><a href="http://www.circuit-nogaro.com/en/">Nogaro</a></li></ul> <ul><li><a href="#">Acces membre</a></li></ul></font>

</div>
<main class="main">
	Peut etre content
</main>

<footer class="footer">
		Footer
</footer>

</div>

-
Edité par Loken32 13 juin 2018 à 11:13:25