Problème zone blanche au niveau du pied de page

Le CSS modifié

/* REMARQUE

Essayez d'organiser votre CSS avec les choses dans l'ordre.
Mettez des titres pour les grandes parties.
Dans les différentes catégories mettez les choses dans l'ordre où on les trouve dans le HTML.

Vous vous y retrouverez plus facilement pour faire des modifications*/




@font-face { /* Définition d'une nouvelle police nommée OpenSans-Regular-webfont */
    font-family: 'OpenSans';
    src: url('OpenSans-Regular-webfont.eot');
    src: url('OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Regular-webfont.woff') format('woff'),
         url('OpenSans-Regular-webfont.ttf') format('truetype'),
         url('OpenSans-Regular-webfont.svg#OpenSans') format('svg');
}

@import url(http://fonts.googleapis.com/css?family=Anton);

/********************************
********** GENERALITES **********
********************************/

body
{
    background-color: white; 
    color: black;
	background-image:url(fond.jpg);
	background-position: center;
	background-repeat: no-repeat; /*je ne peux pas voir le fond en question vu que c'est un lien relatif,
	mais vous le mettez en centré sans répétition, donc quelqu'un qui a une petite résolution d'écran
	va avoir un ascenceur horizontal pour rien, et celui qui a un très grand écran va avoir une image ridicule
	entourée de blanc, il vous faut comme image de fond un motif qui peut se répéter ou juste laisser le blanc*/
	background-attachment: fixed; 
	padding: 0;
	margin: 0
}

.clear {
	clear: both; /* annulation des float pour remettre l'affiche classique */
}

h1 {
	text-align: center;
	font-size: 60px;
	font-family: impact;
	font-weight: normal;
	text-decoration: underline;
	position: relative;
	bottom: 40px;
}

h2 { /* l'ancien h1 de titre central */
	font-size: 60px;
	color: #ED1C24;
	font-family: impact;
	font-weight: normal; /* la famille avant l'épaisseur c'est mieux, mais c'est un détail */
	/*background: white; de ce que je vois c'est toute la div que vous voulez en blanc, donc je mets ça dans la div */
	/*width: 1029px; /* ne sera bien que sur vtre résolution d'écran, il faut penser à tout le monde et parler en % de plus ce n'est
	pas du titre que vous vouliez changer la taille mais de la div */
	/*height: 80px;	on a déjà un font-size pour régler la taille, c'est la taille de la div que vous vouliez changer je suppose */
	/*z-index: 3; inutile */
	/*position: relative; non, on arrête avec les position relative */
	/*bottom: 150px; inutile, il se place bien tout seul une fois qu'on enlève le relative */
	/*left: 300px; et les petites résolutions ? */
	/*padding-left: 16px; bidouillage pour votre résolution */
	text-align: center; /* on rajoute un centrage qui marchera partout */
	margin: 0; /* par défaut le navigateur met une marge au dessus et au dessous, que visiblement vous ne vouliez pas */
}

h3 { /* remplace l'ancien h1 pour les titres des rubriques */
	padding-left: 16px;
	font-family: Anton, "Comic sans MS";
	font-size: 40px;
	color: white;
	background: black;
	text-align: center;
}

/********************************
************* HEADER ************
********************************/

header p { /* signifie : tous les p contenus dans header */
	text-align: justify;
	font-size: 13px;
	font-style: italic;
	font-family: OpenSans;
	/*margin-left: 280px;
	margin-right: 280px;*/
	/* pensez que tout le monde n'a pas la même résolution d'écran, sur un téléphone portable on ne voit plus rien à remplacer par */
	width: 50%; /* c'est à peu près ce que ça donne pour moi*/
	margin: auto; /* permet de centrer */
	/*margin-bottom: 60px; /* bottom tout seul n'existe pas mais il n'y en a plus besoin puisqu'on a enlevé le position relative*/
}

/********************************
********** NAVIGATION ***********
********************************/

nav ul { /* permet de cibler tous les ul contenus dans un nav, il n'y en a qu'un mais ça évite l'id inutile */
	margin: 0 ;
	padding: 0 ;
	list-style: none ;
	text-align: center ;
	/* position: relative; non il ne faut pas tout mettre en position relative, sinon ça n'est beau que sur votre résolution d'écran */
	margin-bottom: 40px; /* n'oubliez pas le margin */
	margin-top: 10px; /* j'ai rajouté pour le décoller du dessus */
	padding-top: 6px;
	padding-bottom: 4px;
	/*margin-right: 160px;
	margin-left: 150px;*/
	/* non ça ne marchera pas avec toutes les résolutions d'écran, à remplacer par */
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	background: #DBDBDB;
	border: 1px black solid;
	border-radius: 5px;
	box-shadow: 1px 1px 4px black;
}

nav li { /* donc tous les li contenus dans un nav */
	display: inline;
	/*margin: 0; pas besoin de "px" quand on met 0, enlevé car inutile */
	/* margin-left: -10px; bidouillage qui marche surrement sur votre résolution d'écran mais chez moi ça les fait sortir du cadre du 
	menu, pensez que le site n'est pas pour vous mais pour tous les visiteurs */
	/*color: black ; inutile, tous les textes sont des liens et vous définissez la couleur des liens au dessous */
	background: #DBDBDB;
	border-left: 1px solid black; /* il vaut mieux mettre le contours sur le li que sur le a */
}

nav a { /* vous n'avez deviné, on cible là les a contenus dans nav */
	padding: 4px 10px;
	/*background: #DBDBDB; inutile de préciser le fond puisque c'est la même couleur que le fond déjà en place*/
	color: black;
	/*border: 1px solid black; chez vous ça doit probablement faire un trait entre les noms, sur ma résolution d'écran ça donne un truc
	assez moche, de plus il vaut mieux la mettre sur le li qui est le contenant du a */
	font: 1em "Trebuchet MS",Arial,sans-serif;
	line-height: 1em;
	text-align: center;
	text-decoration: none;
}

nav li:first-child { /* alors là on cible le premier des li contenu dans nav */
	border: none; /* et on lui enlève la bordure */
}

nav li a:hover, nav li a:focus, nav li a:active {
	background: #0088CB;
}

/********************************
************* VIDEO *************
********************************/

.video_principale
{
	background: black;
	/*padding-top: 10px;
	padding-bottom: 20px;
	padding-left: 20px;
	padding-right: 20px;
	à regroupe : */
	padding: 10px 20px 20px 20px;
	/*z-index:1; inutile */
}

object {
	max-width: 100%; /* pour ne pas que la vidéo dépasse en largeur, n'oubliez pas tout le monde n'a pas la même résolution d'écran
	que vous */
}

/********************************
******** TITRE CENTRAL **********
********************************/

#titre_central {
	background-color : white;
}

#titre_central p
{
	text-align: center;
	/*z-index: 4; inutile */
	/*position: relative; oubliez toutes ces position relative */
	/*bottom: 240px;
	right: 320px;
	on ne positionne pas à coup de marges qui ne marchent que sur votre écran */
}

#titre_central a
{
	font-size: 18px;
	font-family: OpenSans;
	color: #0088CB;
	/*text-decoration: underline; inutile de le dire, c'est le comportement par défaut*/

}

#titre_central a:hover
{
	color: #FE9104;
}

/********************************
******** DERNIERS FILMS *********
********************************/

.derniers {
	/*display: inline-block; c'est déjà le comportement par défaut */
	text-align: center;
	background: black;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 60px;
	padding-bottom: 30px;
	/*position: relative; noooooooonnnnnnn */
	/*bottom: 270px; inutile */
	/*z-index: 2; inutile */
}

.derniers aside
{
	display: inline-block;
	text-align: center;
	margin-left: 10px;
	margin-right: 10px;	
}

.derniers p
{
	text-transform: uppercase;
	font-family: OpenSans;
	font-weight: bold;
	font-size : 16px;
	color: red;
}

.derniers a
{
	background: #727272;
	color: white;
	text-decoration: none;
	border: 1px solid black;
	border-radius: 5px;
	padding: 3px;
}

.derniers a:hover
{
	background: #0088CB;
}

/********************************
********** RUBRIQUES ************
********************************/

.conteneur { /* plus besoin de 1 et 2, ils ont les mêmes propriétés */
	width: 80%; /* c'est le conteneur qui définit la largeur, les blocs vont juste se mettre dedans à leur place */
	margin: auto; /* permet de centrer le bloc */
}

/* le comportement de bloc1 et bloc3 doit être le même et celui de bloc2 et bloc4 aussi, donc on va faire seulement
2 class plus générales */

.bloc_gauche { /* remplace bloc1 et bloc3 */
	width: 40%; /* j'ai mis 40% pour garder l'idée comme vous aviez fait de "presque la moitié avec du blanc pour séparer" */
	float: left; /* positionne le bloc à gauche de son parent */
}

.bloc_droite { /* remplace bloc2 et bloc4 */
	width: 40%;
	float: right; /* positionne le bloc à droite de son parent */
}

.conteneur p {
	text-align: justify;
	font-size: 16px;
	font-family: OpenSans;
}

/********************************
************ FOOTER *************
********************************/

footer {
	background: black;
	width: 100%;
	margin: 0;
	padding:0;
}

.boutons a {
	color: white;
	text-decoration: none;
	padding-left: 30px;
}

.copyright {
	color: white;
	padding-left: 30px;
	/* position: relative; non pas de position relative */
	margin-top: 20px;
}

strong { /* c'est le seul endroit où vous avez du strong donc inutile de préciser que c'est dans le copyright */
	color: red;
	font-weight: bold;
}

#partenaires { /* vous en aviez deux j'ai regroupé en un */
	/*display: inline-block; inutile */
	list-style-type: none;
	/*position: relative; non */
	/*bottom: 110px; non puisque plus de position relative */
	/*left: 1300px; non puisque plus de position relative et en plus sur un petit écran c'était caché loin à droite */
}

#partenaires li
{
	display: inline-block;
}

Tout d'abord, un grand merci ! Franchement, j'apprécie ce que tu/vous as/avez fait, reprendre tout mon code et commenter toutes les lignes ou presque, c'est un travail . long et fastidieux mais vous/tu l'avez fait ! Et pour cela je vous dis un grand MERCI !!!

Malheureusement je n'obtiens pas quelque chose de vraiment lisible (après avoir remplacé les bloc1/2/3/4 et les h1 de mon code html)

Pour mieux expliquer ce que j'obtiens, je joins une capture de ce que je vois :

http://www.noelshack.com/2014-33-1408118048-version2.png


Egalement pour mieux illustrer le résulat que je souhaite obtenir, j'ai fait une capture de ce que j'obtenais sur mon écran avec la première version du .css :

http://www.noelshack.com/2014-33-1408118056-version1.png


Les z-index servait en fait à passer les éléments les uns en dessosu des autres pour créer un petit effet.


Afin d'avoir le fond en image sur tout l'écran j'utilisais "background-size: cover;" Je ne sais pas si elle marche pour toutes les résolutions...

Merci encore pour m'avoir mis en tête de suivre cette idée qu'il faut penser à toutes les résolutions car je dois avouer que je ne m'en étais pas préoccuper.

Si "position: relative" n'est pas valable pour toutes les résolutions, qu'en est-il de "position: absolute" ?

Une fois encore merci pour tout le temps que vous me consacrez !

Bah zut alors, la balise image sur ccm met des images minuscules, je teste en mettant le lien d'un autre hébergeur et mon message est automatiquement supprimé.

Je tente : http://www.noelshack.com/2014-33-1408123474-screen.png

Ah oui du coup j'ai oublié, si tu veux je regarde de nouveau, mais pas maintenant, dans la nuit.

Tu as besoin de l'image de fond?

Et sinon, "background-size: cover" c'est valide pour toutes les résolutions ?

Je veux bien un peu d'aide pour remettre de l'ordre dans la page oui parce que là, sans positionnement je ne sais plus trop comment déplacer mes blocs ^^

En effet, avec ta résolution ça ne marche pas top ! Je veillerais à toujours prendre en compte cette histoire de résolutions à l'avenir :)

Oui background-size: cover marche avec toutes les résolutions, mais ça ne gère que la taille de l'image de fond, pas le reste.

Je vais faire avec un fond que j'ai dans le même genre de couleurs, tu n'auras plus qu'à mettre ton image à la place.

Je te fais encore tous les commentaires pour que tu comprennes ce que je fais et que tu sois capable de modifier et de réutiliser. Je m'y met maintenant, quand c'est bon je te reposte les codes avec les commentaires.

Et le CSS

/* REMARQUE

Essayez d'organiser votre CSS avec les choses dans l'ordre.
Mettez des titres pour les grandes parties.
Dans les différentes catégories mettez les choses dans l'ordre où on les trouve dans le HTML.

Vous vous y retrouverez plus facilement pour faire des modifications

En effet du fait du superpositionnement que vous souhaitez le plus simple est de jouer avec les position relative
mais sans spécifier de hauteurs en px sauf nécessaires (pour le décalage et parce que la vidéo a une hateur fixe) et uniquement
à partir du bloc de la vidéo.
D'autres solutions plus "belles" existent mais il faudrait vraiment changer toute la structure que vous avez fait.*/




@font-face { /* Définition d'une nouvelle police nommée OpenSans-Regular-webfont */
    font-family: 'OpenSans';
    src: url('OpenSans-Regular-webfont.eot');
    src: url('OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Regular-webfont.woff') format('woff'),
         url('OpenSans-Regular-webfont.ttf') format('truetype'),
         url('OpenSans-Regular-webfont.svg#OpenSans') format('svg');
}

@import url(http://fonts.googleapis.com/css?family=Anton);

/********************************
********** GENERALITES **********
********************************/

body
{
    background-color: white; 
    color: black;
	background-image:url(background.png); /* à modifier c'est le fond que j'ai mis pour les tests */
	background-repeat: repeat; /* enlevez cette ligne et remettez les suivants, moi j'ai mis un fond petit qui se répette */
	/*background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed; */
	padding: 0;
	margin: 0
}

.clear {
	clear: both; /* annulation des float pour remettre l'affiche classique */
}

h1 {
	text-align: center;
	font-size: 60px;
	font-family: impact;
	font-weight: normal;
	text-decoration: underline;
	position: relative;
	bottom: 40px;
}

h2 { /* l'ancien h1 de titre central */
	font-size: 60px;
	color: #ED1C24;
	font-family: impact;
	font-weight: normal; /* la famille avant l'épaisseur c'est mieux, mais c'est un détail */
	/*background: white; de ce que je vois c'est toute la div que vous voulez en blanc, donc je mets ça dans la div */
	/*width: 1029px; /* ne sera bien que sur vtre résolution d'écran, il faut penser à tout le monde et parler en % de plus ce n'est
	pas du titre que vous vouliez changer la taille mais de la div */
	/*height: 80px;	on a déjà un font-size pour régler la taille, c'est la taille de la div que vous vouliez changer je suppose */
	/*z-index: 3; inutile */
	/*position: relative; non, on arrête avec les position relative */
	/*bottom: 150px; inutile, il se place bien tout seul une fois qu'on enlève le relative */
	/*left: 300px; et les petites résolutions ? */
	/*padding-left: 16px; bidouillage pour votre résolution */
	margin: 10px; /* par défaut le navigateur met une marge énorme */
	margin-bottom: 0; /* pas de marge en dessous */
	float: left; /* pour que ce soit à gauche de cette partie */
}

h3 { /* remplace l'ancien h1 pour les titres des rubriques */
	padding-left: 16px;
	font-family: Anton, "Comic sans MS";
	font-size: 40px;
	color: white;
	background: black;
	text-align: center;
}

/********************************
************* HEADER ************
********************************/

header {
	width: 80%; /* toujours en pourcentage */
	margin: auto; /* pour le centrer */
}

header p { /* signifie : tous les p contenus dans header */
	text-align: justify;
	font-size: 13px;
	font-style: italic;
	font-family: OpenSans;
	/*margin-left: 280px;
	margin-right: 280px;*/
	/* pensez que tout le monde n'a pas la même résolution d'écran, sur un téléphone portable on ne voit plus rien à remplacer par */
	margin: auto; /* permet de centrer */
	/*margin-bottom: 60px; /* bottom tout seul n'existe pas mais il n'y en a plus besoin puisqu'on a enlevé le position relative*/
	margin-bottom: 10px; /* pour séparer les paragraphes */
}

/********************************
********** NAVIGATION ***********
********************************/

nav ul { /* permet de cibler tous les ul contenus dans un nav, il n'y en a qu'un mais ça évite l'id inutile */
	margin: 0 ;
	padding: 0 ;
	list-style: none ;
	text-align: center ;
	/* position: relative; non il ne faut pas tout mettre en position relative, sinon ça n'est beau que sur votre résolution d'écran */
	margin-bottom: 40px; /* n'oubliez pas le margin */
	margin-top: 10px; /* j'ai rajouté pour le décoller du dessus */
	padding-top: 6px;
	padding-bottom: 4px;
	/*margin-right: 160px;
	margin-left: 150px;*/
	margin-left: auto;
	margin-right: auto;
	background: #DBDBDB;
	border: 1px black solid;
	border-radius: 5px;
	box-shadow: 1px 1px 4px black;
}

nav li { /* donc tous les li contenus dans un nav */
	display: inline;
	/*margin: 0; pas besoin de "px" quand on met 0, enlevé car inutile */
	/* margin-left: -10px; bidouillage qui marche surrement sur votre résolution d'écran mais chez moi ça les fait sortir du cadre du 
	menu, pensez que le site n'est pas pour vous mais pour tous les visiteurs */
	/*color: black ; inutile, tous les textes sont des liens et vous définissez la couleur des liens au dessous */
	background: #DBDBDB;
	border-left: 1px solid black; /* il vaut mieux mettre le contours sur le li que sur le a */
}

nav a { /* vous n'avez deviné, on cible là les a contenus dans nav */
	padding: 4px 10px;
	/*background: #DBDBDB; inutile de préciser le fond puisque c'est la même couleur que le fond déjà en place*/
	color: black;
	/*border: 1px solid black; chez vous ça doit probablement faire un trait entre les noms, sur ma résolution d'écran ça donne un truc
	assez moche, de plus il vaut mieux la mettre sur le li qui est le contenant du a */
	font: 1em "Trebuchet MS",Arial,sans-serif;
	line-height: 1em;
	text-align: center;
	text-decoration: none;
}

nav li:first-child { /* alors là on cible le premier des li contenu dans nav */
	border: none; /* et on lui enlève la bordure */
}

nav li a:hover, nav li a:focus, nav li a:active {
	background: #0088CB;
}

/********************************
************* VIDEO *************
********************************/

.video_principale
{
	background: black;
	position: absolute; /* position absolue par rapport au conteneur relative */
	z-index: 1; /* en effet utile pour le mettre en dessous */
	/*padding-top: 10px;
	padding-bottom: 20px;
	padding-left: 20px;
	padding-right: 20px;
	à regroupe : */
	padding: 10px 20px 20px 20px;
	/*z-index:1; inutile */
}

object {
	max-width: 100%; /* pour ne pas que la vidéo dépasse en largeur, n'oubliez pas tout le monde n'a pas la même résolution d'écran
	que vous */

}

/********************************
******** TITRE CENTRAL **********
********************************/

#titre_central {
	background-color : white;
	margin: auto; /* pour centrer */
	position: relative; /* pour le positionnement */
	z-index: 3; /* pour le passer au dessus */
	width: 70%;
	margin-top: 455px; /* la vidéo fait 510px de hauteur quel que soit l'écran donc on peut décaler en hauteur en px */
}

#titre_central p
{
	float: right; /* pour le "coller" à droite de la partie */
	padding-right: 10px; /* pour que ça ne colle pas trop quand même */
	margin-top: -18px; /* alors ça c'est de la "triche" d'ailleurs on évite les marges négatives en général, comme la div est en
	dessous du titre le texte est en dessous aussi, le texte étant de 18px je remonte de 18 px pour que ça se retrouve juste en bas du
	grand titre rouge on ne le remonte pas plus sinon en petite résolution ça se superpose*/
	/*z-index: 4; inutile */
	/*position: relative; oubliez toutes ces position relative */
	/*bottom: 240px;
	right: 320px;
	on ne positionne pas à coup de marges qui ne marchent que sur votre écran */
}

#titre_central a
{
	font-size: 18px;
	font-family: OpenSans;
	color: #0088CB;
	/*text-decoration: underline; inutile de le dire, c'est le comportement par défaut*/

}

#titre_central a:hover
{
	color: #FE9104;
}

/********************************
******** DERNIERS FILMS *********
********************************/

.derniers {
	/*display: inline-block; c'est déjà le comportement par défaut */
	text-align: center;
	background: black;
	padding-top: 60px;
	padding-bottom: 30px;
	margin-top: -40px; /* pour le remonter derrière le titre */
	position: relative; /* pour superposer */
	z-index: 2; /* en effet utile pour superposer */
	width: 80%;
	left: 8%; /* explication du centrage plus haut ajusté à 8 au lieu de 10, je ne saurais pas expliquer pourquoi */
	/*position: relative; noooooooonnnnnnn */
	/*bottom: 270px; inutile */
	/*z-index: 2; inutile */
}

.derniers aside
{
	display: inline-block;
	text-align: center;
	margin-left: 10px;
	margin-right: 10px;	
}

.derniers p
{
	text-transform: uppercase;
	font-family: OpenSans;
	font-weight: bold;
	font-size : 16px;
	color: red;
}

.derniers a
{
	background: #727272;
	color: white;
	text-decoration: none;
	border: 1px solid black;
	border-radius: 5px;
	padding: 3px;
}

.derniers a:hover
{
	background: #0088CB;
}

/********************************
********** RUBRIQUES ************
********************************/

.conteneur { /* plus besoin de 1 et 2, ils ont les mêmes propriétés */
	position: relative;
	width: 80%; /* c'est le conteneur qui définit la largeur, les blocs vont juste se mettre dedans à leur place */
	left: 8%; /* pour être aligné sur la div du dessus on met les mêmes valeurs */
}

/* le comportement de bloc1 et bloc3 doit être le même et celui de bloc2 et bloc4 aussi, donc on va faire seulement
2 class plus générales */

.bloc_gauche { /* remplace bloc1 et bloc3 */
	width: 48%; /* j'ai mis 48% pour garder l'idée comme vous aviez fait de "presque la moitié avec du blanc pour séparer" */
	float: left; /* positionne le bloc à gauche de son parent */
}

.bloc_droite { /* remplace bloc2 et bloc4 */
	width: 48%;
	float: right; /* positionne le bloc à droite de son parent */
}

.conteneur p {
	text-align: justify;
	font-size: 16px;
	font-family: OpenSans;
}

/********************************
************ FOOTER *************
********************************/

footer {
	background: black;
	width: 100%;
	margin: 0;
	padding:0;
}

.footer-left {
	float: left;
	padding-left: 30px; /* on met le padding là, inutile de le répéter pour chaque élément de gauche */
}

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

.copyright {
	color: white;
	/* position: relative; non pas de position relative */
	margin-top: 20px;
}

strong { /* c'est le seul endroit où vous avez du strong donc inutile de préciser que c'est dans le copyright */
	color: red;
	font-weight: bold;
}

.footer-right {
	float: right;
	padding-right: 30px; /* même padding à droite qu'à gauche */
}

#partenaires { /* vous en aviez deux j'ai regroupé en un */
	/*display: inline-block; inutile */
	list-style-type: none;
	/*position: relative; non */
	/*bottom: 110px; non puisque plus de position relative */
	/*left: 1300px; non puisque plus de position relative et en plus sur un petit écran c'était caché loin à droite */
}

#partenaires li
{
	display: inline-block;
}

Je me suis penché dessus, revu le html, changé le nom des classes fait des tests mais même si je note une nette amélioration, je n'obtiens pas encore un résultat bien lisible.

je poste le css avec des anotations et questions :

/**********************************
************ POLICES **************
**********************************/

@font-face { /* Définition d'une nouvelle police nommée OpenSans-Regular-webfont */
    font-family: 'OpenSans';
    src: url('OpenSans-Regular-webfont.eot');
    src: url('OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Regular-webfont.woff') format('woff'),
         url('OpenSans-Regular-webfont.ttf') format('truetype'),
         url('OpenSans-Regular-webfont.svg#OpenSans') format('svg');
}

@import url(http://fonts.googleapis.com/css?family=Anton);

/********************************
********** GENERALITES **********
********************************/

body
{
    background-color: white; 
    color: black;
	background-image:url(fond.jpg); 
	background-repeat: no-repeat; 
	background-position: center;
	background-attachment: fixed;
	background-size: cover; /*je crois que ceci permet d'avoir l'image de fond sur la totalité de l'écran*/
	padding: 0;
	margin: 0
}

.clear {
	clear: both; /* je n'ai pas compris l'utilité de cette ligne */
}

h1 {
	text-align: center;
	font-size: 60px;
	font-family: impact;
	font-weight: normal;
	text-decoration: underline;
	position: relative;
	bottom: 40px;
}

h2 { 
	font-size: 60px;
	color: #ED1C24;
	font-family: impact;
	font-weight: normal; 
	margin: 10px; 
	margin-bottom: 0;
	float: left;
}

h3 { /* remplace l'ancien h1 pour les titres des rubriques */
	padding-left: 16px;
	font-family: Anton, "Comic sans MS";
	font-size: 40px;
	color: white;
	background: black;
	text-align: center;
}

/********************************
************* HEADER ************
********************************/

header {
	width: 80%; 
	margin: auto;
}

header p {
	text-align: justify;
	font-size: 13px;
	font-style: italic;
	font-family: OpenSans;
	margin: auto;
	margin-bottom: 10px;
}

/********************************
********** NAVIGATION ***********
********************************/

nav ul {
	margin: 0 ;
	padding: 0 ;
	list-style: none ;
	text-align: center ;
	margin-bottom: 40px;
	margin-top: 10px;
	padding-top: 6px;
	padding-bottom: 4px;
	margin-left: auto;
	margin-right: auto;
	background: #DBDBDB;
	border: 1px black solid;
	border-radius: 5px;
	box-shadow: 1px 1px 4px black;
	width: 100%;
}

nav li {
	display: inline;
	background: #DBDBDB;
	border-left: 1px solid black;
}

nav a { /* vous n'avez deviné, on cible là les a contenus dans nav */
	padding: 4px 8px; /*J'ai diminué le padding-tight à 8 px et cela me permet d'avoir le menu sur une seule ligne en zoom 100%*/
	color: black;
	font: 1em "Trebuchet MS",Arial,sans-serif;
	line-height: 1em;
	text-align: center;
	text-decoration: none;
}

nav li:first-child { /* alors là on cible le premier des li contenu dans nav */
	border: none;
}

nav li a:hover, nav li a:focus, nav li a:active {
	background: #0088CB;
}

/********************************
************* VIDEO *************
********************************/

.video_principale
{
	background: black;  /*je ne vois pas de background sur mon écran...*/
	position: absolute; /* position absolue par rapport au conteneur relative */
	z-index: 1;
	padding: 10px 20px 20px 20px;
}

object {
	max-width: 100%; 
	background: black; /*j'ai ajouté cette ligne, le fond n'apparaît que le temps que la vidéo se charge*/
}

/********************************
******** TITRE CENTRAL **********
********************************/

#titre_central {
	background : white; /* je ne vois pas le fond blanc*/
	margin: auto
	position: relative; /* pour le positionnement */
	z-index: 3;
	width: 70%;
	margin-top: 100px; /* j'ai diminué la valeur de 455 à 100 afin de rapprocher le titre de la vidéo car sur mon écran ils étaient très éloigné (je n'ai cependant toujours 
	pas de superpositionnement)*/
}

#titre_central p
{
	float: right; /* pour le "coller" à droite de la partie */
	padding-right: 10px; /* pour que ça ne colle pas trop quand même */
	margin-top: -18px; /* alors ça c'est de la "triche" d'ailleurs on évite les marges négatives en général, comme la div est en
	dessous du titre le texte est en dessous aussi, le texte étant de 18px je remonte de 18 px pour que ça se retrouve juste en bas du
	grand titre rouge on ne le remonte pas plus sinon en petite résolution ça se superpose*/
}

#titre_central a
{
	font-size: 18px;
	font-family: OpenSans;
	color: #0088CB;
}

#titre_central a:hover
{
	color: #FE9104;
}

/********************************
******** DERNIERS FILMS *********
********************************/

.derniers {
	text-align: center;
	background: black;
	padding-top: 60px;
	padding-bottom: 30px;
	margin-top: -40px; /* pour le remonter derrière le titre */
	position: relative; /* pour superposer */
	z-index: 2; /* en effet utile pour superposer */
	width: 80%; /* sur mon écran je vois une affiche juste à côté du titre*/
	/*left: 8%; sur mon écran, cette ligne ne centre pas le bloc mais le décale sur la droite */
	z-index: 2; /*j'ajoute cette ligne car dans mon idée, ce bloc est par dessus la vidéo (un tout petit peu mais un peu quand même). Ensuite, on trouve le #titre_central qui 
	est au-dessus de ce bloc et au-dessus de la vidéo*/
}

.derniers aside
{
	display: inline-block;
	text-align: center;
	margin-left: 10px;
	margin-right: 10px;	
}

.derniers p
{
	text-transform: uppercase;
	font-family: OpenSans;
	font-weight: bold;
	font-size : 16px;
	color: red;
}

.derniers a
{
	background: #727272;
	color: white;
	text-decoration: none;
	border: 1px solid black;
	border-radius: 5px;
	padding: 3px;
}

.derniers a:hover
{
	background: #0088CB;
}

/********************************
********** RUBRIQUES ************
********************************/

.conteneur {
	position: relative;
	width: 80%; /* c'est le conteneur qui définit la largeur, les blocs vont juste se mettre dedans à leur place */
	left: 8%; /* pour être aligné sur la div du dessus on met les mêmes valeurs NB: sur mon écran, cette ligne permet de centrer l'objet mais je ne reprend pas les valeurs du dessus
	puisque je l'ai enlevé (cela ne me permettai pas de centrer le bloc)*/
}


.bloc_gauche {
	width: 48%; /* j'ai mis 48% pour garder l'idée comme vous aviez fait de "presque la moitié avec du blanc pour séparer" */
	float: left; /* positionne le bloc à gauche de son parent NB je me demande qui est le bloc parent*/
}

.bloc_droite {
	width: 48%;
	float: right; /* positionne le bloc à droite de son parent  NB: idem*/
}

.conteneur p {
	text-align: justify;
	font-size: 16px;
	font-family: OpenSans;
}

/********************************
************ FOOTER *************
********************************/

footer {
	background: black;
	width: 100%;
	margin: 0;
	padding:0;
}

.footer-left {
	float: left;
	padding-left: 30px; /*cette class englobe .copyright et .boutons, c'est bien ça?*/
}

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

.copyright {
	color: white;
	margin-top: 20px;
}

strong {
	color: red;
	font-weight: bold;
}

.footer-right {
	float: right;
	padding-right: 30px; /*cette class englobe juste #partenaires ?*/
}

#partenaires {
	list-style-type: none;
}

#partenaires li
{
	display: inline-block;
}

Voici ce que je vois sur mon écran :

http://www.noelshack.com/2014-33-1408186921-sans-titre.png


Et encore une fois, merci pour tout le temps que tu me consacre, sincèrement !

Oulà, mais sans rien changer tu as testé ?

http://ysabel.fr/test/ là tu le vois comment ?


ligne 33 :
.clear {
clear: both; /* je n'ai pas compris l'utilité de cette ligne */
}

C'est pour annuler le positionnement par float pour les éléments suivants.

ligne 113 :
padding: 4px 8px; /*J'ai diminué le padding-tight à 8 px et cela me permet d'avoir le menu sur une seule ligne en zoom 100%*/

Jouer sur le padding ne produira le résultat attendu que sur votre résolution d'écran, sur un téléphone portable le menu actuel ne peut pas tenir sur une ligne.

ligne 135 :
background: black; /*je ne vois pas de background sur mon écran...*/

Etrange. Et sur le lien que je vous ai mis vous le voyez ? On est bien d'accord que c'est le "contours" noir autours de la vidéo ?

ligne 143 :
background: black; /*j'ai ajouté cette ligne, le fond n'apparaît que le temps que la vidéo se charge*/

Normal, "object" c'est la vidéo elle même.

ligne 151 :
background : white; /* je ne vois pas le fond blanc*/

Bizarre aussi, et sur le lien que je vous ai donné ?

ligne 156 :
margin-top: 100px; /* j'ai diminué la valeur de 455 à 100 afin de rapprocher le titre de la vidéo car sur mon écran ils étaient très éloigné (je n'ai cependant toujours
pas de superpositionnement)*/

c'est pourtant bien superposé normalement

ligne 192 :
z-index: 2; /* en effet utile pour superposer */
width: 80%; /* sur mon écran je vois une affiche juste à côté du titre*/
/*left: 8%; sur mon écran, cette ligne ne centre pas le bloc mais le décale sur la droite */
z-index: 2; /*j'ajoute cette ligne car dans mon idée, ce bloc est par dessus la vidéo (un tout petit peu mais un peu quand même). Ensuite, on trouve le #titre_central qui
est au-dessus de ce bloc et au-dessus de la vidéo*/

Votre affichage est très étrange.
le z-index je suis d'accord, la preuve je l'a déjà mis juste au dessus ;)

Sinon je n'ai pas pu tester sur Internet Explorer qui plante sur mon ordi, mais sur chrome et firefox c'est nikel et le dernier IE est quand même respectueux des standards donc ne devrait pas poser soucis.

L'image que j'ai mis est le résultat que j'obtenais sans faire de changement. C'était loin de ce que j'ai pu voir au lien que vous m'avez transmis, c'est presque parfait, si ce n'est que la vidéo ne m'apparaît pas centrée (elle est complètement décalée sur la gauche).

J'ai repris le html de la page http://ysabel.fr/test/ et je peux enfin voir les fond derrière la vidéo et derrière .titre_central. Je n'ai donc plus que le "problème" de la vidéo qui n'est pas centrée. En ajoutant la ligne" left: 7%;", je parviens à centrer la vidéo mais je ne sais pas si c'est valable sur toutes les résolutions.

Je n'avais pas mis la class .clear dans mon code car je ne savais pas où la mettre, ce devait être de là que venais mon soucis :)


Vous m'aviez parlé d'autres façon d'afficher le menu, pourriez-vous m'en dire un peu plus ?

Merci d'avoir testé sur d'autres navigateurs, c'est vrai qu'il faut aussi penser à ça ! (dis-donc, je vais passer pour un véritable égoïste qui ne se préoccupe que de son navigateur et de sa résolution :p )

Autre petite question comment diminuer l'écart entre le titre du site et la description ?

Merci d'avance.

Re-bonjour,

C'est bizarre parce que le lien que j'ai mis c'est exactement le code que t'ai envoyé, j'avais modifié le CSS mais aussi le HTML c'est pour ça surement que tu n'avais pas un affichage correct.

Et ce n'est pas être égoïste de ne voir que sa résolution et son navigateur, c'est une erreur qu'on a tous fait au début, on code en testant sur notre ordinateur avec donc notre résolution et notre navigateur ... et puis un jour on voit le résultat sur un autre ordinateur et là on se rend compte qu'on a du louper quelque chose.