Adaptation "responsive" d'une page web

**SylvainM** · 18/03/2016, 16h43

Bonjour à tous,

Je ne suis pas du tout développeur web, et il me manque plein de fondamentaux HTML, CSS, etc...

Malgré tout, en adaptant quelques codes récupérés à droites à gauche, je parviens généralement à mettre en ligne quelques pages utiles (collègues, associations...).
Avec la montée en puissance des terminaux mobiles, j'ai récemment pris conscience de l'importance du "web-responsive", et je souhaiterais adapter le CSS d'une page dont la structure est relativement simple :
- un bandeau haut (100px de haut)
- une carte (100%-200px)
- un bandeau bas (100px de haut)

Voici le code épuré, pour l'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
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
<!DOCTYPE html>
<html lang="fr">
<head>
<style>
 
body { margin:0; padding:0; }
 
.bandeau_haut {
   position: absolute;
   top: 0px;
   float: center;
   text-align: center;
   margin: 0px;
   padding: 0px;
   width: 100%;
   height: 100px;
   border: 1px solid black;
   background-color: rgb(50, 100, 50);
}
.bandeau_bas {
   position: absolute;
   bottom: 0px;
   float: center;
   text-align: center;
   margin: 0px;
   padding: 0px;
   width: 100%;
   height: 100px;
   border: 1px solid black;
   background-color: rgb(50, 100, 50);
}   
.carte {
   position: absolute;
   top: 100px;
   bottom: 100px;
   float: center;
   text-align: center;
   margin: 0px;
   padding: 0px;
   width: 100%;
   border: 1px solid black;
   background-color: rgb(100, 100, 100);
}
</style>
</head>
<body>
 
<div class="bandeau_haut">
  <h2>Bandeau haut</h2>
</div>
 
<div class="carte">
  <h2>Carte</h2>
</div>
 
<div class="bandeau_bas">
  <h2>Bandeau bas</h2>
</div>
 
</body>
</html>

Si vous pouviez me donner quelques conseils pour faire basculer ce code en "responsive", ce serait très gentil de votre part

L'idée serait certainement de passer de valeurs en px à des valeurs en % (pour les bandeaux), en fixant des tailles minimales/maximales en pixels, mais je ne sais pas trop comment m'y prendre...

Merci à ceux qui pourront m'aider dans ce projet.

Cordialement.

Sylvain M.

**SylvainM** · 18/03/2016, 17h01

Désolé, je viens de voir qu'il y avait une rubrique "CSS" certainement plus appropriée à ma question...

(si un modérateur peut déplacer le message?)
Et en guise de note pour moi, je me mets ce lien pour mémoire qui est très bien expliqué (mais encore un peu complexe pour mon niveau...

)

**NoSmoking** · 19/03/2016, 18h52

Bonjour,
de ce que je vois ta page est presque responsive, elle s'adaptera en largeur au différents médias à une exception prête, les hauteurs fixées en pixel. Que ce passera t-il lorsque le contenu ne tiendra plus dans la zone définie.

Autre problème qui va surgir, c'est tes positions qui sont exclusivement en absolute, c'est pas la meilleur solution.

Tu devrais jeter un oeil à Les fondamentaux du Responsive Web Design.

**SylvainM** · 20/03/2016, 11h21

Merci NoSmoking de te pencher sur mon cas, ainsi que d'avoir déplacé mon message dans la bonne rubrique.

Envoyé par NoSmoking

Tu devrais jeter un oeil à Les fondamentaux du Responsive Web Design.

Effectivement, j'étais tombé sur ce lien, mais je reconnais que mon niveau ne me permet pas encore de tout assimiler...
Mais je le lit petit à petit et ça infuse quand même !!

Envoyé par NoSmoking

à une exception prête, les hauteurs fixées en pixel.

Oui, c'est bien là mon souci.
Mais si je veux passer en pourcentage, là ça devient plus compliqué à gérer pour moi... En fait, j'aimerai bien gérer seulement 2 cas de figures :
- Écran PC format paysage => hauteur des bandeaux en pixels de taille définie
- Écran Smartphone/tablette (paysage ou portrait) => hauteur des bandeaux en pixel aussi, mais plus petite, voire même bandeaux masqués? (mais avec une solution pour les afficher

).

Je me rends compte d'un autre problème : étant donné que la div carte est interactive (carte leaflet), si on veut afficher/masquer les bandeaux depuis la carte, c'est impossible en faisant glisser l'écran, puisque ça fait glisser la carte et non la page web... (je n'utilise vraisemblablement pas les bons termes, désolé !)

Envoyé par NoSmoking

Autre problème qui va surgir, c'est tes positions qui sont exclusivement en absolute

Oui, mais dans mon cas précis, je ne vois pas trop comment faire autrement

Merci pour tous les (petits ou gros) conseils que vous pourrez m'apporter !

Sylvain M.