Bonjour,

Sur les conseils qui m'ont été donnés ici j'ai lu "Les fondamentaux du Responsive Web Design"
et j'essaie de refaire mon site en suivant ce que j'ai lu et cru comprendre.
les soucis que je rencontre :
la hauteur du div id="mainpage" ne varie pas en fonction du contenu de la page id="contenu"
les images et les font-size semblent fonctionner correctement pour les tailles de tablettes mais pas pour les tailles des smartphones
je n'arrive pas à placer "Prénom déconnexion" à droite de l'image du titre de l'association sans qu'il bouge en fonction de la taille de l'écran

le code de la page 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
<!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" />
---!> ici je mettrai le nom de la personne qui se sera connectée<!---
	<span class="span-bandeau"> Prénom 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=programme">Programme</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>
		</ul>
		</nav>
	</div>
	<div id="contenu">
		<?php 
		switch($page){
			case 'accueil': include ('accueil.php');break;
		}
		?>
	</div>		
</div>
<div id="pied_page"><br />se connecter | Plan du site | Mentions légales</div>
</body>
</html>


la page 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%;
   	background-color: #FFF;
   	border: 0;
   	font-size: 0.95em; 
   	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;
	font-size : 0.9em;
}
/*    MENU   */
#menu {
	float : left;
	width : 15.5%;
	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;
	font-size:1.0em;
}
 
#ul_liste li { /* liste */
	list-style-type:none; 
	list-style-position:inside;
	display:inline-block;
	padding:5px;
	text-align:center;
	vertical-align:top;
	font-size:1.0em;
}
 
#contenu {
	float:left;
	width : 84.5%; /*68em;*/
	background-color:#FFCC00;
	font-family : verdana;
}
 
/*    PIED DE PAGE   */
div#pied_page {
	clear : both;
	width :100%;
	height : 3.8em;
	background-color : #A52A2A;
	text-align : center;
	font-family : verdana;
	font-size : 0.8em;
	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 : 15em;
	}
Merci de votre aide