Taille font-size qui ne change pas
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:
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'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'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">Église 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'Amour-Dieu</a></li><br />
</ul>
<li><span class="menuli" onclick="javascript:showmenu(document.getElementById('sousmenu5'));">Évènements ré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é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é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">Évènements 2012</a></li>
<li><a href="index.php?page=2011" class="couleur">Évènements 2011</a></li>
<li><a href="index.php?page=2010" class="couleur">Évè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é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:
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
