Problème d'épaisseur avec border-width
Fermé
alex012
Messages postés
87
Date d'inscription
mardi 12 février 2013
Statut
Membre
Dernière intervention
28 août 2021
-
Modifié le 6 nov. 2019 à 17:56
Yakitori - 8 nov. 2019 à 02:13
Yakitori - 8 nov. 2019 à 02:13
A voir également:
- Problème d'épaisseur avec border-width
- Border maker - Télécharger - Retouche d'image
- Mouse without border - Guide
- Modifier épaisseur trait photoshop - Forum Photoshop
- Inkscape épaisseur trait ✓ - Forum Graphisme
- Problème épaisseur de ligne autocad - Forum AutoCAD
1 réponse
Salut, regarder des dimensions en fonction de son écran n'a aucun intérêt...un site étant fait pour la majorité des utilisateurs il faut si on veut se référer à quelque chose la valeur moyenne de résolution des écrans. Pareil selon les navigateurs il peut exister des différences entre les dimensions.
Mais bon normalement 1px fait 1px(et je suis bien curieux de savoir comment vous mesurez 0.8 px ou 0.66px sur un écran à savoir que en dessous d'1px il ne s'affichera rien...).
Je vous conseille d'utiliser la valeur 'thin' pour ce genre de bordure et si vous voulez 1px pour des côtes précises de vous assurer que padding et margin sont bien à 0 et qui risquent(différemment selon les navigateurs) de rogner dessus. Mais bon une valeur exacte pour une bordure de 1px c'est pas tellement intéressant. Perso si je doit faire des placements précis j'utiliserais le quadratin typographique(ex: 0.02em) qui reste une valeur proportionnelle donc ne changera pas fonction du zoom ou de la résolution écran de chacun.
C'est vraiment rare et particulier d'avoir à tenir compte d'une bordure de 1px dans une mise en page...le moindre petit détails risque de le faire péter si c'est à ce point serré, d'autant plus qu'à 1px on voit pas grand chose donc vous ne seriez pas en train d'essayer de couper les cheveux en 4 au lieu de passer par une autre méthode(comme les marges) si besoin d'un positionnement à ce point précis? Si c'est pour l'aspect visuel entre 0.8 et 1px l'écran affichera la même chose donc bon...
Mais bon normalement 1px fait 1px(et je suis bien curieux de savoir comment vous mesurez 0.8 px ou 0.66px sur un écran à savoir que en dessous d'1px il ne s'affichera rien...).
Je vous conseille d'utiliser la valeur 'thin' pour ce genre de bordure et si vous voulez 1px pour des côtes précises de vous assurer que padding et margin sont bien à 0 et qui risquent(différemment selon les navigateurs) de rogner dessus. Mais bon une valeur exacte pour une bordure de 1px c'est pas tellement intéressant. Perso si je doit faire des placements précis j'utiliserais le quadratin typographique(ex: 0.02em) qui reste une valeur proportionnelle donc ne changera pas fonction du zoom ou de la résolution écran de chacun.
C'est vraiment rare et particulier d'avoir à tenir compte d'une bordure de 1px dans une mise en page...le moindre petit détails risque de le faire péter si c'est à ce point serré, d'autant plus qu'à 1px on voit pas grand chose donc vous ne seriez pas en train d'essayer de couper les cheveux en 4 au lieu de passer par une autre méthode(comme les marges) si besoin d'un positionnement à ce point précis? Si c'est pour l'aspect visuel entre 0.8 et 1px l'écran affichera la même chose donc bon...
7 nov. 2019 à 23:40
Merci pour votre réponse, en fait mon problème c'est que je me servais de ça pour faire toute ma mise en page, par exemple je mets un rectangle bleu sans bordure de 50px de haut et à coté je veux un autre rectangle qui prolonge parfaitement le premier je fais donc 48 de haut avec une bordure de 1px, j'ai testé sur microsoft edge, la mise en page se fait correctement. Par contre sur firefox il y a un décalage visible et vraiment pas esthétique parce que la bordure fait 0.8px.
ps 1: ça ne me fait ça que avec les bordures, les rectangles feront exactement 50px et 48px
ps 2:pour voir les dimensions exactes je sur firefox je fait inspecter l'élément->Mise en page->Modèle de boite et j'ai toutes les dimensions.(margin, border, padding et content).
j'ai finalement contourné le problème en faisant une autre mise en page sans bordures qui me plait plus mais je ne sais pas comment je peux résoudre ce problème.
Merci
Modifié le 8 nov. 2019 à 02:15
ps 1: plus les marges(internes/externes droite et gauche), le type de bordure en fonction du navigateur et de ses particularités.
ps2 : qui ne correspondent pas à une mesure à la règle mais aux valeurs de votre CSS. Chacun ayant un écran différent, l'utilisateur étant aussi libre de redimensionner la fenêtre de son navigateur, de zoomer etc... laissez tomber les mises en pages pixels. Si vous faites un site c'est pas pour vous et votre écran/résolution mais pour tous les internautes et donc tout les écrans et toutes les résolutions. à commencer par celles des mobiles qui sont le moyen le plus fréquent de consulter un site de nos jours(ne pas le faire pour les mobiles fera que Google déclassera le site dans son moteur de recherche).
essayez un recherche positionnement Google. Vous pouvez aussi vous renseigner sur le web adaptative.
Mais clairement votre façon de faire n'est pas la bonne: elle doit pas tenir compte de tailles en pixels pour un écran en particulier mais de valeurs proportionnelles: % ou em.