Mise en page avec des pourcentages

**aertys** · 09/04/2016, 17h59

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 &agrave; tous</h1>
   			<h6 class="secondTitle "><span class="maj">h</span>ol&#225 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&ccedil;ais</a>
   			<a href="#"><span class="maj">e</span>nglish dictionnary</a>
   			<a href="#"><span class="maj">d</span>iccionario espa&ntilde;ol</a>
   		</aside>
   		<article class="textes">
   			<p class="p_fr"><span class="maj">l</span>a langue fran&ccedil;aise est r&eacute;put&eacute;e comme &eacute;tant la plus belle au monde. <span class="maj">v</span>enez vite d&eacute;couvrir la langue de <span class="maj">m</span>oli&egrave;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&eacute;n ven acqu&iacute; con nosotros a estudiar nuestra magnifica idi&oacute;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&#225 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&ccedil;ais</a>
					<a href="#"><span class="maj">e</span>nglish dictionnary</a>
					<a href="#"><span class="maj">d</span>iccionario espa&ntilde;ol</a>
				</aside>
				<article class="textes">
					<p class="p_fr"><span class="maj">l</span>a langue fran&cccedil;aise est r&eacute;put&eacute;e comme &eacute;tant la plus belle au monde. <span class="maj">v</span>enez vite d&eacute;couvrir la langue de <span class="maj">m</span>oli&egrave;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&eacute;n ven acqu&iacute; con nosotros a estudiar nuestra magnifica idi&oacute;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

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 {
 
}
------
 
-

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.
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

Invité · 10/04/2016, 09h11

Bonjour,

1/ Autant c'est simple pour les largeur,
autant c'est plus délicat pour les hauteurs,
car il faut alors que TOUS les parents soient eux aussi dimensionnés, en commençant par html, body.

2/ Mets des id et non des class quand il s'agit d'un élément unique.

3/ enlève les span class maj, car il existe la pseudo-classe CSS :
:first-letter

4/ tu as beaucoup de classes inutiles.
pour le logo et les titres :

Code css :

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

1
2
3
4
#tete > figure {...}
#tete > figure img {...}
#tete > div h1 {...}
#tete > div h2 {...}

**aertys** · 24/04/2016, 18h34

bonjour

j'ai réglé de nombreux problèmes soulignés : j'ai d'abord mis les éléments html et body avec une largeur et une hauteur de 100%, j'ai retiré la majorité des classes qui me paraissaient inutiles et j'ai remplacé tous mes span class="maj" par des ::first-letter(j'ai essayé avec un : mais ça ne fonctionnait pas).

je vous redonne 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
<!DOCTYPE html>
<!--[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>
   		<figure class="logo">
   			<img src="img/logo.svg" alt="logo">
   		</figure>
   		<div class="titres">
   			<h1 class="firstTitle">bienvenue &agrave; tous</h1>
   			<h6 class="secondTitle ">hol&#225 toda laa gente</h6>
		   	<h6 class="secondTitle">welcome everybody</h6>
	   		<h6 class="secondTitle">benvenuto a tutti</h6>
   		</div>
   	</header>
   	<section>
   		<aside class="liens">
   			<a href="#">dictionnaire de fran&ccedil;ais</a>
   			<a href="#">english dictionnary</a>
   			<a href="#">diccionario espa&ntilde;ol</a>
   		</aside>
   		<article class="textes">
   			<p class="p_fr">la langue fran&ccedil;aise est r&eacute;put&eacute;e comme &eacute;tant la plus belle au monde. <span class="maj">v</span>enez vite d&eacute;couvrir la langue de moli&egrave;re!!</p>
   			<p class="p_en">or you can come with me to learn <span class="mùaj">the shakespeare's length!</p>
   			<p class="p_sp">o bi&eacute;n ven acqu&iacute; con nosotros a estudiar nuestra magnifica idi&oacute;ma, la lengua del amor...</p>
   		</article>
   		</section>
   		<footer>
   			<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>
     	</div>
	</body>
</html>

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
html,body {
	height: 100%;
	width: 100%;
	background-color: #888888;
}
a {
	color: white;
	text-decoration: none;
}
header,section,footer {
	width: 90%;
	background-color: black;
}
.all {
	color: white;
	border: 2px black solid;
	background-color: white;
	width: 95%;
	height: 95%;
}
footer,header {
	height: 20%;
}
section {
	height: 40%;
	background-color: #aaaaaa;
}
.logo,.titres,.liens,.textes,footer 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,h1::first-letter,p::first-letter,h6::first-letter,a::first-letter {
	text-transform: uppercase;
}
body {
 
}
body {
 
}
body {
 
}
------
 
-

mais j'ai toujours des problèmes de positionnement que je ne comprends pas : par exemple il m'affiche le 1er titre donc le h1 tout en haut de la page avec sur la ligne en dessous directement les 3 liens que j'ai mis et enfin sur la 3ème ligne il me remet le 1er des h6.

que dois-je faire ?

Invité · 25/04/2016, 08h23

Bonjour,

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
.logo,.titres,.liens,.textes,footer 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;
}

1/ Au lieu de vouloir faire des regroupements de règles pour plusieurs classes en même temps, concentre-toi sur une classe à la fois :

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
.logo {
	width: 30%;
	height: 15%;
	display: inline-block;
	margin: 2.5%;
	margin: 0 auto;
	background-color: #bbbbbb;
	margin: 0 auto;
}
.titres {
	width: 55%;
	height: 15%;
	display: inline-block;
	margin: 2.5%;
	text-align: center;
	margin: 0 auto;
	background-color: #bbbbbb;
	margin: 0 auto;
}
..............

(je n'ai fait qu'un copier-coller, mais on voit qu'il y a des doublons et/ou incohérences :

Code css :

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

1
2
3
4
5
	margin: 2.5%;
...
	margin: 0 auto;
...
	margin: 0 auto;

2/ Quand il s'agit d'un élément spécifique, il est préférable d'utiliser un identifiant unique : id="...." plutôt qu'une classe.

3/ On peut encore simplifier.
Pour le header, par exemple :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="all">
   	<header>
   		<figure class="logo">
   			<img src="img/logo.svg" alt="logo">
   		</figure>
   		<div class="titres">
   			<h1>bienvenue &agrave; tous</h1>
   			<h6 class="secondTitle ">hol&#225 toda laa gente</h6>
		   	<h6 class="secondTitle">welcome everybody</h6>
	   		<h6 class="secondTitle">benvenuto a tutti</h6>
   		</div>
   	</header>
......

devient

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="allwrap">
   	<header>
   		<figure>
   			<img src="img/logo.svg" alt="logo">
   		</figure>
   		<div>
   			<h1>bienvenue à tous</h1> <!-- en UTF-8 => on peut écrire les caractères accentués ! -->
   			<h2>holà toda laa gente</h2>
		   	<h2>welcome everybody</h2>
	   		<h2>benvenuto a tutti</h2>
   		</div>
   	</header>
......

Et le CSS associé :

Code css :

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

1
2
3
4
5
6
7
8
/* HEADER */
#allwrap > header { ... }
#allwrap > header > figure { ... }
#allwrap > header > figure img { ... }
#allwrap > header > div { ... }
#allwrap > header > div h1 { ... }
#allwrap > header > div h2 { ... }
#allwrap > header > div h1::first-letter, #allwrap > header > div h2::first-letter { ... }

**aertys** · 01/05/2016, 19h13

re bonjour,

j'ai fait comme vous me l'avez expliqué en me concentrant d'abord sur le header (donc seulement sur celui-ci ) et cela marche j'ai obtenu à peu près ce que je voulais pour le header c'est à dire un bloc contenant le logo avec à côté un autre bloc contenant les titres . j'ai quand m^me quelques soucis : d'abord ces 2 blocs se sont alignés sur la gauche, je voudrais qu'ils soient centrés. ensuite pour les titres, lorsque on affiche un h1 ou un h6 il s'affiche par défaut avec une petite ligne en haut et une autre après ce qui fait qu'ils prennent beaucoup plus de place que je ne voudrais . savez vous donc comment retirer ces lignes que le navigateur met par défaut ? en css, je crois que c'est possible. re voici 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
<!DOCTYPE html>
<!--[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 id="all">
   	<header>
   		<figure>
   			<img src="img/logo.svg" alt="logo">
   		</figure>
   		<div>
   			<h1>bienvenue &agrave; tous</h1>
   			<h6>hol&#225 toda laa gente</h6>
		   	<h6>welcome everybody</h6>
	   		<h6>benvenuto a tutti</h6>
   		</div>
   	</header>
   	<section>
   		<aside class="liens">
   			<a href="#">dictionnaire de fran&ccedil;ais</a>
   			<a href="#">english dictionnary</a>
   			<a href="#">diccionario espa&ntilde;ol</a>
   		</aside>
   		<article class="textes">
   			<p class="p_fr">la langue fran&ccedil;aise est r&eacute;put&eacute;e comme &eacute;tant la plus belle au monde. <span class="maj">v</span>enez vite d&eacute;couvrir la langue de moli&egrave;re!!</p>
   			<p class="p_en">or you can come with me to learn <span class="mùaj">the shakespeare's length!</p>
   			<p class="p_sp">o bi&eacute;n ven acqu&iacute; con nosotros a estudiar nuestra magnifica idi&oacute;ma, la lengua del amor...</p>
   		</article>
   		</section>
   		<footer>
   			<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>
     	</div>
	</body>
</html>

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
html,body {
	height: 100%;
	width: 100%;
	background-color: #888888;
}
a {
	color: white;
	text-decoration: none;
}
header,section,footer {
	width: 90%;
	background-color: black;
	margin: 0 auto;
}
.all {
	color: white;
	border: 2px black solid;
	background-color: white;
	width: 95%;
	height: 95%;
}
footer,header {
	height: 20%;
}
section {
	height: 40%;
	background-color: #aaaaaa;
}
#all > header > figure, #all > header > div‏, .liens,.textes,footer a {
	margin: 0 auto;
} 
#all > header > figure,#all > header > div {
	height: 15%;
	display: inline-block;
	padding: ;
	margin: 0 auto;
 	background-color: #bbbbbb;
}
#all > header > figure {
	width: 30%;
}
#all > header > div {
	width: 55%;
	text-align: center;
}
.maj,#all > header h1::first-letter,p::first-letter,#all > header h6::first-letter,a::first-letter {
	text-transform: uppercase;
}
body {
 
}
body {
 
}
body {
 
}
------
 
-

**aertys** · 03/06/2016, 17h39

salut à tous,

je suis parvenu en utilisant une méthode que j'aime pas (c'est-à-dire des float: left;) à aligner les éléments du header
j'essaye maintenant d'aligner les éléments de la section, j'ai essayé display: inline-block; et float: left; mais rien ne marche.
enfin, pour le footer j'ai essayé de l'aligner au centre sur la ligne mais ça ne marchait pas comme voulu, je ne sais pourquoi en diminuant la width du footer div celui là c'est à peu près centré sur la ligne.
revoici mes codes:

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
<!DOCTYPE html>
<!--[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 id="all">
   	<header>
   		<figure>
   			<img src="img/logo.svg" alt="logo">
   		</figure>
   		<div>
   			<h1>bienvenue &agrave; tous</h1>
   			<p>hol&#225 toda la gente</p>
		   	<p>welcome everybody</p>
	   		<p>benvenuto a tutti</p>
   		</div>
   	</header>
   	<section>
   		<aside>
   			<a href="#">dictionnaire de fran&ccedil;ais</a>
   			<a href="#">english dictionnary</a>
   			<a href="#">diccionario espa&ntilde;ol</a>
   			<a href="#">dizionario di italiano</a>
   		</aside>
   		<article>
   			<p>la langue fran&ccedil;aise est r&eacute;put&eacute;e comme &eacute;tant la plus belle au monde. <span class="maj">v</span>enez vite d&eacute;couvrir la langue de <span class="maj">m</span>oli&egrave;re!!</p>
   			<p>or you can come with me to learn <span class="maj">the s</span>hakespeare's length!</p>
   			<p>o bi&eacute;n ven acqu&iacute; con nosotros a estudiar nuestra magnifica idi&oacute;ma, la lengua del amor...</p>
   			<p>venite a scoprire pi&ugrave; bella di tutte ed apprendere la lingua dei nobili!</p>
   		</article>
   		</section>
   		<footer>
                    <div>
                        <a href="#">
   				<img src="img/.png" alt="fb" class="fb">
   			</a>
                        <a href="#">
   				<img src="img/.png" alt="ig" class="ig">
   			</a>
   			<a href="#">
   				<img src="img/.png" alt="ln" class="ln">
   			</a>
   			<a href="#">
   				<img src="img/.png" alt="tw" class="tw">
   			</a> 
                    </div>
   		</footer>
     	</div>
	</body>
</html>

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
html, body {
	height: 100%;
	width: 100%;
	background-color: #8;
}
#all a {
	text-decoration: none;
}
#all > section {
	width: 90%;
	background-color: bk;
	vertical-align: middle;
}
#all {
	border: 2px black solid;
	background-color: white;
	width: 95%;
	height: 95%;
}
#all  footer, #all > header {
        margin: 0 auto;
	height: 20%;
        vertical-align: middle;
	width: 90%;
}
#all > section {
	height: 40%;
	background-color: #a;
}
#all > header > figure, #all > section, #all > header > div‏, #all > aside, #all > article, #all > header, #all > footer #all > footer a {
	display: inline-block;
	margin: 0 auto;
}
#all > header > figure, #all > header > div {
	height: 15%;
	display: inline-block;
	padding: 50px;
 	background-color: #b;
 	vertical-align: middle;
 	float: left;
}
#all > header > figure {
	width: 30%; 
}
#all > header > div {
	width: 55%; 
	text-align: center;
}
.maj, #all > header h1::first-letter,p::first-letter,#all > header p::first-letter,a::first-letter {
	text-transform: uppercase;
}
#all > header p {
	display: inline-block;
}
#all > article {
     width: 60%;
}
#all > aside {
     width: 40%;
}
#all > footer div {
    margin: 0 auto;
    width: 20%;
}
#all > footer a {
    margin: 0 auto;
    width: 10%;
}
#all > footer a img {
    margin: 0 auto;
    width: 10%;
}
article,aside {
    float: left;
}
body {
 
}
body {
 
}

merci

**aertys** · 05/06/2016, 19h53

bonsoir

j'ai refait un nouveau code css pour pouvoir mieux voir l'organisation de ma 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
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
html, body {
	height: 100%;
	width: 100%;
	background-color: #8;
}
#all a {
	text-decoration: none;
}
#all > section {
	width: 90%;
        border: 15px solid black;
	background-color: bk;
	vertical-align: middle;
}
#all {
	border: 2px black solid;
	background-color: white;
	width: 95%;
	height: 95%;
}
#all  footer, #all > header {
        margin: 0 auto;
	height: 20%;
        vertical-align: middle;
	width: 90%;
}
#all > section {
	height: 40%;
	background-color: #a;
}
#all > header > figure, #all > section, #all > header > div‏, #all > aside, #all > article, #all > header, #all > footer #all > footer a {
	display: inline-block;
	margin: 0 auto;
}
#all > header > figure, #all > header > div {
	height: 15%;
	display: inline-block;
	padding: 50px;
 	background-color: #b;
 	vertical-align: middle;
 	float: left;
}
#all > header > figure {
	width: 30%; 
}
#all > header > div {
	width: 55%; 
	text-align: center;
}
.maj, #all > header h1::first-letter,p::first-letter,#all > header p::first-letter,a::first-letter {
	text-transform: uppercase;
}
#all > header p {
	display: inline-block;
}
#all > article {
     width: 60%;
}
#all > aside {
     width: 40%;
}
#all > footer div {
    margin: 0 auto;
    width: 20%;
}
#all > footer a {
    margin: 0 auto;
    width: 10%;
}
#all > footer a img {
    margin: 0 auto;
    width: 10%;
}
article,aside {
    float: left;
}
aside,articl,header,footer {
    border: 1px solid black;
}
body {
 
}

en fait, j'ai juste rajouté des bordures pour bien voir les éléments . le souci c'est que j'ai beau avoir mis une bordure sur le aside et sur le article et j'arrive bien à voir celle sur le aside mais pas sur celle sur article. n'y aurait-il pas une erreur dns mon code html ?

Invité · 06/06/2016, 11h05

Bonjour,

Code :

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

1
2
3
#all > header > figure, #all > section, #all > header > div& #8207 ;, #all > aside, #all > article, #all > header, #all > footer #all > footer a {

aside,articl,header,footer {

Mise en page avec des pourcentages

CSS

Discussions similaires

Partager

Partager