Divs décalage.

Bonjour à tous et toutes !

Je cherche à me créer un petit site sur lequel je fais surtout des essais en essayant d'en apprendre un peu plus sur le html et le css.

www.wendigo.fr

Voila j'aimerais avoir une animation avec des nuages qui passent mais mes divs se mettent les une sous les autres et non pas toutes les une sur les autres.

quelqu'un à une idée du problème ?
voila le css sinon sur le site avec examiner vous aurez accès à tous !

J'ai posté tout d'abords dans la section pour les débutants mais je pense que ce sujet à plus sa place ici donc je met les réponses que j'ai eu à la suite du code.

Merci !

background: transparent;
 border: 0;
 margin: 0;
 padding: 0;
 vertical-align: baseline;
}
body {
    background-color: #000;
 line-height: 1;
}
h1, h2, h3, h4, h5, h6 {
 clear: both;
 font-weight: normal;
}
ol, ul {
 list-style: none;
}


/* d?but css */

ul li a {
width:100px;
float:left;
display: block;
color:#245b82;
color:black;
text-decoration:none;
text-align:center;
padding:5px;
}


ul li a:hover {
color:#ffe400;
}

#site {
    background: url(images/Fond.png)  no-repeat center;
    z-index: 400;
    position: relative;
    height: 1080px;
    width: 100%;   
}





#f1 {
    background: url(images/f1.png) repeat 5% 5%;
    position: relative;
    z-index: 100;
    height:1080px;
    top: 0; bottom: 0;
    margin-left: auto;
    margin-right: auto;
}

#f2 {
    background: url(images/f2.png) repeat 20% 20%;
    position: relative;
    z-index: 300;
      height:1080px;
    top: 0; bottom: 0;
    margin-left: auto;
    margin-right: auto;
}

#f3 {
    background: url(images/f3.png) repeat 90% 110%;
    position: relative;
    z-index: 200;
      height:1080px;
    top: 0; bottom: 0;
    margin-left: auto;
    margin-right: auto;
}

Olivier C
# 02 Dec 2015, 17:59:51
Bonjour,

Pas mal la démo, j'ai bien l'idée...

Les div #f1, #f2 et #f3 sont en position relative. Essayez en absolute, vous allez voir, ça va tout changer.

Il y aurait d'autres points à voir, comme prendre toute la hauteur d'une page par exemple. Mais ça... ce sera peut-être pour une prochaine question.


Alors lorsque je passe en absolue ce que j'avais testé, plus rien n'est animé !
(je fais des tests avec l'outil examiner sur firefox).

"Il y aurait d'autres points à voir, comme prendre toute la hauteur d'une page par exemple. Mais ça... ce sera peut-être pour une prochaine question. "

cela m'interresse Smiley lol idem pour la largeur !
merci encore pour ta réponse.
Modifié par yoga (03 Dec 2015 - 15:45)