Discussion :

[friendofweb]

Bonjour,

Voilà, j'expérimente un code tiré d'un livre, ça ne fonctionne pas et je ne vois pas pourquoi...
Voici les codes :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<label>
    <input type="checkbox" id="cbox1" value="checkbox1">
    Voici la première case.
</label>
<div class="testimg">
 &nbsp; <!-- Sinon rien ne s'affiche -->
</div>

Fichier : exercice16 ("css")

Code css :

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
 
/* 1 */
/* Utilisation d'un sprite */
intput[type="checkbox"]{
			background-image: url("../img/test/sprite.jpg");
			background-position: 0 0;
			} /* Ne fonctionne pas */
/* 2 */
/* Une fois, la checkbox cochée, on décale l'image d'arrière-plan */
/* pour afficher la partie correspondant à une checkbox cochée */
intput[type="checkbox"]:checked {
				background-position: 0 16px;
				} /* Ne fonctionne pas */
/* 3 */
/*Test pour voir si le chemin est correct, oui !*/
.testimg {background-image: url("../img/test/sprite.jpg");
background-position:0 16px;} /* Fonctionne*/

Le but est de faire l'exercice, d'utiliser pour la première fois la technique du "sprite". J'ai créé une image d'une largeur de 16px sur une hauteur de 32px.
Seul le code 3 fonctionne,
Je test cela sous Google Chrome,
Via f12, seul le code 3 montre le fichier nommé exercice16.css
Via f12, le code 1 et 2, n'affichent pas le fichier exercice16.css

Concrètement, le look par défaut d'une case à côché reste, comme si le fichier exercice16 est ignoré.
Pourriez-vous m'aider s'il vous plaît ?

Cordialement,

[JefReb]

Je n'ai pas l'image pour tester, mais en rajoutant à background-position:

-o- pour Opera
-moz- pour Gecko (Mozilla)
-webkit- pour Webkit (Chrome, Safari, Android...)
-ms- pour Microsoft (Internet Explorer)
-khtml- pour KHTML (Konqueror)

cela marcherait-il? et dans les autres navigateurs? Firefox, etc.

[friendofweb]

Bonjour,

Merci pour ta réponse, j'ai testé, c'est pire, dans le sens où pour le code 3 (le seule fonctionnant), c'est les 16 premiers pixels qui sont affichés,
La propriété : background-position:0 16px; doit normalement afficher non pas les 16 premiers mes les 16 derniers pixels, d'où la hauteur définie à 32px.

Quand la case n'est pas coché, j'aimerais que ce soit les 16 premiers pixels qui soit affichés. (par rapport à la hauteur de l'image)
Quand la case est coché, j'aimerais que ce soit les 16 derniers pixels qui soit affichés.

Ceci dit, je ne pense pas qu'il faille utiliser les préfixes que tu proposes, puisque aucune documentation concernant background-position: ne parle de ces préfixes.

Ce qui m'intrigue, c'est que les codes 1 et 2 viennent d'un livre, j'imagine que l'auteur à testé le code avant de l'écrire.

Comme ça fonctionne pour le code 3, ce n'est ni le chemin pointant vers l'image, ni l'image ni la syntaxe proposée par le livre.
Peut-être qu'il faut chercher au niveau des sélecteurs ?

J'ai rajouté l'image à la discussion, ne faites pas attention à son look, c'est juste un test. (Les 16 premiers pixels sont en blanc)

[Invité]

Bonjour,

• intput ???

Une solution :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<p>
    <span><input type="checkbox" id="cbox1" value="checkbox1" />
    <label for="cbox1">Voici la première case.</label></span>
 
    <span><input type="checkbox" id="cbox2" value="checkbox1" />
    <label for="cbox2">Voici la 2ème case.</label></span>
</p>

Code css :

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
 input[type="checkbox"] {
   visibility: hidden; /* NE PAS mettre en display:none; */
 }
 
input[type="checkbox"] ~ label {
   position: relative;
 }
 
 input[type="checkbox"] ~ label:after {
   position: absolute;
   display: block;
   width: 16px;
   height: 16px;
   content: '';
   top:0; left:-20px;
 
   border: 1px solid #ccc;
   background-image: url("https://www.developpez.net/forums/attachments/p255955d1490003853/webmasters-developpement-web/mise-page-css/pseudo-classe-checked-selecteur-d-attribut-background-position/sprite.gif");
   background-position: 0 0;
 }
 
 input[type="checkbox"]:checked ~ label:after {
   background-position: 0 16px;
 }

[friendofweb]

Pourquoi je n'ai pas (bien) relu le code que j'ai posté AVANT de le poster ? Réponse: la précipitation

Un grand merci !