sprite horizontal à partir d'une image verticale

Version imprimable

1 pièce(s) jointe(s)

Bonjour,
je souhaite réaliser un sprite à partir de l'image jointe (l'original fait 512px x 512px).
La petite difficulté, c'est que je souhaite "isoler" chaque feu, donc faire 3 images disposées verticalement mais les afficher horizontalement.
Pièce jointe 595819
Voici mon code.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    <!doctype html>
    <html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Titre de la page</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <ul class="icone">
        <li class="icone-1"></li>
        <li class="icone-2"></li>
        <li class="icone-3"></li>
 
    </ul>
    </body>
    </html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
/* Cibler les éléments <li> appartenant à un élément de classe "icone" */
.icone li
{
    width: 512px;
    height: 200px;
    display: inline;/* pour afficher chaque image sur une ligne horizontale */
    background: url("mon_image.png") no-repeat;
}
 
.icone-1 { background-position: left top; }
.icone-2 { background-position: left -20%; }/*les décalages sont mis au pif */
.icone-3 { background-position: left -40%; }

Salut

Code:

1
2
3
.rotation {
  transform: rotate(90deg)
}

Encore page blanche :( avec
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 /* Cibler les éléments <li> appartenant à un élément de classe "icone" */ .icone li { width: 512px; height: 200px; display: inline; /* pour afficher chaque image sur une ligne horizontale */ background: url("mon-image.png") no-repeat; transform: rotate(90deg); } .icone-1 { background-position: left top; } .icone-2 { background-position: left -20%; }/*les décalages sont mis au pif */ .icone-3 { background-position: left -40%; } .rotation { transform: rotate(90deg) }
Mais peux-tu m'expliquer l'idée car ce que je comprends, c'est que chaque image (qui devrait être alignée horizontalement à l'aide de display: inline;) serait en plus pivotée de 90 degrés. C'est clair que ce n'est pas l'idée, mais c'est ma compréhension...

17/04/2021, 10h18
NoSmoking

Bonjour,

Citation:

Envoyé par laurentSc

Encore page blanche :(

! Important : les éléments inline ignorent les propriétés width et height.

Il te faut donc au moins mettre tes éléments <li> en inline-block ou passer ton élément en display:flex, tu devrais voir apparaître des choses.

Concernant l'utilisation de background-position, tu peux simplement utiliser les mots clé top, center, bottom attendu que tu as trois cas.

Citation:

/*les décalages sont mis au pif */

C'est justement le soucis, lorsque l'on utilise des valeurs en pourcentage, celles-ci sont relatives au conteneur, donc les valeurs négatives « poussent » le background vers le bas.

Tes remarques me semblent bonnes.

Mon nouveau CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
/* Cibler les éléments <li> appartenant à un élément de classe "icone" */
.icone li
{
    width: 512px;
    height: 200px;
    display: inline-flex;/* pour afficher chaque image sur une ligne horizontale */
    background: url("mon-image.png") no-repeat;
}
 
.icone-1 { background-position: center top; } /* center à l'horizontal pour être plus sûr de voir qqchose */
.icone-2 { background-position: center center; }
.icone-3 { background-position: center bottom; }

encore page blanche...
Pour le display, j'ai aussi essayé inline-block et flex.

17/04/2021, 12h09
laurentSc

Si tu as un exemple fonctionnel sous la main, il me paraît bien de m'en inspirer...(évidemment, j'ai cherché sur la toile mais rien trouvé).

En fait, je m'étais trompé et l'image n'était pas présente !

Maintenant, je vois quelque chose, mais pas ce que je souhaite...

D'abord, pour tout voir sur une seule ligne, j'ai réduit les dimensions de l'image : 200px x 200px.

Pour que les images soient à l'horizontal, mais pas à la vertical , il ne faut pas display:flex mais display:inline-flex.

Le problème qui reste est que c'est toujours le feu rouge qui apparaît. Pas moyen de faire apparaître les feux orange et vert. Comment faire STP ?

Mon CSS actuel :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 /* Cibler les éléments <li> appartenant à un élément de classe "icone" */ .icone li { width:200px; height:70px; display:inline-flex;/* pour afficher chaque image sur une ligne horizontale */ background:url("mon-image3.png") no-repeat; } .icone-1 { background-position: center top; } /* center à l'horizontal pour être plus sûr de voir qqchose */ .icone-2 { background-position: center center; } .icone-3 { background-position: center bottom; }
Le html est toujours celui du post #1.

17/04/2021, 16h57
mathieu
le sélecteur .icone li à un priorité supérieure à .icone-r donc c'est la propriété "background" qui écrase la valeur de "background-position".
https://dmouronval.developpez.com/tu...e-specificite/

pour régler ça au niveaux des priorités, vous pouvez faire cela par exemple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 .icone .icone-r { background-position : center top; } .icone .icone-o { background-position : center center; } .icone .icone-v { background-position : center bottom; }
17/04/2021, 18h05
laurentSc

:ccool: :merci:

Bon, pas la peine que je mette cet article dans mes favoris car dans 5 minutes, j'aurai oublié que je l'ai fait :( .

Mais c'était effectivement ça.

Citation:

Envoyé par laurentSc

Pour que les images soient à l'horizontal, mais pas à la vertical , il ne faut pas display:flex mais display:inline-flex.

il y avait quelque chose qui devait gêner l'affichage car par défaut flex est en flex-direction:row.

Citation:

Envoyé par mathieu

le sélecteur .icone li à un priorité supérieure à .icone-r donc c'est la propriété "background" qui écrase la valeur de "background-position".

Oui mais une bonne solution n'est pas de surcharger le sélecteur, mais d'alléger la propriété et donc ne pas utiliser la propriété raccourcie.
Avec la propriété raccourcie les valeurs absentes sont réinitialisées avec les valeurs par défaut initiales.

Tu pourrais donc également mettre juste
Code:

1 2 3 4 5 6 7 8 9 10 .icone li { width: 200px; height: 70px; display: inline-flex; background-image: url("mon-image3.png"); background-repeat: no-repeat; } .icone-1 { background-position: center top; } .icone-2 { background-position: center center; } .icone-3 { background-position: center bottom; }
Citation:

Envoyé par laurentSc

Si tu as un exemple fonctionnel sous la main, ...

A regarder : Horloge digitale, version sprite vertical.

17/04/2021, 21h29
laurentSc

Je confirme. Le CSS de NoSmoking marche très bien.

Sinon, bien content de m'en être sorti sans ton exemple : il est 50 fois plus compliqué que mon code :aie: et y a même un script en javascript...

Citation:

Envoyé par laurentSc

Sinon, bien content de m'en être sorti sans ton exemple : il est 50 fois plus compliqué que mon code :aie: ...

:nono: regarde le CSS concerné et compare, je te le mets ci-dessous :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 [class^="clock_"] { width: 38px; /* les dimensions sont à ajuster */ height: 52px; /* fonction de l'image utilisée */ background-image: url(images/chiffres-rouge-v.png); background-position: 0 100%; /* position par défaut sur le séparateur */ background-repeat: no-repeat; background-size: 100% 1100%; /* hauteur 11 x 100% */ } /* décalage des background en y */ .clock_0 { background-position: 0 0%;} .clock_1 { background-position: 0 10%;} .clock_2 { background-position: 0 20%;} .clock_3 { background-position: 0 30%;} .clock_4 { background-position: 0 40%;} .clock_5 { background-position: 0 50%;} .clock_6 { background-position: 0 60%;} .clock_7 { background-position: 0 70%;} .clock_8 { background-position: 0 80%;} .clock_9 { background-position: 0 90%;}
... il y a plus d’éléments mais le principe et le code est identique à l'exception des dimensions de l'image en background qui sont exprimées en pourcentage ce qui offre plus de souplesse.

Citation:

... et y a même un script en javascript...

il n'est pas à prendre en compte dans le cas qui intéresse cette discussion.

Citation:

Envoyé par NoSmoking

il n'est pas à prendre en compte dans le cas qui intéresse cette discussion.

OK, mais il m'a fait peur, vu que je ne le savais pas.

Petite question sur le CSS. [class^="clock_"]. Tu peux décortiquer ? Ce qui m'échappe : le ^ , les guillemets et le _ .

D'autre part, la création des <span>, elle est bien faite dans le js, non ?
Code:

1 2 3 4 5 6 7 / rajout de 8 <span> dans la <div id="clock"> const elClock = document.getElementById("clock"); for (let ind = 0; ind < tabValeurs.length; ind += 1) { tabSpans.push(document.createElement("SPAN")); // ajout de l'ensemble des <span> elClock.append(...tabSpans);

20/04/2021, 08h57
NoSmoking
Citation:

Petite question sur le CSS. [class^="clock_"]. Tu peux décortiquer ? Ce qui m'échappe : le ^ , les guillemets et le _ .

Il s'agit d'un sélecteur d'attribut, celui-ci est reconnaissable grâce son crochet ouvrant et fermant. L'attribut ciblé dans le cas présent est class.

• L'opérateur ^= permet de cibler un élément dont la valeur de l'attribut commence par ce qui suit le signe égal.

Pour prendre ton exemple :
Code:

1 2 3 [class^="icone-"] { /* les déclarations */ }
serait équivalent à :
Code:

1 2 3 4 5 .icone-1, .icone-1, .icone-3 { /* les déclarations */ }
... ces trois classes commençant par "icone-".

Ce sélecteur n'est pas réputé pour être performant mais n'apporte pas de spécificité (poids) supplémentaire.

• Les guillemets encadre simplement la valeur recherchée, cela peut marcher également sans mais pas dans tous les cas.

• Le _ n'est rien d'autre qu'un caractère comme un autre.

Citation:

D'autre part, la création des <span>, elle est bien faite dans le js, non ?

Oui, comme on doit récupérer les références à ces éléments autant tout faire en JavaScript.
20/04/2021, 09h36
laurentSc

Merci pour ces explications claires. Tu en rajoutes même une sur le sélecteur d'attribut, fort utile, que je n'avais même pas mentionnée...

Mais je rajoute cette remarque : même si sur le coup (quand je te lis), je comprends, il est probable que je vais oublier (même de l'avoir déjà vu !). En effet, depuis mon traumatisme crânien (en 2000 !), j'ai une très mauvaise mémoire. Pour compenser, plusieurs moyens :
- la concentration (j'ai commencé le développement web en 2006, donc tout ce que je connais en html, css, js, php, sql, etc date d'après)
- je note beaucoup (la difficulté est de se souvenir que c'est noté et où !)