IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Bordure 1px est moins large qu'un px


Sujet :

CSS

  1. #1
    Membre régulier
    Homme Profil pro
    Chef opération transport urbain
    Inscrit en
    Avril 2008
    Messages
    92
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Canada

    Informations professionnelles :
    Activité : Chef opération transport urbain
    Secteur : Transports

    Informations forums :
    Inscription : Avril 2008
    Messages : 92
    Points : 112
    Points
    112
    Par défaut Bordure 1px est moins large qu'un px
    Bonjour à tous,

    Je suis à créer une application web pour gérer des pièces de travail dans une grille horaire journalière.

    Sous forme de graphique, j'ai à gauche la liste de mes employés, en haut j'ai les heures d'une journée commençant à 6h00 jusqu'à 26h00 (2h00 du matin).

    La grille horaire à besoin d'être ultra précise, j'ai donc mis 1 pixel pour chaque minute, ce qui nous fait 60 pixels par heure. Pour faire une belle séparation et avoir un repère visuel, j'ai enlevé 1 pixel à mon div que j'ai remplacé par une bordure d'un pixel. Logique non ?

    Et bien voilà que je m'aperçois qu'une bordure d'un pixel = 0.8 px.

    Au début de la journée (6h00 jusqu'à 8h00), le décalage n'est pas perceptible, mais rendu à 24h00 le décalage est très présent.

    Je peux contourner le problème en mettant un background qui a les bonnes proportions, mais j'aimerais quand même comprendre pourquoi qu'une bordure 1px égale à 0.8px.

    Voici un peu de code et le résultat pour une pièce de travail de 20h00 à 24h00:

    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    .heure{
      width:59px;
      height: 400px;
      border-left: solid 1px black;
    }

    Résultat (zoomé pour bien voir) :
    Nom : decalage.jpg
Affichages : 230
Taille : 47,5 Ko

    La ligne noire est ma bordure, la ligne rouge est l'image en arrière plan.

    Le détail que Chrome me donne :
    Nom : detail-chrome.jpg
Affichages : 227
Taille : 15,5 Ko

    Merci de m'aider à comprendre et peut-être résoudre mon problème.

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    je ne saurais pas te dire pourquoi 1px = 0.8px, mais...

    • 1h = 60 minutes
    • 1 minute = 1px

    Même si tu mets une bordure, il n'y a pas de raison que le div fasse 59px : tu perds forcément 1 minute par heure !
    Donc : pas logique.

    Une solution box-sizing :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    .heure{
      width:60px;
      height: 400px;
      border-left: solid 1px black;
      -webkit-box-sizing:border-box;
      -moz-box-sizing:border-box;
      box-sizing:border-box;
    }
    border-box
    Les propriétés width et height incluent le contenu, le remplissage (padding), la bordure, mais pas la marge.
    C'est le modèle de boîte utilisé par Internet Explorer lorsque le document est en mode de compatibilité (Quirks).
    La boîte de contenu ne peut pas être négative et est ramenée à 0 si nécessaire, il est donc impossible d'utiliser border-box pour faire disparaître l'élément.
    Les dimensions de l'élément sont calculées comme la somme de la bordure, du remplissage (padding) et du contenu.

  3. #3
    Membre régulier
    Homme Profil pro
    Chef opération transport urbain
    Inscrit en
    Avril 2008
    Messages
    92
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Canada

    Informations professionnelles :
    Activité : Chef opération transport urbain
    Secteur : Transports

    Informations forums :
    Inscription : Avril 2008
    Messages : 92
    Points : 112
    Points
    112
    Par défaut
    C'est logique si la bordure n'est pas incluse dans le calcul de la largeur de la boîte. Dans mon cas, la bordure n'est pas incluse, donc si j'ajoute le 1px à un conteneur de 60px, ça me fait 61px. C'est le pourquoi du 59px + 1px de bordure = 60px.

    D'où mon problème que la bordure ne fait pas 1px complet.

    J'ai essayé avec le box-sizing que je ne connaissais pas et ça fonctionne bien. De ce que je comprends c'est que cette propriété inclue la bordure et fait en sorte que le div fait 59.2px plus la bordure de 0.8px ce qui fait 60px tout rond.

    J'obtient le même résultat si je mets 59.2px de large pour mon conteneur.

    Merci pour ton soutient et ta piste de solution.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 12
    Dernier message: 01/03/2014, 01h58
  2. Etat est plus large que le papier
    Par lebienestrare dans le forum VB 6 et antérieur
    Réponses: 5
    Dernier message: 04/09/2006, 21h55
  3. [DBCOMBOBOX] liste est plus large que le combo lui-même
    Par valoji dans le forum Bases de données
    Réponses: 3
    Dernier message: 18/05/2006, 17h59
  4. Réponses: 9
    Dernier message: 04/10/2005, 14h50

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo