Mise en page

**dhanikenne** · 31/08/2016, 21h44

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);
	}

**nicolas581** · 03/09/2016, 23h50

Bonjour,

Vous devriez éviter la positionnement en absolute qui sauf cas particulier est une mauvaise pratique (notamment pour ce qui concerne le côté adaptatif).
Vous pouvez essayer de positionner vos éléments avec flexbox, en vitesse et pour vous aider dans votre réflexion, voici un début de solution :

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>
 
			<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>
 
	</body>

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
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
header
	{
	  display: flex;
		background: rgb(130,220,100);
		font-family: 'Trebuchet MS', Arial, sans-serif;
		left: 0px;
		right: 0px;
	}
 
	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
	{
    display: flex;
    justify-content: space-between;
	}
	article, aside
	{
		display: flex;
    flex-direction:column;
		text-align: justify;
	}
	article
	{
		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
	{
		background-color: #706b64;
		border-radius: 5px;
		padding: 10px;
		color: white;
		font-size: 1em;
    width: 50%;
    height: 25em;
	}
	#photo_Dominique_HANIKENNE
	{
		text-align: center;
	}
	/*--------------*/
	/* Pied de page */
	/*--------------*/
	footer
	{
		display: flex;
		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);
	}

**laurentSc** · 04/09/2016, 00h26

Bonsoir,

j'ai réussi à supprimer le chevauchement de l'article et de l'aside. Restent les marges ...

http://codepen.io/laurentsc/pen/kkYNbV

Invité · 04/09/2016, 09h42

Bonjour,

@laurenSc
Avant de "conseiller" les autres, occupe-toi déjà de ton propre design (et d'en comprendre le CSS)

1/ Afin de réspecter la sémantique des balises, voici quelques petites modifs. (pour le reste, rien à dire : le HTML est bien codé ) : http://codepen.io/jreaux62/pen/bwNdOm

<main> est la partie "principale"
une <section> peut contenir plusieurs <article> (<aside> aussi, d'ailleurs)

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
<!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>.......</li>
						<li>.......</li>
						<li>.......</li>
						<li>.......</li>
					</ul>
				</nav>
			</header>
			<main>
				<section>
					<article>
						<header>
							<h1>Les cours de solfège comme à l'académie</h1>
						</header>
						<div>
							<p>Bonjour,<br/><br/>Bienvenue sur le site..........</p>
						</div>
					</article>
					<article>
						<header>
							<h1>..........</h1>
						</header>
						<div>
							<p>...........</p>
						</div>
					</article>
				</section>
				<aside>
					<h1>À propos de l'auteur</h1>
						<div>
							<p>...........</p>
						</div>
				</aside>
			</main>
			<footer>
				<h1>Liens</h1>
				<nav>
					<ul>
						<li>.......</li>
						<li>.......</li>
						<li>.......</li>
					</ul>
				</nav>
			</footer>
		</div>
	</body>
</html>

2/ Ensuite, le CSS (juste la partie "mise en page) :

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
/* -------------- */
* { margin:0; padding:0; border:0; font-size:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
html, body { width:100%; height:100%; min-height:100%; font-size:100%; }
header, footer, main, section, nav, article, aside { display:block; }
/* -------------- */
#bloc_page > header
{
	background: rgb(130,220,100);
	font-family: 'Trebuchet MS', Arial, sans-serif;
}
#bloc_page > header nav
{
	display: inline-block;
	width: 100%;
	text-align: center;		
}
main {
	display:flex;
}
main > section, main > aside
{
	flex:1 1 auto;
}
main > section
{
	width: 75%;
	border: 1px solid #760001;
	padding: 15px;
	background-color: rgb(255,255,200);
}
main > aside
{
	width: 25%;
	background-color: #706b64;
	border-radius: 5px;
	color: white;
}
main > section > article, main > aside
{
	padding: 10px;
	text-align: justify;
}

La partie intéressante est ici :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
main {
	display:flex;
}
main > section, main > aside
{
	flex:1 1 auto;
}

voir :

3/ Quant aux "marges récalcitrantes" : certaines balises ont des propriété "par défaut".
C'est le cas du <body> (marges) ou <ul> (et d'autres)
Pour "annuler" ces propriétés par défaut :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

* { margin:0; padding:0; border:0; font-size:100%; .... }

Pour le reste :

**laurentSc** · 06/09/2016, 17h28

Envoyé par jreaux62

Avant de "conseiller" les autres, occupe-toi déjà de ton propre design (et d'en comprendre le CSS)

J'avais justement essayé d'utiliser ce que tu venais de m'apprendre (les flexboxs)...Mais tu fais mieux...

Mise en page

CSS

Vue hybride

Discussions similaires

Partager

Partager