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

[RinaBK]

J'avais regardé sur la console du navigateur, mais vu mon code PHP, il était normal que les balises des images et des boutons radio soient tous sur la même ligne. Donc, il était impossible de voir cela depuis la console. La seule et unique manière de s'en rendre compte, c'était de réactiver la visualisation du bouton radio.

[ABCIWEB]

Normalement quand tu cliques sur un élément ou que tu le survole dans l'inspecteur de code de la console, cela le surligne dans ta page html même si c'est un élément en visibility hidden.

[RinaBK]

Heu... Non... Soit je ne suis pas douée quant à l'utilisation de la console du navigateur, soit il doit y avoir un souci, car chez moi, le bouton radio n'apparait pas dans la page si je le sélectionne dans la console
Et de toute façon, ce n'est pas la console qui va me dire si j'ai oublié de mettre un <br />

[ABCIWEB]

Oui je parlais des éléments en visibility hidden, effectivement ça ne fonctionne pas pour les éléments en display none.

Mais au fait si tu mets un br, tu n'as plus la possibilité d'avoir un nombre d'images variables en fonction de la largeur de la page si j'ai bien compris ton code ?

Il y a moyen d'avoir un code plus simple, par exemple:

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
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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<title></title>
<meta name="Description" content = "">
<style>
.avatar {
  position:relative;
  display:inline-block;
}
 
.avatar img  {
  z-index:1;
  border: 5px solid transparent;
  cursor: pointer;
}
 
.avatar:after {
  content: "SELECT";
  display: none;
  z-index: 2;
  position: absolute;
  right: 10px;
  bottom: 10px;
  text-shadow: 2px 2px 5px red;
  color: #FFF;
  cursor: pointer;
}
 
.avatar:hover:after {
  display: block;
}
 
.avatar input[type="radio"] {
  display:none;
}
 
.avatar input[type="radio"]:checked+img {
  border: 5px solid #ADBC81;
  opacity: 0.5;
}
</style>
</head>
<body>
<div>
<form action="#" method="post">
<label class="avatar">
	<input type="radio" name="avatars" value="1">
	<img src="https://www.developpez.net/forums/avatars/1764255-rinabk.gif" alt="" />  
</label><label class="avatar">
	<input type="radio" name="avatars" value="2">
	<img src="https://www.developpez.net/forums/avatars/1764255-rinabk.gif" alt="" />  
</label><label class="avatar">
	<input type="radio" name="avatars" value="3">
	<img src="https://www.developpez.net/forums/avatars/1764255-rinabk.gif" alt="" />  
</label><label class="avatar">
	<input type="radio" name="avatars" value="4">
	<img src="https://www.developpez.net/forums/avatars/1764255-rinabk.gif" alt="" />  
</label><label class="avatar">
	<input type="radio" name="avatars" value="5">
	<img src="https://www.developpez.net/forums/avatars/1764255-rinabk.gif" alt="" />  
</label><label class="avatar">
	<input type="radio" name="avatars" value="6">
	<img src="https://www.developpez.net/forums/avatars/1764255-rinabk.gif" alt="" />  
</label>
<!-- Juste pour contrôle durant le développement je fais afficher la valeur du bouton radio dans une alerte-->
<p><input type = "submit" name="envoyer" onclick="alertForm(this.form)"></p>
</form>
</div>
<script>
function alertForm (f){
var data = new FormData(f);
alert(data.get('avatars'));
}
</script>
</body>
</html>

Il y a beaucoup moins de html avec cette méthode et tu peux cibler tous tes éléments avec la classe du label. Avec php il ne te reste plus qu'à alimenter la valeur du bouton radio, la source de l'image et le alt. Et pas de problème si tu réduis la fenêtre de ton navigateur les images passent à la ligne mais le comportement reste ok.

Remarque que j'ai mis les balises d'ouverture des label juste après la fermeture des balises précédentes sinon il y a le problème des white space qui ajoutent des espaces variables suivant les navigateurs (si j'étais aller à la ligne pour chaque nouveau label). Heureusement il n'y en a pas quand on crée les lignes dans une boucle basique avec php.

Après concernant ton code php, on utilise foreach pour lister les éléments d'un tableau et j'ai l'impression que tu te complique beaucoup la vie au niveau de ta programmation. Rendez-vous dans le forum php si tu veux en savoir plus.

[RinaBK]

En effet, je me rends compte depuis quelques jours que je ne suis plus du tout à jour avec mes codes... J'ai un sacré gros retard et j'ai énormément de chose à revoir et à réapprendre ! Par exemple j'ai passé la nuit à découvrir la PDO que je ne connaissais pas du tout. Lorsque j'ai repris la programmation, il y a quelques semaines, j'étais encore en sql_ et mon serveur ne l’acceptait plus, donc j'ai du passé en sqli_ qui lui aussi commence à être dépassé. Je pense que je vais suivre ton conseil et ouvrir un nouveau sujet dans la salle PHP/MySQL pour revoir tous mes codes. Car je me rends compte que ma manière de coder n'est plus du tout adaptée à ce qui se fait aujourd'hui. Je vais mettre de côté ce sujet pour l'instant et j'y reviendrais plus tard, car je me rends compte que je vais devoir recoder toutes les pages de mon site. Donc, pour ce qui est du CSS, je vais devoir de toute façon me remettre à jour en même temps que les pages de mon site, vu que j'utilise principalement le CSS pour les mises en forme des pages.

Concernant la gestion de mes avatars, j'ai un gros bug au niveau de la BDD et PHP et quoi que je fasse, impossible d'arranger le problème en l'état. Le problème est justement ma manière de coder qui n'est plus d'actualité. Donc, finaliser le CSS sur cette page ne servira à rien si la gestion de mes données n'est pas conforme et comporte des codes erronés. Quand mes lignes de codes seront à jour, c'est avec plaisir que je prendrais ton exemple CSS que tu m'as donné pour l'intégrer dans ma page

Je tiens tout de même à te dire un grand merci pour ton aide ici !!

[NoSmoking]

Je subodorais bien un soucis avec les « whitespace », cela faisait longtemps

É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.

Les éléments en display:none ne crée pas de boîte invisible, il ne crée aucune boîte du tout et ne participe pas de ce fait au flux. Il en aurait été de même en mettant ces éléments en position:absolute et une position left:-9999em par exemple.

On est en face d'un problème de gestion du « whitespace » existant en fin de ligne écran. Pas top sur ce coup FireFox.
En mettant une bordure à gauche on voit la position du début de l'élément qui est pris en compte différemment par les moteurs de rendu.

Je ne reviendrais pas sur ton astuce d'ajout de <br> qui est peut-être la moins bonne des solutions pour des raisons déjà soulignées par ABCIWEB.

Concernant l'organisation du code HTML je préconise, tout comme ABCIWEB, une structure plus « light » en intégrant l'<input> dans le <label>, moins de code...

Pour ce qui est de supprimer les « whitespace » j'avais écris : Espace entre éléments « inline ».
Dans ton cas je pense que l'utilisation d'un conteneur en display:inline-flex est une bonne solution.

Je te mets également un fichier de test pour voir le phénomène :

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
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>« whitespace » en fin de ligne sur FireFox</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d2101245">
<meta name="description" content="Influence du « whitespace » en fin de ligne écran sous FireFox">
<style>
html, body {margin: 0;padding: 0;font: 1em/1.5 Verdana,sans-serif;}
h1, h2, h3 {margin: .25em 0;color: #069;}
time {float: right;margin: .5em;font-size: 0.9em;color: #888;}
main {display: block;margin: auto;max-width: 60em;}
[name="toggle"] + label{
  padding: .25em;
  color: #999;
  cursor: pointer;
}
[name="toggle"]:checked + label {
  color: #069;
  background-color: #EEF;
}
pre[id^="css"] {
  display: none;
  min-height: 6em;
  font-family: Courier New;
  color: #059;
  max-width: 80%;
  margin: 1em auto;
}
#inline-block:checked ~ .wrapper label {
  display: inline-block;
}
#inline-flex:checked ~ .wrapper {
  display: inline-flex;
  flex-wrap: wrap;
  margin-left: 10%;
}
#flux-normal:checked ~ #css-flux-normal,
#inline-flex:checked ~ #css-inline-flex,
#inline-block:checked ~ #css-inline-block {
  display: block;
}
img {
  min-width: 6em;
}
.wrapper {
  max-width: 80%;
  margin: auto;
}
/*======================*/
.affiche input[type="radio"] {
  display: none;
}
.affiche label{
  position:relative;
  cursor: pointer;
  border: 1px solid #CCC;
  border-left: 2px solid #F00;
}
.affiche label::after {
  content: "SELECT";
  display: none;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  font-weight: bold;
  color: #069;
  background: rgba(255,255,255,.5);
}
.affiche label:hover:after {
  display: block;
}
.affiche img {
  border: 5px solid #FFF;
}
.affiche input[type="radio"]:checked + img {
  border: 5px solid #ADBC81;
  opacity: 0.5;
}
</style>
<body>
<main>
  <header>
    <time datetime="2021-01-25">Jan. 2021</time>
    <h1>« whitespace » en fin de ligne sur FireFox</h1>
  </header>
  <section>
    <h2>Avec « whitespace »</h2>
    <input id="flux-normal" type="radio" name="toggle" checked><label for="flux-normal">flux normal</label>
    <input id="inline-block" type="radio" name="toggle"><label for="inline-block">display:inline-block <i>sur les labels</i></label>
    <input id="inline-flex" type="radio" name="toggle"><label for="inline-flex">display:inline-flex <i>sur le conteneur</i></label>
    <pre id="css-flux-normal">.wrapper {
}
.wrapper label {
}</pre>
    <pre id="css-inline-block">.wrapper label {
  display: inline-block;
}</pre>
    <pre id="css-inline-flex">.wrapper {
  display: inline-flex;
  flex-wrap: wrap;
}</pre>
    <div class="wrapper affiche">
      <label>
        <input type="radio" name="avatar" value="avatar-00"/>
        <img src="https://www.developpez.com/images/logos/robot.png" alt="" />
      </label>
      <label>
        <input type="radio" name="avatar" value="avatar-01"/>
        <img src="https://www.developpez.com/images/logos/robot.png" alt="" />
      </label>
      <label>
        <input type="radio" name="avatar" value="avatar-02"/>
        <img src="https://www.developpez.com/images/logos/robot.png" alt="" />
      </label>
      <label>
        <input type="radio" name="avatar" value="avatar-03"/>
        <img src="https://www.developpez.com/images/logos/robot.png" alt="" />
      </label>
      <label>
        <input type="radio" name="avatar" value="avatar-04"/>
        <img src="https://www.developpez.com/images/logos/robot.png" alt="" />
      </label>
      <label>
        <input type="radio" name="avatar" value="avatar-05"/>
        <img src="https://www.developpez.com/images/logos/robot.png" alt="" />
      </label>
      <label>
        <input type="radio" name="avatar" value="avatar-06"/>
        <img src="https://www.developpez.com/images/logos/robot.png" alt="" />
      </label>
      <label>
        <input type="radio" name="avatar" value="avatar-07"/>
        <img src="https://www.developpez.com/images/logos/robot.png" alt="" />
      </label>
      <label>
        <input type="radio" name="avatar" value="avatar-08"/>
        <img src="https://www.developpez.com/images/logos/robot.png" alt="" />
      </label>
      <label>
        <input type="radio" name="avatar" value="avatar-09"/>
        <img src="https://www.developpez.com/images/logos/robot.png" alt="" />
      </label>
      <label>
        <input type="radio" name="avatar" value="avatar-10"/>
        <img src="https://www.developpez.com/images/logos/robot.png" alt="" />
      </label>
      <label>
        <input type="radio" name="avatar" value="avatar-11"/>
        <img src="https://www.developpez.com/images/logos/robot.png" alt="" />
      </label>
      <label>
        <input type="radio" name="avatar" value="avatar-12"/>
        <img src="https://www.developpez.com/images/logos/robot.png" alt="" />
      </label>
      <label>
        <input type="radio" name="avatar" value="avatar-13"/>
        <img src="https://www.developpez.com/images/logos/robot.png" alt="" />
      </label>
      <label>
        <input type="radio" name="avatar" value="avatar-14"/>
        <img src="https://www.developpez.com/images/logos/robot.png" alt="" />
      </label>
    </div>
  </section>
  <section>
    <h2>Sans « whitespace »</h2>
    <div class="wrapper affiche">
      <label><input type="radio" name="avatar" value="avatar-00"/><img src="https://www.developpez.com/images/logos/robot.png" alt="" /></label><label><input type="radio" name="avatar" value="avatar-01"/><img src="https://www.developpez.com/images/logos/robot.png" alt="" /></label><label><input type="radio" name="avatar" value="avatar-02"/><img src="https://www.developpez.com/images/logos/robot.png" alt="" /></label><label><input type="radio" name="avatar" value="avatar-03"/><img src="https://www.developpez.com/images/logos/robot.png" alt="" /></label><label><input type="radio" name="avatar" value="avatar-04"/><img src="https://www.developpez.com/images/logos/robot.png" alt="" /></label><label><input type="radio" name="avatar" value="avatar-05"/><img src="https://www.developpez.com/images/logos/robot.png" alt="" /></label><label><input type="radio" name="avatar" value="avatar-06"/><img src="https://www.developpez.com/images/logos/robot.png" alt="" /></label><label><input type="radio" name="avatar" value="avatar-07"/><img src="https://www.developpez.com/images/logos/robot.png" alt="" /></label><label><input type="radio" name="avatar" value="avatar-08"/><img src="https://www.developpez.com/images/logos/robot.png" alt="" /></label><label><input type="radio" name="avatar" value="avatar-09"/><img src="https://www.developpez.com/images/logos/robot.png" alt="" /></label><label><input type="radio" name="avatar" value="avatar-10"/><img src="https://www.developpez.com/images/logos/robot.png" alt="" /></label><label><input type="radio" name="avatar" value="avatar-11"/><img src="https://www.developpez.com/images/logos/robot.png" alt="" /></label><label><input type="radio" name="avatar" value="avatar-12"/><img src="https://www.developpez.com/images/logos/robot.png" alt="" /></label><label><input type="radio" name="avatar" value="avatar-13"/><img src="https://www.developpez.com/images/logos/robot.png" alt="" /></label><label><input type="radio" name="avatar" value="avatar-14"/><img src="https://www.developpez.com/images/logos/robot.png" alt="" /></label>
    </div>
  </section>
  <footer>
    <p>Voir la <a href="https://www.developpez.net/forums/showthread.php?t=2101245">discussion sur Developpez.com</a>
  </footer>
</main>
</body>

Voilà pour ma contribution même si je suis bien moins réactif que vous, la nuit je dors et j'ai donc tous mes cheveux

[ABCIWEB]

@NoSmoking merci pour l'exemple avec flex-inline que je ne connaissais pas. D'ailleurs au passage il y pas mal de syntaxes que je ne connaissais pas dans ton exemple. En tant que développeur fullstack je privilégie surtout javascript et php et par manque de temps css/html viennent bien après, ce qui explique aussi ma préférence pour les comportements en javascript qui sont aussi souvent plus portables. Mais c'est vrai que l'on peut faire beaucoup de choses aujourd'hui avec html/css, juste le problème c'est que cela devient un travail à plein temps. Heureusement qu'on a un NoSmoking (je veux dire un spécialiste) sous la main pour mettre en évidences les "nouveaux" trucs sympas. Enfin bref merci pour tes contributions.

Cela dit dans ce cas précis à partir du moment ou l'on met l'input à l'intérieur du label et le label en inline-block, il n'y a plus que l'espacement entre les label qui peut varier et ce problème n'existe plus si l'on génère le code en php. Mais le flex-inline est intéressant à connaître quand on écrit du code en dur, sinon avant, plutôt que de faire coller les balises, j'utilisais plutôt le système des commentaires pour avoir un code lisible et permettre des retours lignes sans être soumis aux problème des white space. Je ne donne pas d'exemple car même si ça fonctionne bien, ça fait du code inutile en plus dans le html et si on peut faire l'équivalent avec deux lignes de css, le css est la meilleure solution.

@RinaBK Sage décision de te perfectionner avant de continuer ton projet. C'est vrai que ton code php pique les yeux, et que l'on se dit que l'on aimerait pas prendre la suite. Beaucoup de complications pour faire des choses simples, si bien qu'on se demande ce qu'il adviendra quand les choses deviendront réellement compliquées.

C'est bien que tu aies fait le diagnostic toi-même et excellent choix aussi pour pdo. A mon avis tu peux y passer plusieurs jours, ce ne sera pas du temps perdu et effectivement c'est beaucoup plus convivial que mysqli, et plus facilement évolutif aussi.

Apparemment il te manque aussi des bases sur la manipulation des tableaux et ça aussi c'est l'un des prérequis indispensables pour être à l'aise avec php. C'est aussi très complémentaire à PDO. Donc la maitrise de PDO et des tableaux devraient être à mon avis ta priorité. Plus tard et pour avoir des sites plus conviviaux, parfois aussi pour faciliter la programmation, il sera bien également de faire un tour du côté d'Ajax.

Après dans des sites WEB 2.0 tu passeras probablement plus de temps côté javascript que côté php mais comme déjà dit le minimum en php qui te serviras le plus souvent c'est les requêtes et la manipulation des tableaux.

A bientôt

[RinaBK]

Tout d'abord, merci à vous deux pour vos réponses !!

Effectivement, je n'y avais plus du tout pensé aux flex !! Le pire de tout, c'est que cet été j'avais aidé un ami à faire son site en responsive. D'ailleurs, j'avais même coder quelques pages pour tester et me remettre un peu dans le bain. Clair que je devrais un peu plus dormir la nuit Mais impossible de fermer les yeux lorsque j'ai pleins de lignes de codes qui s’agglutine autour de ma cervelle

Ceci-dit, je vais garder bien au chaud les deux versions lorsque je reviendrais sur l'édition de mes avatars. Car effectivement, elles sont plus adaptée et beaucoup mieux construites que mes CSS de départ. En tout cas, un grand merci à vous deux


@ABCIWEB, En effet, quand je me suis remise à coder, je me suis vite rendue compte que je n'étais plus du tout à jour... Au départ, je me suis dis "Bon, on verra bien..", mais effectivement dès que les choses sont devenue un peu plus compliquées, ce fut une vraie catastrophe. Alors, j'ai commencé à faire quelques recherches et j'ai découvert pas mal de chose comme la PDO. En plus, vu que j'ai appris à coder toute seule, j'ai toujours eu de très grosses lacunes sur certains points qui était assez difficile à comprendre à l'époque lorsque l'on ne sait pas l'anglais. Vu que de nos jours il y a énormément de tutoriel en français, je vais enfin pouvoir comprendre ce que je ne comprenais pas à l'époque et ainsi me perfectionner. De toute façon, du temps, j'en ai à revendre, vu que je ne travail plus.


Encore un grand merci à vous deux

[NoSmoking]

Cela dit dans ce cas précis à partir du moment ou l'on met l'input à l'intérieur du label ...

Que l'<input> soit dans ou hors du <label> n'a strictement aucun effet car en display:none il n'appartient pas au flux, voir écrit ci-dessus début post #12.

...et le label en inline-block, ...

le fait de mettre le <label> en inline-block confère à l'élément un comportement de « type block », mais en ligne pas d'empilement vertical donc, en gros c'est une boîte insécable qui appartient à une seule ligne.

Un petit exercice intéressant pour s'en rendre compte

soit le code suivant :

Code html :

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

1
2
3
4
5
6
7
8
9
10
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Vestibulum ultricies laoreet orci, sit amet molestie nulla efficitur ac.
  Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
  Maecenas tellus elit, suscipit at laoreet et, tempor a orci. Nulla in tortor nec est placerat condimentum in nec magna.
  Nunc sollicitudin sem eget purus ultrices, bibendum pharetra augue aliquet.
  Mauris consectetur lectus ut laoreet finibus.
  In gravida, <span style="display:inline-block;background:#DEF">massa eget tempus fringilla,</span> eros nisi gravida massa, at accumsan massa nisl vel quam.
  Donec maximus molestie enim, ac elementum nisi posuere a. Vivamus eu varius erat.
</p>

en redimensionnement la fenêtre du navigateur on pourra se rendre compte que les mots « massa eget tempus fringilla, » ne seront jamais disposés sur deux lignes.
La condition quand même, qui est respectée dans le cas présenté, est que l'élément ne soit pas isolé.

...il n'y a plus que l'espacement entre les label qui peut varier et ce problème n'existe plus si l'on génère le code en php.

sauf si l'on aime générer du code lisible par le commun des mortels
Je t’avouerais qu'à une époque c'est un fonction JavaScript qui se charger d'éliminer les « whitespace » pour moi quand nécessaire.

[RinaBK]

en redimensionnement la fenêtre du navigateur on pourra se rendre compte que les mots « massa eget tempus fringilla, » ne seront jamais disposés sur deux lignes.
La condition quand même, qui est respectée dans le cas présenté, est que l'élément ne soit pas isolé.

Si je comprends bien, c'est un peu comme si je mettais « massa eget tempus fringilla, » entre les balise <nobr>...</nobr> ?? Du moins, ça le même effet ?

[NoSmoking]

Si je comprends bien, c'est un peu comme si je mettais « massa eget tempus fringilla, » entre les balise <nobr>...</nobr> ?? Du moins, ça le même effet ?

ou encore utiliser white-space: nowrap, sachant que <nobr> est devenu obsolète.

Dans ton cas cela ne marche néanmoins pas, FireFox sur ce coup, disons, interprète différemment !

[RinaBK]

ou encore utiliser white-space: nowrap, sachant que <nobr> est devenu obsolète.

Dans ton cas cela ne marche néanmoins pas, FireFox sur ce coup, disons, interprète différemment !

En effet, pourtant sur la WebDoc de Morzilla, il spécifie bien

"La propriété display définit le type d'affichage utilisée pour le rendu d'un élément (de bloc ou en ligne)"

[ABCIWEB]

sauf si l'on aime générer du code lisible par le commun des mortels

Je ne comprends pas trop ce que tu veux dire puisque dans ce cas le code est généré dans une boucle php. Et pour vérifier le code html généré j'utilise toujours la console qui met des retours ligne automatiquement donc je ne vois pas la différence...

[NoSmoking]

J'aime simplement voir, via un Ctl + U, un code facilement lisible, indenté ... en gros « pas broullon ».

Et pour vérifier le code html généré j'utilise toujours la console ...

le code visible dans la console est le code parsé, et corrigé si nécessaire, par le navigateur
ainsi le code de départ :

Code html :

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

1
2
3
4
5
<p class="conteneur">
  <div class="contenu">
    blabla ...
  </div>
</p>

se transforme en :

Code html :

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

1
2
3
4
5
6
<p class="conteneur">
</p>
<div class="contenu">
  blabla ...
</div>
<p></p>

donc effectivement dans ce cas il est utile de voir le (vrai) résultat dans la console, car chercher à cibler un élément de .contenu à partir de .conteneur devient impossible tant en CSS qu'en JavaScript.