1 pièce(s) jointe(s)
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:
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:
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:
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:
Pièce jointe 172403
Chaque sprite est correct :yaisse:.
Chaque ligne est correcte :yaisse: : 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:
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!
