Discussion :

[link.80]

Bonjour,

Je suis en train de créer un calendrier en "responsive" (avec des dimensions en pourcentage) a partir d'un script que j'ai trouvé sur le net et qui me convient très bien.

J'ai malheureusement un souci sur les dernières versions de Safari et Opera qui me créent une marge sur le bord droit du calendrier lors du redimensionnement de la fenêtre du browser. (Tout est ok avec les dernières versions de chrome et Firefox)

J'ai crée un fiddle, ça sera plus facile pour constater le bug et tester. (j'ai volontairement épuré le code pour ne garder que l'essentiel, ça facilitera la compréhension

Lorsque la fenêtre est redimensionnée on peut constater que la dimension en pourcentage de mes box n'est plus vraiment fixe et bouge quelque peu en fonction du redimensionnement de la fenêtre ce qui crée une marge pas super esthétique à droite.

http://jsfiddle.net/link80/bc4YB/

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
<div id="JCalendrier">
    <div class="JCalContenu">Lu</div>
    <div class="JCalContenu">Ma</div>
    <div class="JCalContenu">Me</div>
    <div class="JCalContenu">Je</div>
    <div class="JCalContenu">Ve</div>
    <div class="JCalContenu">Sa</div>
    <div class="JCalContenu">Di</div>
</div>
<div class="LigneJour">
    <div class="jourVide">&nbsp;</div>
    <div class="jourVide">&nbsp;</div>
    <div class="jourVide">&nbsp;</div>
    <div class="otherDay">1</div>
    <div class="otherDay">2</div>
    <div class="otherDay">3</div>
    <div class="otherDay">4</div>
</div>
<div class="LigneJour">
    <div class="currentday">5</div>
    <div class="otherDay">6</div>
    <div class="otherDay">7</div>
    <div class="otherDay">8</div>
    <div class="otherDay">9</div>
    <div class="otherDay">10</div>
    <div class="otherDay">11</div>
</div>
<div class="LigneJour">
    <div class="otherDay">12</div>
    <div class="otherDay">13</div>
    <div class="otherDay">14</div>
    <div class="otherDay">15</div>
    <div class="otherDay">16</div>
    <div class="otherDay">17</div>
    <div class="otherDay">18</div>
</div>
<div class="LigneJour">
    <div class="otherDay">19</div>
    <div class="otherDay">20</div>
    <div class="otherDay">21</div>
    <div class="otherDay">22</div>
    <div class="otherDay">23</div>
    <div class="otherDay">24</div>
    <div class="otherDay">25</div>
</div>
<div class="LigneJour">
    <div class="otherDay">26</div>
    <div class="otherDay">27</div>
    <div class="otherDay">28</div>
    <div class="otherDay">29</div>
    <div class="otherDay">30</div>
    <div class="otherDay">31</div>
</div>

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
.jourVide, .otherDay, .JCalContenu, .currentday {
    width:14.28%;
    padding:2% 0;
    position:relative;
}
#JCalendrier {
    background-color:#000;
    overflow:hidden;
    color:#FFF;
    position:relative;
    z-index:100;
}
.JCalContenu {
    text-align:center;
    float:left;
}
.LigneJour {
    overflow:hidden;
    text-align:center;
    background:#654a21;
}
 .jourVide {
    float:left;
    background:#654a21;
}
.currentday {
    float:left;
    background:#F00;
}
.otherDay {
    background-color:#9b7320;
    float:left;
    color:#fff;
}

D'avance un grand merci pour l'aide que vous pourrez me fournir !

Salutations à tous

[rodolphebrd]

Bonjour,

je ne comprends pas pourquoi ce bug apparait seulement sur Safari et Opéra, je vais chercher.

Par contre comme solution de repli il y a table et table-cell:
http://codepen.io/anon/pen/bwsJu

Testé sur Safari et Opéra.

[link.80]

Merci rodolphebrd pour ton aide,

Effectivement la solution du table-cell fonctionne, mais malheureusement pas sur IE7, faudrait donc faire un css en reprenant mon idée de pourcentage mais uniquement pour IE7

Ou y a il une meilleure solution ?

En ce qui concerne ces pourcentages, il semblerait que ce soit un bug de webkit qui interprète différemment les nombres à virgules en CSS avec les pourcentages, j'ai trouvé quelques sujets relativement anciens sur internet, mais pas vraiment de réelle solution jusqu’à maintenant...

Je suis preneur si vous avez des idées !

[rodolphebrd]

Effectivement c'est un bug qui ne date pas d'hier de sorte que les navigateurs (le moteur de rendu webkit est pointé) calculent différemment les width et padding en %.
C'est apparemment relatif au traitement particulier des subpixel sur Webkit.

Les différences obtenues, si elles ne dénaturent pas complètement le design, sont tolérées car elles sont peu détectées par l'utilisateur.

[Candygirl]

Je suis preneur si vous avez des idées !

Par exemple, utiliser un vrai tableau <table>, <th> et autres balises utiles ?

Les algorithmes de calcul des pourcentages varient d'un navigateur à l'autre, c'était galère surtout à l'époque, avec IE qui arrondissait toujours au nombre le plus haut, Opera qui ne prenait pas du tout en compte les nombres après la virgule pour les %,...

Heureusement, à l'heure actuelle, les différences sont plutôt minimes. D'une manière générale, pour être sûr d'absorber un éventuel écart, hors contexte tableau, une solution est de toujours laisser une des colonnes fluides pour absorber l'un ou l'autre pixel ajouté ou supprimé.

[NoSmoking]

Bonjour,

Je suis preneur si vous avez des idées !

ne mets pas la background-color sur le conteneur mais sur les "cellules" les défauts d'arrondis ne seront plus visibles.

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
#JCalendrier {
/*    background-color:#000;/* OUT */
    overflow:hidden;
    color:#FFF;
    position:relative;
    z-index:100;
}
.JCalContenu {
    background-color:#000; /* REPORT ICI */    
    text-align:center;
    float:left;
}
.LigneJour {
    overflow:hidden;
    text-align:center;
/*    background:#654a21;/* OUT */
}
 .jourVide {
    float:left;
    background:#654a21;
}
.currentday {
    float:left;
    background:#F00;
}
.otherDay {
    background-color:#9b7320;
    float:left;
    color:#fff;
}

il te faudra juste rajouter un <div class="jourVide">&nbsp;</div> dans la dernière ligne de ton calendrier.

[link.80]

Par exemple, utiliser un vrai tableau <table>, <th> et autres balises utiles ?

C'est exactement ça, c'est effectivement la solution la plus simple !
J'ai converti toutes mes div en tableau et ça fonctionne très bien, merci je n'y avait pas pensé

Sujet résolu, un grand merci à vous tous !!!