Bon alors je viens de commencer, je me suis aidé avec d'autre réponse sur d'autre forum. Et divers tuto sur internet.
Je cherche a obtenir quelque chose comme ça:
------------------------------------------------------------------------
| HEAD |. BACKGROUND
| ******* |. --------------------------
| infos. |. |. CONTENT. |
| ******* |. |. |
| Menu |. |. |
|. |. |. |
|. |. |. |
|. |. |. |
|. |. |. |
|. |. |. |
|*********|. --------------------------
| footer |
|___________|_________________________________
Problème numéro 1 :
En bas a gauche j'ai un espace vide, ma <div class=index> ne touche pas le bas de l'écran
Problème numéro 2:
Sur la résolution de 1920X1080 je n'ai pas de scroll mais sur une de 1600X900 j'ai un scroll qui se met et mon footer vas beaucoup trop bas il sort de la page.
Problème numéro 3:
Si je zoom tout par dans tous les sens
Code HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Site web </title>
</head>
<body>
<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>
</body>
</html>
Code CSS:
html{
height: 100%;
margin:0;
}
body{
height: 100%;
margin:0;
/* Debut Color background */
background-color: blue;
background-image: -webkit-gradient(
linear,
right bottom,
right top,
color-stop(0, rgb(45, 153, 247)),
color-stop(0.82, rgb(232, 244, 250))
);
background-image: -o-linear-gradient(top, rgb(45, 153, 247) 0%, rgb(232, 244, 250) 82%);
background-image: -moz-linear-gradient(top, rgb(45, 153, 247) 0%, rgb(232, 244, 250) 82%);
background-image: -webkit-linear-gradient(top, rgb(45, 153, 247) 0%, rgb(232, 244, 250) 82%);
background-image: linear-gradient(to top, rgb(45, 153, 247) 0%, rgb(232, 244, 250) 82%);
/*Fin Color background */
}
.corps
{
margin:0;
}
.index
{
width:12%;
height:100%;
max-height: 975px;
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.3em;
height: 10%;
}
.description
{
height:15%;
}
.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: 1.3em;
border:none;
padding:6px 0 6px 0;
border-radius:8px;
font: 20px 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:-15%;
}
a{
color:white;
text-decoration:none;
}
a:hover{
}
.pied{
text-align: center;
height: 10%;
}
Modifié par Felipe (16 Mar 2016 - 18:23)
Alors la c'est presque le rendu que je souhaite mais tu as vue le code CSS 
j'aimerai bien comprendre ce que je fait et pas faire un simple copier coller de quelque chose déjà existant. 