Site en responsive web design
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:
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'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'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>
</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:
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
