Essai sur le responsive webdesign
Bonjour,
En suivant le tutoriel de Julien Roche j'ai commencé un code pour bien comprendre.
Mais dès le début je bute sur un problème de largeur. J'ai pourtant suivi scrupuleusement les largeurs telles qu'elles sont définis dans le tutoriel.
Code 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
| html, body {
width: 100%;
height: 100%;
min-height: 100%;
margin:0; padding:0
font-size: 1em; /* Ideal: 16px */
}
.layout-main {
width: 80%; /* Ideal: 1024px -> 1024 / 1280 */
height: 100%;
min-height: 100%;
margin: 0 auto;
}
.main {
height: 30%;
min-height: 30%;
background-color:blue;
}
.layout-menu, .layout-content, .layout-adv {
display: inline-block;
height: 100%;
min-height: 100%;
}
.layout-menu {
color: #FFFFFF;
background-color: #CC0000;
width: 20.8984375%; /* Ideal: 214px -> 214 / 1024 */
}
.layout-content {
color: #000000;
background-color: #999;
width: 58.203125%; /* Ideal: 596px -> 596 / 1024 */
}
.layout-adv {
color: #000000;
background-color: #FF9;
width: 20.8984375%; /* Ideal: 214px -> 214 / 1024 */
} |
Code HTML:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
| <div class="layout-main">
<div class="main">
<div class="layout-menu">
</div><!-- layout-menu -->
<div class="layout-content">
</div><!-- layout-content -->
<div class="layout-adv">
</div><!-- layout-adv -->
</div><!-- main -->
</div><!-- layout-main --> |
Et le résultat dans http://codepen.io/JefReb/pen/CGBqt
Code on ne peut plus simple, J'ai juste mis à 30% la hauteur pour que ce soit plus visible.
Il est bien conseillé de mettre tous les chiffres après la virgule et la somme des 3 largeurs layout-menu, layout-content et layout-adv:
20.8984375%+58.203125% +20.8984375% font bien les 100% de la div .main dans laquelle elles sont placées.
Et pourtant ... elles ne tiennent pas et il y a un gap entre layout-menu et layout-content si bien que layout-adv n'a pas sa place et se colle en dessous.
Pourtant se sont les mêmes % que dans les exemples du tutoriel de Julien Roche qui marchent bien dans cette largeur.
Où se trouve mon erreur? Dès que je mets layout-adv à 19.3% par exemple cela passe au-dessus 19.4% ne passe pas.
Je comprends plus où je me suis planté.
Merci d'avance à ceux qui prendront le temps de me répondre.
