<div dir="ltr">Le problème des scrollbars qui apparaissent de façon difficile à reproduire vient de plusieurs raisons:<div><br><div>(1) Tu as taillé tout ton formulaire en pixels alors que les polices sont taillées en "em", les polices peuvent varier d'un navigateur à l'autre, ou selon les préférences d'accessibilité de l'utilisateur sur son ordinateur, sa tablette, son smartphone, ou son grand écran TV. Il est impossible de faire cohabter les deux, et d'une façon générale il vaut mieux éviter de tailler les formulaires même en "em" ou en pixels, en utilisant plutôt les contraintes d'alignement, de marges, de contrôle des sauts de ligne (mais ne pas les interdire partout, notamment pas entre les boutons !</div>
</div><div><br></div><div>(2) Tu tailles les éléments à la façon (obsolète car non standard) d'Internet Explorer en mode de compatibilité "quirk" : en mode standard (HTML5, ou HTML4 sans quirk, ou CSS standard) la largeur ou la hauteur indiquée par "width:" ou "height:" est celle du contenu, et ne tient pas compte du padding, ni des bordures ni des marges extérieures qui viennent s'ajouter.</div>
<div><br></div><div>De fait tu as des div dimensionnés avec une largeur par exemple de 355 pixel : ces divs indiquent un padding ou des bordures qu'il faudra retrancher des dimensions des éléments internes. Mais parmi ces éléments internes on trouve des div à nouveau de largeur 355 pixels, avec leur propre bordure, padding et marges, ce qui ne PEUT PAS rentrer dans la largeur du div parent.</div>
<div><br></div><div>Pour plus d'infos recherche dans les spécifications CSS du SVG la doc concernant le "box-model".</div><div><br></div><div>Une erreur fréquente qu'on trouve dans plein d'écrans sur le web c'est d'écrire:</div>
<div><div style="width:100%;">...</div><div>en mentionnant en plus des marges, bordures et paddings horizontaux. A chaque fois cela fait déborder les cadres horizontalement et on soit on voit apparaître une barre de défilement, soit tu la supprime volontairement avec "overflow:hidden" mais alors tu cours le risque que le texte affiché dans un conteur soit partiellement masqué.</div>
<div><br></div><div>Une solution c'est la propriété "box-model" de CSS3 (mais elle ne fonctionne qu'avec les navigateurs les plus récents, et même pas tous en HTML5 !) Cette propriété est un compromis au départ demandé pour la compatibilité, mais aussi par le fait que les webdesigners ont du mal à dimensionner leurs objets avec le box-model standard. De fait le W3C offre maintenant le choix permettant de déterminer quelle "boîte" sert de référence aux mesures de largeur et hauteur.<br>
</div><div><br></div><div><div>L'autre solution si on veut ne pas avoir à gérer les deux "box-models" incompatibles (standard, et quirk d'IE) c'est de ne jamais mélanger les sur un même élément les styles fixant largeur et hauteur (width, height) avec les styles fixant marges, bordures et padding : il suffit de mettre un second élément interne fixant les dimensions dans un premier élement fixant les marges bordures et padding, ou bien l'inverse selon la façon dont in dimensionne les éléments.</div>
<div><br></div><div>Je préfère nettement cette dernière solution, même si ça demande un peut plus d'éléments HTML dans la page (il faut savoir compter les div's emboîtés les uns dans les autres), ça a le mérite de fonctionner sur tous les navigateurs pour PC, tablettes, mobiles ou grands écrans. Et ce n'est pas non plus conceptuellement aberrant car géométriquement on a bien des rectangles différents, et cela offre ensuite plus de souplesse pour les placer précisément les uns avec les autres, plutôt qu'avec un box-model unique pour la page, ou plutôt que de jouer avec le style "box-model" mal supporté et difficile à suivre partout.</div>
</div></div><div class="gmail_extra"><br><br><div class="gmail_quote">Le 28 décembre 2013 21:48, yvecai <span dir="ltr"><<a href="mailto:yvecai@gmail.com" target="_blank">yvecai@gmail.com</a>></span> a écrit :<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<div bgcolor="#FFFFFF" text="#000000">
<div>Salut,<br>
<br>
Concernant le problème de l'ascenseur dans le bloc menu, je pense
avoir résolu le problème. Mais il est dur à reproduire: je l'ai vu
ce matin sur chrome+W8 chez mon père, mais impossible de le
reproduire avec quoique ce soit sous Ubuntu ou W7 chez moi ...<br>
Bref, tu peux confirmer que c'est bon ?
<a href="http://beta.opensnowmap.org/" target="_blank">http://beta.opensnowmap.org/</a><br>
<br>
Il faut encore que je travaille pas mal sur les infos-bulles afin
d'en prévoir la traduction.<br>
<br>
Merci encore,<br>
Yves<div><div class="h5"><br>
<br>
On 12/22/2013 01:46 PM, JB wrote:<br>
</div></div></div><div><div class="h5">
<blockquote type="cite">
<p>Firefox a jour sous W7, attention, râleur en force (ceci-dit,
j'ai toujours admiré ton site…) :</p>
<p> - À l'accueil, les boutons controle, légende… sont sur deux
lignes, avec l'ascenseur (c'est quoi, le mot savant ?) qui
apparait. Pas très beau, pas très utilisable. </p>
<p> - Je trouve « controles » pas très parlant, vu que c'est
surtout une question de fonds de carte.</p>
<p> - Data. Données, c'est pas parlant, en français ?</p>
<p> - Sinon, je trouve que data et blog pourraient être situés
ailleurs, comme ils sont moins lié aux fonctionnalités et
renvoient vers des pages différentes.</p>
<p> - Globalement, je trouve aussi que ça manque d'infobulles, les
dessins sur les boutons ne sont pas toujours très parlant.</p>
<p> - Je ne sais pas si l'anglais est la version de développement,
si c'est le cas, il manque quelques traductions vers le
Français.</p>
<p>JB.</p>
<p> </p>
<div> </div>
<p>Le 22.12.2013 10:05, yvecai a écrit :</p>
<blockquote type="cite" style="padding-left:5px;border-left:#1010ff 2px solid;margin-left:5px">
<pre>Salut à tous,
Cela doit bien faire 4-5 fois que je refais le design du site.
Cette fois-ci, j'ai commencé par maquetter le tout avec Inkscape. Outre
le temps gagné (franchement, je conseille !), je pense que le design est
plus abouti vu que j'ai réussi à le mettre en œuvre tel que je l'avais
dessiné.
Alors voilà, faites-moi part de vos retours pendant que je suis en
vacances: <a href="http://beta.opensnowmap.org" target="_blank">http://beta.opensnowmap.org</a>
Merci d'avance ! Yves
_______________________________________________
Talk-fr mailing list
<a href="mailto:Talk-fr@openstreetmap.org" target="_blank">Talk-fr@openstreetmap.org</a>
<a href="https://lists.openstreetmap.org/listinfo/talk-fr" target="_blank">https://lists.openstreetmap.org/listinfo/talk-fr</a>
</pre>
</blockquote>
<br>
<fieldset></fieldset>
<br>
<pre>_______________________________________________
Talk-fr mailing list
<a href="mailto:Talk-fr@openstreetmap.org" target="_blank">Talk-fr@openstreetmap.org</a>
<a href="https://lists.openstreetmap.org/listinfo/talk-fr" target="_blank">https://lists.openstreetmap.org/listinfo/talk-fr</a>
</pre>
</blockquote>
<br>
</div></div></div>
<br>_______________________________________________<br>
Talk-fr mailing list<br>
<a href="mailto:Talk-fr@openstreetmap.org">Talk-fr@openstreetmap.org</a><br>
<a href="https://lists.openstreetmap.org/listinfo/talk-fr" target="_blank">https://lists.openstreetmap.org/listinfo/talk-fr</a><br>
<br></blockquote></div><br></div>