Discussion :

[RinaBK]

Bonjour tout le monde,

Dans la partie membre de mon site, je suis en train de réaliser une partie qui permettra aux membres de choisir un avatar parmi ceux que j'ai mis à disposition.
Avec du PHP, je vais simplement chercher les noms des fichiers dans un dossier que j'affiche grâce à une boucle for().
A l'intérieur de ma boucle for(), j'ai mon code HTML qui affiche les images :

Code html :

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

1
2
3
4
5
<input type="radio" name="avatars" id="<?=$files;?>" style="display:none;" />
<label for="<?=$files;?>" class="affiche">
	<img src="https://www.gwanda.ch/images/avatars/<?=$_POST['categorie'].'/'.$files;?>" class="image" alt="" />
	<div class="texteAffiche">SELECT</div>
</label>

Mon problème se trouve sur mon code CSS...
Voici mon

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
25
26
27
28
29
30
31
32
.affiche {
	position:relative;
}
 
.image {
	z-index:1;
}
 
.texteAffiche {
	color: #FFFFFF;
	text-shadow: 2px 2px 5px red;
	z-index:2;
	right: 10px;
	bottom: 10px;
	position: absolute;
	display: none;
}
 
.affiche:hover .texteAffiche {
	display: inline-block;
	visibility: visible;
}
 
input[type="radio"]:hover+label img {
	cursor: pointer;
 
} 
 
input[type="radio"]:checked+label img {
	border: 5px solid #ADBC81;
	opacity: 0.5;
}

Dans l'ensemble, ce code fonctionne parfaitement bien. Ce que je ne comprends pas du tout, c'est que sous IE et Chrome, je n'ai aucun souci, mais avec Firefox, j'ai un gros problème avec le texte qui s'affiche au survole de l'image. Sur le printscreen ci-dessous, mon pointeur cible la photo rouge (1e ligne, 2e image) et l'on voit bien le texte qui s'affiche sur l'image.



Maintenant, si je place le pointeur de ma souris sur la photo de la 2e ligne, 1e image (turquoise) , mon texte s'affiche sur la dernière image de la ligne du dessus.



Ce que je ne comprends pas, c'est que ce problème est uniquement avec Firefox, mais je n'ai pas ce problème si j'utilise IE ou Chrome.
Es-ce que dans mon code CSS il y a quelque chose qui pose problème? Est-ce que quelqu'un a une idée ou une correction ou autre à me donner?
Merci d'avance

[ABCIWEB]

Je ne vois rien qui me choque dans ton code. Faudrait voir dans la console et l'inspecteur de code de firefox le code html généré pour peut-être mieux comprendre. Après je ne suis pas le meilleur spécialiste en css, d'autres trouveront probablement, personnellement j'ai tendance à faire ces comportements en javascript car c'est plus portable, plus fiable et que je vais plus vite. Les puristes te diront que ça prend un chouia (théorique) plus de ressources, et effectivement si tu ne fais qu'un site et que tu veux t'appliquer avec les css, pourquoi pas, mais si tu as beaucoup de comportements à faire, javascript est beaucoup plus productif surtout si tu utilises une librairie.

[NoSmoking]

Bonjour,

@RinaBK :
je n'avais jamais vu cette différence de rendu auparavant !

• On va commencer par des remarques concernant le code HTML qui est non conforme, on ne met pas d'élément <div>, élément de type bloc, dans un élément <label>, élément de type inline, dans ton cas autant mettre un élément <span> par exemple :

Code html :

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

1
2
3
4
5
<input>
<label>
  <img>
  <span>...</span>
</label>

...ceci étant cela ne règle pas le soucis !

• Autre chose il te faut mettre une value aux <input> sans quoi tu ne pourra pas récupérer de valeur côté serveur.

• Concernant le soucis rencontré, il suffit de mettre tes éléments <label> en inline-block, cela marche mais ne me demande pas pourquoi, un dysfonctionnement de FireFox ... !

Code :

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

1
2
3
4
5
.affiche {
  position:relative;
  display:inline-block;
  cursor: pointer;       /* autant le mettre ici */
}

d'autres solutions pourraient être appliquées.

• Tu peux te passer avantageusement de code HTML en passant par un pseudo élément :after pour remplacer tes <span> redondants, cela t'évite des lignes de code superflues.

Code html :

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

1
2
3
4
<input type="radio" name="avatars" id="<?=$files;?>" value="<?=$files;?>">
<label for="<?=$files;?>" class="affiche">
  <img src="https://www.gwanda.ch/images/avatars/<?=$_POST['categorie'].'/'.$files;?>" class="image" alt="">
</label>

...en ajoutant le CSS suivant en reprenant tes données :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.affiche:after {
  content: "SELECT";
  display: none;
  z-index: 2;
  position: absolute;
  right: 10px;
  bottom: 10px;
  text-shadow: 2px 2px 5px red;
  color: #FFF;
}
.affiche:hover:after {
  display: block;
}

@ABCIWEB :
pas sûr que le JavaScript résolve ce genre de soucis, mais bon àvoir car non testé !

[RinaBK]

Tout d'abord, merci à vous deux de m'avoir répondu


@ABCIWEB :
Je ne suis pas très douée en JS et pour moi, le CSS est peut-être plus adapté à ce genre de manipulation. Ou peut-être que ce genre de manipulation est plus simple à faire en CSS étant donné que je suis un peu plus à l'aise avec le CSS. Mais je t'avouerais que j'y ai pensé à de nombreuse reprise lorsque je me suis retrouvée confrontée à mon problème. Mais voilà, des fois il faut savoir persévérer si l'on veut réussir


@NoSmoking :
J'ai bien étudié tes corrections, et je te remercie.

• On va commencer par des remarques concernant le code HTML qui est non conforme, on ne met pas d'élément <div>, élément de type bloc, dans un élément <label>, élément de type inline, dans ton cas autant mettre un élément <span> par exemple :

Au départ, j'avais mis des <span>, car moi aussi cela me semblait plus correct. Mais je l'ai avais modifié en <div> lorsque je me suis confrontée à mon problème, histoire de tester. J'avais oublié de les remettre en <span>

• Autre chose il te faut mettre une value aux <input> sans quoi tu ne pourra pas récupérer de valeur côté serveur.

En effet, tu as tout à fait raison! J'avoue les avoir oubliée, tellement j'étais crochée sur le bug avec Firefox. Je m'en serait rendue compte au moment où j'aurais réaliser mon code de contrôle en PHP pour l'enregistrement des données afin de récupérer ma variable $_POST

• Concernant le soucis rencontré, il suffit de mettre tes éléments <label> en inline-block, cela marche mais ne me demande pas pourquoi, un dysfonctionnement de FireFox ... !

Justement ! Surtout que j'ai testé sous d'autres navigateurs et que tout s'affiche correctement ! Moi qui pensait qu'avec les années il y aurait moins de problèmes lié aux compatibilité des navigateurs, j'avoue que mon scepticisme reprends vie...

• Tu peux te passer avantageusement de code HTML en passant par un pseudo élément :after pour remplacer tes <span> redondants, cela t'évite des lignes de code superflues.

Lorsque j'ai eu l'idée de réaliser cette mise en forme, j'étais tombée sur un site utilisant le principe de :after / :before mais mon texte ne s'affichait pas ou peut-être qu'il s'affichait à un endroit hors champs et que je ne le voyait pas. Bon, c'est vrai que je redécouvre le CSS car il a sérieusement évolué ces 10 dernières années et j'ai encore beaucoup de chose à découvrir ! Ceci-dit, j'ai préféré après-coup d'utiliser les class étant donné que c'est la forme dont ma cervelle est habituée. J'ai tout de même testé le code CSS que tu m'as proposé et effectivement, mes textes s'affiche hors champs. Bon, je pourrais éventuellement modifier quelques truc pour les remettre en place. D'ailleurs, une fois mon bug résolu, je devrais rendre mon code CSS plus aéré et plus clair. Mais pour l’instant, vu que je test tout ce que je peux tester pour comprendre d'où vient ce bug sous Morzilla, j'ajoute, je supprime, bref, je code et décode, donc je ne regarde plus trop l'aération de mon code. Mais il est clair qu'une fois mon bug arrangé, c'est une chose que je vais devoir peaufiner


Ceci-dit, j'ai passé presque toute la nuit à essayé de comprendre ce bug lié à Morzilla, mais en vains... Je me suis même acharnée sur mon code PHP en me disant que peut-être ce bug viendrait de là, mais rien à faire... Je peux modifier tout ce que je veux sur mon code PHP ou CSS, le problème est toujours présent.. C'est à rien y comprendre

[RinaBK]

J'AI TROUVÉ !!!!
Vous n'allez pas me croire mais le problème ne venait pas du code CSS, ni d'aucun langage d'ailleurs
En fait, mes images s'affichent garce à ce code :

Code HTML :

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
<div align="center">
	<?
        $avatars = array();
        if (!empty($_POST['categorie'])) {
                $files = '';
                $fpath = 'images/avatars/'.$_POST['categorie'].'/';
                $fopen = openDir($fpath);
                while ($files = readDir($fopen)) { if (($files != '.') && ($files != '..') && ($files != 'index.htm')) { $avatars[] = array($_POST['categorie'],$files); } }
        }
        ?>
	<form method="POST">
		<input type="hidden" name="categorie" value="<?=$_POST['categorie'];?>">
		<?
                for ($i = 0; $i < count($avatars); $i++) {
                        ?>
			<input type="radio" name="avatars" value="<?=$avatars[$i][1];?>" id="<?=$avatars[$i][1];?>" style="display:none;" />
			<label class="affiche" for="<?=$avatars[$i][1];?>">
				<img src="https://www.gwanda.ch/images/avatars/<?=$avatars[$i][0].'/'.$avatars[$i][1];?>" alt="<?=$avatars[$i][1];?>" class="image" />
				<span class="texteAffiche">Cliquez pour choisir l&rsquo;avatar</span>
				<span class="texteSelect"><i class="fas fa-check"></i></span>
			</label>
			<?
                }
                ?>
		<br />
		<br />
		<input type="submit" name="update" value="<?=$bt['register'];?>" class="BT">
	</form>
</div>

Donc, à première vue, ce code est correct et ne comporte aucune erreur, nous sommes d'accord là dessus. Grosso modo, le code affiche le bouton radio qui est invisible en premier. Ensuite, l'image associée au bouton radio, etc.
Étant donné que c'est la largeur de la page qui va mettre les images à la ligne, sur Morzilla, le bouton radio se plaçait à la fin de la ligne précédente et l'image n'ayant plus de place sur la ligne, s'affichait sur la ligne du dessous. Donc, effectivement, lorsque je plaçais mon curseur sur la première image d'une ligne, l'effet ne se plaçait pas au bon endroit d'où ce bug lié seulement à Morzilla. J'ai donc ajouté la ligne PHP suivante :

Code PHP :

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

if (($i+1)%4 == 0) { echo '<br />'; } else {}

..Et comme par miracle, tout est rentré dans l'ordre !
Tout ce temps de recherche pour un simple retour à la ligne Je m'en suis rendue compte en recodant complètement mon code PHP, HTML et CSS et lorsque j'ai vu l'emplacement de l'affichage du bouton radio, j'ai cru tomber dans les pommes! Si seulement j'avais eu l'idée de rendre le bouton radio visible, j'aurais encore des cheveux sur ma caboche

En tout cas, je vous remercie infiniment pour votre aide et du temps que vous m'avez accordé pour mon soucis !! C'est super sympa de votre part

[ABCIWEB]

et lorsque j'ai vu l'emplacement de l'affichage du bouton radio, j'ai cru tomber dans les pommes! Si seulement j'avais eu l'idée de rendre le bouton radio visible, j'aurais encore des cheveux sur ma caboche

Comme je le disais plus haut, en cas de bug il faut toujours commencer par regarder le code généré dans l'inspecteur de code de la console du navigateur. En regardant ou en survolant les éléments tu aurais vu que le bouton radio n'était pas positionné là où tu le pensais