Mettre menu en bas.

Bonjour,

J'ai un problème.

donc je possède une <div> avec un menu dedans j'aimerai que le menu se retrouve en bas de ma <div class=menu> et que les boutons soit centrés comment faire ?

<div class="index">
			<div class="titre">
				<h1> Titre </h1>
			</div>
			
			<div class="description">
				<p> Bienvenue</br>
					Veuillez vous connectez ou vous inscrire
				</p>	
			</div>
			
			<div class="menu">
				<ul>
					<li> <a href="index.php?argument=connexion"> Connexion </a> </li> 
					<br />
					<li> <a href="index.php?argument=inscription"> Inscription </a> </li>
				</ul>
			</div>
			
			<div class="pied">
				<p> Suivez nous sur les réseaux sociaux</p>
				<a href="http://www.facebook.com" >
					<img src="image/fb.png" alt="facebook" />
				</a> 
				<a href="http://www.twitter.com">
					<img src="image/twitter.png" alt="twitter" />
				</a>		
			</div>
                   

Code CSS:

html{
	height: 100%;
	margin:0;
}
body{
	height: 100%;
	margin:0;
.index
{
	position:fixed;
	width:12%;
	height:100%;
	max-height: 1080px;
	max-width: 200px;
	float: left;
	background-color: rgba(0,0,0,0.8);
	text-align: center;
	margin:0;
}
.titre
{
	text-align: center;
	font-size: 1.5em;
	height: 10%;
}
.description
{
	height:10%;	
	font-size: 1em;
}

.menu{

 	height: 55%;
 	margin: 0;
 }

.menu li{	
	width: 90%;
	height: 50%;
	list-style-type: none;
	border:solid rgba(0,0,0,0.5);
	font-weight:bold;
	text-align:center;
	font-size: 1em;

	border:none;
	padding:6px 0 6px 0;
	border-radius:8px;
	font: 1em Arial;
	color:white;

	background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0, #387AEB)
);
	background-image: -o-linear-gradient(bottom, #387AEB 0%);
	background-image: -moz-linear-gradient(bottom, #387AEB 0%);
	background-image: -webkit-linear-gradient(bottom, #387AEB 0%);
	background-image: -ms-linear-gradient(bottom, #387AEB 0%);
	background-image: linear-gradient(to bottom, #387AEB 0%);
}

.menu li:hover{
	background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0, #3C7BE8),
	color-stop(1, #6DA4ED)
);
	background-image: -o-linear-gradient(bottom, #3C7BE8 0%, #6DA4ED 100%);
	background-image: -moz-linear-gradient(bottom, #3C7BE8 0%, #6DA4ED 100%);
	background-image: -webkit-linear-gradient(bottom, #3C7BE8 0%, #6DA4ED 100%);
	background-image: -ms-linear-gradient(bottom, #3C7BE8 0%, #6DA4ED 100%);
	background-image: linear-gradient(to bottom, #3C7BE8 0%, #6DA4ED 100%);
}

.menu li:active{

}
.menu ul{
	margin-left:none;
	clear:both;
}

a{
	color:white;
	text-decoration:none;
}

a:hover{

}
.pied{
	position: absolute; 
	bottom: 1%; 
	left: 0; 
	right: 0;
	text-align: center;
}

Salut,

J'ai du mal à débuger ton code mais voici quelques pistes :
* il est inutile de spécifier des marges à 0 sur l'élément html ; par défaut aucun navigateur n'applique de marge à cet élément.
* j'ai vu aussi un élément dont la position est décrite à la fois comme étant fixe et flottante (à gauche) ; un peu contradictoire.
* Css signifie Cascade Style Sheet soit Feuilles de styles en cascade ; En cascade ! Vérifie tes héritages de propriété tu éviteras ainsi la redondance. Que du bénef. !
* la déclaration concernant le body n'est pas fermée (accolade)


Ensuite concernant ton problème de lien centré : à ce que je vois ils le sont.

Pour fixer le menu en bas, je t'invite à lire ce récent topic Bas de page qui est tout indiqué pour ton cas et pour lequel Olivier C. a apporté ce qui sera pour toi la meilleure option.
Modifié par Greg_Lumiere (16 Mar 2016 - 11:59)