Bonjour à tous,

Cela fait un bail que j'ai pas fait d'HTML/CSS et je crois que je suis un peu rouillé. J'aimerais produire un layout contenant une bannière contenant une image (responsive), un menu et un contenu centré à 70% de largeur. Enfin, voir l'image c'est plus claire.

Nom : Layout.jpg Affichages : 558 Taille : 36,4 Ko

Voici les requis :

  • L'image de l'en-tête (zone NOIR) s'ajustera en hauteur en fonction des dimension du viewport. Je supporterai 3 résolutions.
  • Si le viewport dépasse 1200 pixels en largeur alors l'image en background (zone NOIR) doit cesser d'agrandir.
  • Dépendemment de la hauteur de l'image, le contenu doit se situer plus haut par-dessus, de sorte qu'il soit toujours à la même position.


Jusqu'ici j'ai produit côté HTML :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div id="pageWrapper">
        <header id="header">
            <h1>EnCorps</h1>
        </header>
        <div id="main">
            <nav>Navigation</nav>
            <section id="mainBody">
                ...
            </section>
        </div>
        <footer id="footer">
            <p>Footer</p>
        </footer>
    </div>
</body>
</html>

Et le CSS :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
#pageWrapper{
	max-width: 1200px;
	margin: 0 auto;
}
#header{
	background: url('background.png');
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	height: 628px;
}
#main{
	width:70%;
	margin: 0 auto;
}
#mainBody{
	background-color: white;
	position: relative;
	margin: -290px auto;
	min-height: 300px;
	padding: 20px 10px;
	border-radius: 3px;
}
#footer{
	clear: both;
}
@media all and (max-width: 300px){
	#header {height: 150px;}
	#main{ margin: -90px auto;}
}
@media (min-width: 300px) and (max-width: 600px){
	#header {height: 300px;}
	#main {margin: -180px auto;}
}
@media all and (min-width: 600px){
	#header {height: 600px;}
	#main{margin: -360px auto;}
}
Je semble avoir oublié les notion de marge et position (relative/absolute). Avec le code actuel mon contenu se retrouve beaucoup trop bas, et mes menu se retrouve juste au-dessus de mon contenu au lieu d'être plus en haut.

Sinon, peut-être que je m'y prend mal ?
À la place, devrais :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
 <div id="pageWrapper" style="position :relative;">
   <nav style="position :relative;" margin-top :40px;">
        Menu
   </nav>
   <section style="position :relative;" margin-top :200px;">
        Contenu
   </section>
   <img src="background..." style="???">
</div>

Bref, je suis un peu à court d'idée
Merci