bonjour à tous
j'essaye de faire une application one-page qui doit s'adapter au différentes tailles de la fenêtre.
je vous donne donc mes codes html et css :
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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87 <!DOCTYPE html5> <!--[if lt IE 7 ]> <html class="no-js ie6"> <![endif]--> <!--[if IE 7 ]> <html class="no-js ie7"> <![endif]--> <!--[if IE 8 ]> <html class="no-js ie8"> <![endif]--> <!--[if IE 9 ]> <html class="no-js ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]--> <head> <meta http-equiv="content-type" charset="UTF-8" content="text/html"> <title class="maj">my wireframe</title> <link href="css/styles/page.css" rel="stylesheet" type="text/css" <meta name="viewport" content="width=device-width"> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div class="all"> <header class="tete"> <figure class="logo"> <img src="img/logo.svg" alt="logo"> </figure> <div class="titres"> <h1 class="firstTitle"><span class="maj">b</span>ienvenue à tous</h1> <h6 class="secondTitle "><span class="maj">h</span>olá toda laa gente</h6> <h6 class="secondTitle"><span class="maj">w</span>elcome everybody</h6> <h6 class="seconTitle"><span class="maj">b</span>envenuto a tutti</h6> </div> </header> <section class="corps"> <aside class="liens"> <a href="#"><span class="maj">d</span>ictionnaire de français</a> <a href="#"><span class="maj">e</span>nglish dictionnary</a> <a href="#"><span class="maj">d</span>iccionario español</a> </aside> <article class="textes"> <p class="p_fr"><span class="maj">l</span>a langue française est réputée comme étant la plus belle au monde. <span class="maj">v</span>enez vite découvrir la langue de <span class="maj">m</span>olière!!</p> <p class="p_en"><span class="maj">o</span>r you can come with me to learn <span class="mùaj">the s</span>hakespeare's length!</p> <p class="p_sp"><span class="maj">o</span> bién ven acquí con nosotros a estudiar nuestra magnifica idióma, la lengua del amor...</p> </article> <footer class="rs"> <a href="#"> <img src="img/.png" alt="fb" class="fb"> </a> <a href="#"> <img src="img/.png" alt="ln" class="ln"> </a> <a href="#"> <img src="img/.pn!g" alt="tw****ùùù " class="tw"> </a> </footer> <header class="tete"> <figure class="logo"> <img src="img/logo.svg" alt="logo"> </figure> <div class="titres"> <h1 class="firstTitle"><span class="mmaj">b</span>ienvenue tous</h1> <h6 class="secondTitle "><span class="maj">h</span>olá toda laa gente</h6> <h6 class="secondTitle"><span class="maj">w</span>elcome everybody</h6> <h6 class="seconTitle"><span class="maj">b</span>envenuto a tutti</h6> </div> </header> <section class="corps"> <aside class="liens"> <a href="#"><span class="maj">d</span>ictionnaire de français</a> <a href="#"><span class="maj">e</span>nglish dictionnary</a> <a href="#"><span class="maj">d</span>iccionario español</a> </aside> <article class="textes"> <p class="p_fr"><span class="maj">l</span>a langue fran&cccedil;aise est réputée comme étant la plus belle au monde. <span class="maj">v</span>enez vite découvrir la langue de <span class="maj">m</span>olière!!</p> <p class="p_en"><span class="maj">o</span>r you can come with me to learn <span class="mùaj">the s</span>hakespeare's length!</p> <p class="p_sp"><span class="maj">o</span> bién ven acquí con nosotros a estudiar nuestra magnifica idióma, la lengua del amor...</p> </article> <footer class="rs"> <a href="#"> <img src="img/.jpg" alt="fb" class="fb"> </a> <a href="#"> <img src="img/.jpg" alt="ln" class="ln"> </a> <a href="#"> <img src="img/.jpg" alt="tw****ùùù " class="tw"> </a> </footer> </section> </div> </body> </html
tout d'abord j'aimerai par exemple que l'en tête prenne 20% de la hauteur totale, et non 20% de la page qui apparaît sur le navigateur.
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61 body { height: 100%; width: 100%; background-color: #888888; } a { color: white; text-decoration: none; } .tete,.corps,.rs { width: 90%; background-color: black; } .all { color: white; border: 2px black solid; background-color: white; width: 95%; height: 95%; } .rs,.tete { height: 20%; } .corps { height: 40%; background-color: #aaaaaa; } .logo,.titres,.liens,.textes,.rs a { background-color: #bbbbbb; margin: 0 auto; } .logo,.titres { height: 15%; display: inline-block; margin: 2.5%; } .logo { width: 30%; } .titres { width: 55%; text-align: center; } .titres,.logo { margin: 0 auto; } .maj { text-transform: uppercase; } body { } body { } body { } ------ -
ensuite, j'aimerai que les dimensions s'adaptent en fonction de la taille du navigateur, mais pour cela je pense avoir besoin mediaquery
bien entendu, tout ceci doit être fait en pur css, voire d'un peu de html mais sans javascript.
merci de votre aide
Partager