Bonjour,

Je suis en train de pondre un site sur l'apprentissage du solfège.
Etant débutant, j'ai quelques problème de mise en page avec le HTML5/CSS3.

1) Il y a des marges blanches à gauche et à droite de 6 ou 7px;
2) Dans la section, j'ai mis width=75% pour l'article et 25% pour l'aside pourtant ils se chevauchent;
3) Je ne trouve pas le moyen de faire coïncider le haut du footer avec le bas de la section.

Merci d'avance pour réponses, voici le code CSS sans les images et polices:

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<link rel="stylesheet" href="style.css" />
		<title>Solfège - Académie</title>
	</head>
	<body>
		<div id="bloc_page">
			<header>
				<h1>Solfège Académie</h1>
				<nav>
					<ul>
						<li><a href="#">Accueil</a></li>
						<li><a href="#">Les cours</a></li>
						<li><a href="#">Lexique</a></li>
						<li><a href="#">Forum</a></li>
					</ul>
				</nav>
			</header>
			<section>
				<article>
					<h1>Les cours de solfège comme à l'académie</h1>
					<p>Bonjour,<br/><br/>
					Bienvenue sur le site "Solfège Académie". Je vous propose d'apprendre le solfège pas à pas comme vous le feriez
					à l'académie.<br/> Cette formation musicale se déroule en quatre années. Chaque année comporte 30 leçons, 
					soit un total de 120 leçons!<br/>
					Je vous propose également une évaluation toutes les dix leçons.
					</p>
					<p id="photo_Clarinette"><img src="Images/Clarinette.jpg" alt="Photo de Clarinette" />
					<h2>Que contiennent les leçons</h2>
					<p>Chaque leçon comprend un point théorie suivi d'exercices variés allant de la lecture à la dictée, 
					tant rythmique que mélodique. Parfois, la leçon commence par une chanson que je vous invite à apprendre.
					Il est nécéssaire d'avoir des haut-parleurs ou un casque car 
					les leçons sont parsemées de sons et parfois de vidéos.<br/>
					Les leçons sont conçues de façon à nécéssiter un travail d'une heure et demie environ.
					</p>					
					<p id="photo_Accordéon"><img src="Images/Accordéon.jpg" alt="Photo d'accordéon" />
					<h2>A qui s'adressent ces cours?</h2>
					<p>Ces cours s'adressent à toute personne désireuse d'apprendre à jouer de la musique
					quelque soit l'instrument choisi y compris la voix.
					</p>
					<p>Ils s'adressent tout particulièrement à ceux qui habitent loin d'une académie 
					ou qui ne peuvent s'astreindre à un horaire déterminé.
					</p>
				</article>
				<aside>
					<h1>À propos de l'auteur</h1>
					<p id="photo_Dominique_HANIKENNE"><img src="Images/Moi.jpg" alt="Photo de l'auteur" /></p> 
					<p>Je m'appelle Dominique HANIKENNE, je suis né le 28 juillet 1966.
					J'habite à Liège en Belgique. Je suis ingénieur civil des constructions.
					Passionné par la musique depuis plus de vingt ans, j'ai commencé par l'accordéon.
					Actuellement, j'apprends à jouer de la clarinette.
					</p>
				</aside>
			</section>
			<footer>
				<h1>Liens</h1>
				<nav>
					<ul>
						<li><a href="http://www.myriad-online.com/fr/">Logiciels Myriad</a></li>
						<li><a href="http://www.tasset.com/">Maison Tasset</a></li>
						<li><a href="http://www.apprendrelesolfege.com/">ApprendreLeSolfege</a></li>
					</ul>
				</nav>
			</footer>
		</div>
	</body>
</html>
Code css : 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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
@font-face {
    font-family: 'alex_brushregular';
    src: url('Polices/alexbrush-regular-webfont.woff2') format('woff2'),
         url('Polices/alexbrush-regular-webfont.woff') format('woff');
		 url('Polices/alexbrush-regular.ttf') format('true type');
    font-weight: normal;
    font-style: normal;
	}
	/*---------*/
	/* En-tête */
	/*---------*/
	header
	{
		background: rgb(130,220,100);
		font-family: 'Trebuchet MS', Arial, sans-serif;
		left: 0px;
		right: 0px;
	}
	header h1
	{
		font-family: 'alex_brushregular', Arial, sans-serif;
		font-size: 5em;
		text-align: center;
	}
	header nav
	{
		display: inline-block;
		width: 100%;
		text-align: center;		
	}
	header nav ul
	{
		list-style-type: none;
	}
	header nav li
	{
		display: inline-block;
		margin-right: 50px;
	}
	header nav a
	{
		font-size: 2em;
		color: rgb(20,20,20);
		text-decoration: none;
	}
	header nav a:hover
	{
		color: rgb(200,0,0);
		border-bottom: 3px solid rgb(150,0,0);
	}
	/*--------------*/
	/* Bloc central */
	/*--------------*/
	section
	{
		position: absolute;
		left: 0px;
		right: 0px;
	}
	article, aside
	{
		display: inline-block;
		vertical-align: top;
		text-align: justify;
	}
	article
	{
		position: absolute;
		width: 75%;
		border: 1px solid #760001;
		padding: 15px;
		background-color: rgb(255,255,200);
	}
	article h1
	{
		font-size: 2em;
	}
	article h2
	{
		font-size: 1.6em;
	}
	article p
	{
		font-size: 1.2em;
	}
	#photo_Clarinette
	{
		text-align: center;
	}
	#photo_Accordéon
	{
		text-align: center;
	}
	aside
	{
		position: absolute;
		right:0px;
		width: 25%;
		background-color: #706b64;
		border-radius: 5px;
		padding: 10px;
		color: white;
		font-size: 1em;
	}
	#photo_Dominique_HANIKENNE
	{
		text-align: center;
	}
	/*--------------*/
	/* Pied de page */
	/*--------------*/
	footer
	{
		position: absolute;
		left: 0px;
		right: 0px;
		top:1800px;
		display: inline-block;
		text-align: justify;
		background: rgb(130,220,100);
		font-family: 'Trebuchet MS', Arial, sans-serif;
	}
	footer h1
	{
		font-size: 1.5em;
		text-align: left;
		margin: 15px;
	}
	footer nav
	{
		display: inline-block;
		width: 100%;
		text-align: center;
		margin: 15px;		
	}
	footer nav ul
	{
		list-style-type: none;
	}
	footer nav li
	{
		display: inline-block;
		margin-right: 50px;
	}
	footer nav a
	{
		font-size: 1em;
		color: rgb(20,20,20);
		text-decoration: none;
	}
	footer nav a:hover
	{
		color: rgb(200,0,0);
		border-bottom: 3px solid rgb(150,0,0);
	}