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 :

Annuler intervalle entre lignes


Sujet :

Tableau en CSS

  1. #1
    Expert confirmé
    Homme Profil pro
    Développeur informatique en retraite
    Inscrit en
    Avril 2008
    Messages
    2 101
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations professionnelles :
    Activité : Développeur informatique en retraite

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 101
    Points : 5 849
    Points
    5 849
    Par défaut Annuler intervalle entre lignes
    Bonjour,

    Je suis débutant en jQuery/html/css. J'ai bien lu quelques tutos, mais, comme l'affichage n'est qu'une toute petite partie de mon problème, je préfèrerais pouvoir me concentrer sur le coeur du sujet (le javascript jQuery) sans avoir à devenir au préalable un expert html/css. C'est pourquoi je pose quelques questions ici.
    Merci d'avance pour toute aide directe ou indirecte (pointeur vers un lien suffisamment proche de mon cas, exemple de code similaire...).

    Je voudrais afficher plusieurs lignes contiguës de sprites en css, avec une structure comme:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    line-1 ::= sp1_1 sp1_2 sp1_3 etc.
    line-2 ::= sp2_1 sp2_2 sp2_3 etc.
    line-3 ::= sp3_1 sp3_2 sp3_3 etc.
    etc.
    Pour ça, j'envisage le code html suivant, par exemple:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
          <div class="nim-board">
            <p class="nim-line-h">
              <span class="nim-sq"></span><span class="nim-hw"></span><span class="nim-sq"></span><span class="nim-hl"></span><span class="nim-sq"></span><span class="nim-hw"></span><span class="nim-sq"></span></p>
            <p class="nim-line-v">
              <span class="nim-vw"></span><span class="nim-e"></span><span class="nim-vl"></span><span class="nim-s"></span><span class="nim-vl"></span><span class="nim-e"></span><span class="nim-vw"></span></p>
            <p class="nim-line-h">
              <span class="nim-sq"></span><span class="nim-hw"></span><span class="nim-sq"></span><span class="nim-hl"></span><span class="nim-sq"></span><span class="nim-hw"></span><span class="nim-sq"></span></p>
          </div>

    Si vous pensez que je pars dans une mauvaise direction, merci de me le signaler!

    Sur une même ligne, tous les sprites doivent avoir la même hauteur (par exemple, 5 pixels pour les lignes de rang impair et 40 pixels pour les lignes de rang pair).

    J'ai une première version du css qui marche à peu près:
    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
    35
    36
    37
    38
    39
    40
    41
    42
    43
    .nim-board span {
      width:  40px;
      height: 40px;
      display: inline-block;
      padding : 0px;
      line-height : 0;
      background: url("nim-sprites.png") no-repeat;
    }
    .nim-board .nim-sq {
      width:   5px;
      height:  5px;
      background-position : 0px 0px;
    }
    .nim-board .nim-hw {
      width:  40px;
      height:  5px;
      background-position : 0px -47px;
    }
    .nim-board .nim-hl {
      width:  40px;
      height:  5px;
      background-position : 0px -41px;
    }
    .nim-board .nim-vw {
      width:   5px;
      height: 40px;
      background-position : 0px 0px;
    }
    .nim-board .nim-vl {
      width:   5px;
      height: 40px;
      background-position : -6px 0px;
    }
    .nim-board .nim-s {
      width:  40px;
      height: 40px;
      background-position : 0px -53px;
    }
    .nim-board .nim-e {
      width:  40px;
      height: 40px;
      background-position : 0px -94px;
    }
    Et voici le résultat:

    Nom : some-lines-bug.jpg
Affichages : 101
Taille : 38,4 Ko

    Chaque sprite est correct .
    Chaque ligne est correcte : les sprites sont bien jointifs sur une ligne (à part un petit liseré qui n'est pas très gênant (peut-être est-ce dû à l'export Gimp -> png?)).

    Mais les lignes ne sont pas jointives!
    Entre la ligne 1 et la ligne 2, il y a un espace d'environ 20 pixels et environ 30 pixels entre la ligne 2 et la ligne 3.

    Comment puis-je faire pour supprimer ces espaces?

    De plus, j'aimerais savoir s'il est possible et recommandé/utile de factoriser les hauteurs de ligne dans les classes "nim-line-h" et "nim-line-v" plutôt que de les spécifier dans chaque sprite?

    Enfin, je croyais que les "span" inclus dans les lignes de classe "nim-line-h", elles-mêmes incluses dans le div "nim-board", devaient hériter des propriétés des éléments englobants. Or, j'aimerais bien comprendre pourquoi les sprites ne s'affichent plus correctement lorsque j'utilise le css "simplifié":

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    .nim-board {
      width:  40px;
      height: 40px;
      display: inline-block;
      padding : 0px;
      line-height : 0;
      background: url("nim-sprites.png") no-repeat;
    }
    .nim-sq {
      width:   5px;
      height:  5px;
      background-position : 0px 0px;
    }
    Merci d'avance pour toute information qui me permettrait d'avancer!

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Bojour,
    tu as mis tes sprites dans des SPAN qui sont eux même mis dans des P, il te faudrait envisager des gérer les margin/padding de ces derniers, les valeurs par défaut dépendant des navigateurs entre autres.

  3. #3
    Expert confirmé
    Homme Profil pro
    Développeur informatique en retraite
    Inscrit en
    Avril 2008
    Messages
    2 101
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations professionnelles :
    Activité : Développeur informatique en retraite

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 101
    Points : 5 849
    Points
    5 849
    Par défaut
    Ok. Je vais tester les margin/padding.

    Merci beaucoup!

    Et en ce qui concerne l'héritage? Pas d'idées?

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Enfin, je croyais que les "span" inclus dans les lignes de classe "nim-line-h", elles-mêmes incluses dans le div "nim-board", devaient hériter des propriétés des éléments englobants.
    Tout n'est pas hérité, notamment pas les padding, margin, heigth ou autres display mais par contre la mise en forme comme font-family, font-size, color par exemple.

    Dans ton cas il me semble peut être plus facile de mettre tes SPAN dans des DIV, mais c'est à voir!

  5. #5
    Expert confirmé
    Homme Profil pro
    Développeur informatique en retraite
    Inscrit en
    Avril 2008
    Messages
    2 101
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations professionnelles :
    Activité : Développeur informatique en retraite

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 101
    Points : 5 849
    Points
    5 849
    Par défaut
    J'ai fait des dizaines d'essais en tripatouillant le css (un peu au hasard ).

    J'ai l'impression de commencer à approcher...

    Comme suggéré, j'ai mis les span dans des div:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
          <div class="nim-board">
            <div class="nim-line-h">
              <span class="nim-sq"></span><span class="nim-hw"></span><span class="nim-sq"></span><span class="nim-hl"></span><span class="nim-sq"></span><span class="nim-hw"></span><span class="nim-sq"></span></div>
            <div class="nim-line-v">
              <span class="nim-vw"></span><span class="nim-e"></span><span class="nim-vl"></span><span class="nim-s"></span><span class="nim-vl"></span><span class="nim-e"></span><span class="nim-vw"></span></div>
            <div class="nim-line-h">
              <span class="nim-sq"></span><span class="nim-hw"></span><span class="nim-sq"></span><span class="nim-hl"></span><span class="nim-sq"></span><span class="nim-hw"></span><span class="nim-sq"></span></div>
          </div>

    Dans un premier temps, j'ai abandonné toute idée de factorisation. Voici le 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
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    div.nim-board {
      margin:  0;
      padding: 0;
      border:  0;
    }
    div.nim-line-h {
      margin:  0;
      padding: 0;
      border:  0;
      line-height: 5px;
      height: 5px;
    }
    div.nim-line-v {
      margin:  0;
      padding: 0;
      border:  0;
      line-height: 40px;
      height: 40px;
    }
    span.nim-sq {
      margin:  0;
      padding: 0;
      border:  0;
      width:   5px;
      height:  5px;
      display: inline-block;
      background: url("nim-sprites.png") no-repeat;
      background-position : 0px 0px;
    }
    span.nim-hw {
      margin:  0;
      padding: 0;
      border:  0;
      width:  40px;
      height:  5px;
      display: inline-block;
      background: url("nim-sprites.png") no-repeat;
      background-position : 0px -47px;
    }
    span.nim-hl {
      margin:  0;
      padding: 0;
      border:  0;
      width:  40px;
      height:  5px;
      display: inline-block;
      background: url("nim-sprites.png") no-repeat;
      background-position : 0px -41px;
    }
    span.nim-vw {
      margin:  0;
      padding: 0;
      border:  0;
      width:   5px;
      height: 40px;
      display: inline-block;
      background: url("nim-sprites.png") no-repeat;
      background-position : 0px 0px;
    }
    span.nim-vl {
      margin:  0;
      padding: 0;
      border:  0;
      width:   5px;
      height: 40px;
      display: inline-block;
      background: url("nim-sprites.png") no-repeat;
      background-position : -6px 0px;
    }
    span.nim-s {
      margin:  0;
      padding: 0;
      border:  0;
      width:  40px;
      height: 40px;
      display: inline-block;
      background: url("nim-sprites.png") no-repeat;
      background-position : 0px -53px;
    }
    span.nim-e {
      margin:  0;
      padding: 0;
      border:  0;
      width:  40px;
      height: 40px;
      display: inline-block;
      background: url("nim-sprites.png") no-repeat;
      background-position : 0px -94px;
    }
    Du coup, les nim-line-v (hauteur 40px) semblent correctes: avec l'inspecteur de l'arbre DOM de Safari, on voit que les span sont bien "alignés" exactement à l'intérieur de la ligne nim-line-v:
    Nom : some-lines-bug-v-ok.jpg
Affichages : 83
Taille : 26,7 Ko

    Par contre, les nim-line-h (hauteur 5px) sont incorrectes: on voit que les span sont décalés de 3 pixels vers le bas par rapport à la ligne nim-line-h:
    Nom : some-lines-bug-h-ko.jpg
Affichages : 89
Taille : 33,2 Ko

    Quelqu'un aurait-il une explication ou des conseils?

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Tu as visiblement un problème lié à la font-size, mets font-size:0 sur tes DIV.

  7. #7
    Expert confirmé
    Homme Profil pro
    Développeur informatique en retraite
    Inscrit en
    Avril 2008
    Messages
    2 101
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations professionnelles :
    Activité : Développeur informatique en retraite

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 101
    Points : 5 849
    Points
    5 849
    Par défaut
    Génial! Ça marche avec font-size: 0! Merci beaucoup!

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

Discussions similaires

  1. Réponses: 11
    Dernier message: 17/08/2013, 19h42
  2. UPDATE sur un intervalle de lignes donné
    Par Pias dans le forum Requêtes
    Réponses: 4
    Dernier message: 25/03/2006, 21h42
  3. Comment annuler une entrée clavier?
    Par doudine dans le forum AWT/Swing
    Réponses: 10
    Dernier message: 17/02/2006, 12h22
  4. [Dates] intervalles entre deux timestamp
    Par maysa dans le forum Langage
    Réponses: 7
    Dernier message: 15/12/2005, 21h37
  5. Réponses: 2
    Dernier message: 24/04/2005, 14h17

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