Taille font-size qui ne change pas

**philippef** · 18/08/2016, 12h33

Bonjour,

Je refais complètement un site. Le but est qu'il soit "responsive design".
La plus part des éléments sont bien proportionnels mais j'ai un problème avec la taille des lettres qui ne varie pas en fonction de la résolution.
mon fichier index

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
<!DOCTYPE HTML>
<html>
<head>
<title>Association pour l&apos;Animation Culturelle de Troissy~Bouquigny</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="description" content="Association culturelle, Culture, Histoire, Troissy, Bouquigny, Champagne"/>
<meta name="keywords" content="Association, Culturel, Histoire, Crypte, Brocante, Champagne, Troissy, Bouquigny, Dormans, 51, 51700 "/>
<meta name="Robots" content="index, follow, all"/>
<meta name="Revisit-after" content="5 days"/>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script type="text/javascript" src="scripts/scripts.js"></script>
</head>
<body>
<div id="bandeau">
	<img src="images/logo_association.jpg" alt="" id="imgbandeau" />
	<img src="images/crypte.jpg" alt=""  id="imgbandeau1" />
	<img src="images/bandeau.jpg" alt="" id="imgbandeau2" />
	<span class="span-bandeau"> Jean-Pierre déconnexion </span>
</div>
<div id="filariane">
		<span class="span-ariane">Vous êtes ici </span><img src="images/ariane.jpg" alt="" class="span-ariane-img" /> 
		<?php 
                if (!isset($_GET['page'])) $page= 'accueil'; else $page= $_GET['page']; 
                        switch($page){
                                case 'accueil': echo("Accueil");break;
                }       
                ?>
</div>
<div id="mainpage">
	<div id="menu"><br />
		<nav>
		<ul>
			<li><a href="index.php?page=accueil">Accueil</a></li>
			<li><a href="index.php?page=association">L'Association</a></li>
			<li class="menuli" onclick="javascript:showmenu(document.getElementById('sousmenu4'));">Troissy historique</span></li>
			<ul class="sousmenu" id="sousmenu4" style="list-style-type:none; display: none;">
				<li><a href="index.php?page=histoire" class="couleur">L&apos;Histoire de Troissy</a></li>
				<li><a href="index.php?page=photos" class="couleur">Cartes anciennes</a></li>
				<li><a href="index.php?page=eglise" class="couleur">&Eacuteglise St-Martin</a></li>
				<li><a href="index.php?page=crypte" class="couleur">La Crypte</a></li>
				<li><a href="index.php?page=temple" class="couleur">Le Temple</a></li>
				<li><a href="index.php?page=abbaye" class="couleur">Abbaye de l&apos;Amour-Dieu</a></li><br />
			</ul>
				<li><span class="menuli" onclick="javascript:showmenu(document.getElementById('sousmenu5'));">&Eacute;v&egravenements r&eacute;cents</span></li>
			<ul class="sousmenu" id="sousmenu5" style="list-style-type:none; display: none;">
				<li><a href="index.php?page=brocante_2016" class="couleur">2016 : brocante</a></li>
				<li><a href="index.php?page=chorales_2016" class="couleur">2016 : chorales</a></li>
				<li><a href="index.php?page=patrimoine_2015" class="couleur">2015 : journ&eacute;es du patrimoine</a></li>
				<li><a href="index.php?page=brocantes_2015" class="couleur">2015 : brocantes</a></li>
				<li><a href="index.php?page=conference_2014" class="couleur">2014 : conf&eacute;rence climat</a></li><br />
			</ul>
			   	<li><a href="index.php?page=visites" style="color:yellow">Visites</a></li>
			   <!---<li><span class="menuli" onclick="javascript:showmenu(document.getElementById('sousmenu6'));">Archives</span></li>
			<ul class="sousmenu" id="sousmenu6" style="list-style-type:none; display: none;">
				<li><a href="index.php?page=2012" class="couleur">&Eacute;v&egrave;nements 2012</a></li>
				<li><a href="index.php?page=2011" class="couleur">&Eacute;v&egrave;nements 2011</a></li>
				<li><a href="index.php?page=2010" class="couleur">&Eacute;v&egrave;nements 2010</a></li>
			</ul>---!>
				<li><a href="index.php?page=contacts">Nous contacter</a> </li>
				<li><a href="index.php?page=devenir_membre">Devenir membre</a></li>
			   	<li><a href="index.php?page=ailleurs">Ailleurs dans la r&eacute;gion</a></li>
			</ul>
		</ul>
		</nav>
	</div>
	<div id="contenu" class="clearfix">
		<?php 
		switch($page){
			case 'accueil': include ('accueil.php');break;
			case 'association': include ('association.php');break;
		}
		?>
	</div>		
</div>
<div id="pied_page"><br />se connecter | Plan du site | Mentions légales</div>
</body>
</html>

la feuille 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
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
a{text-decoration:none;color:yellow;}
.blue:hover{color:blue; }
.blue{color:blue;}
 
html, body {
   	height: 100%;
	font-size : 0.9em;
   	background-color: #FFF;
   	border: 0;
   	margin: 0;
   	min-height: 100%;
   	padding: 0;
}
#bandeau {
	overflow : auto;
	background-color : #A52A2A;
}
/* LE BANDEAU */
#imgbandeau {
	width : 10%; 
	margin-left : 0.8em;
	float : left;
}
#imgbandeau1 {
	width : 14.2%; 
	margin-left : 0.8em;
	float : left;
}
#imgbandeau2 {
	width : 40%; 
	margin-left : 0.8em;
	margin-top : 1%;
	float : left;
}
/*  LE FIL D'ARIANE */
#filariane {
	height : 1.3em;
	color : #FFFFFF;
	background-color : #8E514D;
}
.span-ariane {
	margin-left : 15.5%;
}
.span-ariane-img {
	margin-left : 0.5em;
}	
/*  MENU ET CONTENEUR */
#mainpage {
	display:flex;
	flex-direction:row;
	min-height : 43.2em;
 
}
/*    MENU   */
#menu {
	width : 15%;
	padding : 0;
	background-color:#A52A2A;
}
ul { padding:0em; margin-left:1.1em; font-family:verdana; list-style-type:none;}
li { padding-bottom:1.2em;}
li a:hover{text-decoration:underline;color:yellow}
 
ul.menu, ul.sousmenu { list-style-type:none;margin:0em;padding:0em;}
ul.menu li.titre { margin-bottom:0em; }
ul.sousmenu li { margin-left:0.9em; padding-bottom:0em;}
.menuli { cursor:pointer;color:yellow;}
.menuli:hover { text-decoration:underline;}
.couleur {color:#FFF;}
 
#ul_liste {
	text-align:center;
 
}
 
#ul_liste li { /* liste */
	list-style-type:none; 
	list-style-position:inside;
	display:inline-block;
	padding:5px;
	text-align:center;
	vertical-align:top;
 
}
 
#contenu {
	width : 85%; /*68%;*/ /*68em;*/
	min-height:90em;
	background-color:#FFF;
	font-family : verdana;
}
.clearfix:before, .clearfix:after { display:table; content:""; }
.clearfix:after { clear:both; }
 
/*    PIED DE PAGE   */
div#pied_page {
	clear : both;
	width :100%;
	height : 3.8em;
	background-color : #A52A2A;
	text-align : center;
	font-family : verdana;
 
	color : #FFF;
}
/*--------*/
img, object, embed, canvas, video, audio, picture {
       max-width: 100%;
	height: auto;
       _width: 100%; /* IE6 seulement */
}
 
/* à supprimer */
.span-bandeau {
	color : #FFFF00; /*jaune*/
	margin-left : 10%; /*15em;*/
	}

j'ai beau lire et relire le tuto sur responsive design je ne vois pas où est mon problème

merci de votre aide

Invité · 19/08/2016, 11h26

Bonjour,

Envoyé par philippef

...Le but est qu'il soit "responsive design"...
...éléments sont bien proportionnels...

Le fait que les "éléments soient proportionnels" n'en fait pas pour autant du "responsive design".

On ne voit aucun @media query dans ton code.
C'est ce qui permet de créer des "break points" (points de rupture), et d'adapter le design = modifier la mise en page, position des blocs, font-size... en fonction de différentes résolutions.
Ex. : 2/3/4 blocs côte à côte sur PC peuvent être mis l'un en dessous de l'autre sur tablette / phone.

D'autre part, il n'y a qu'une propriété font-size (sur body) dans ton CSS.
Perso, j'utilise les %, mais il existe différentes unités (je te laisse faire une recherche là-dessus).

Ex. :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
 
/* "Mobile First" = on définit d'abord pour les phones */
body { font-size:100%; } 
#bloc1, #bloc2 { width:100%; clear:both; float:none; } /* 2 blocs l'un sous l'autre */
 
/* break-point à 768px */
@media screen and (min-width:768px)  /* pour une largeur mini de ...*/
{
   body { font-size:90%; }
   #bloc1, #bloc2 { width:50%; clear:none; float:left; } /* 2 blocs l'un à coté de l'autre */
}

**philippef** · 30/08/2016, 21h26

Merci pour ces renseignements.
Après avoir lu et relu et re-relu le tuto sur webdesign j'ai enfin compris

Mais j'imagine que j'aurai d'autres problèmes avant de finaliser.
merci encore

Taille font-size qui ne change pas

CSS

Discussions similaires

Partager

Partager