2 pièce(s) jointe(s)
Code CSS (position?) qui bug avec Firefox ?
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:
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:
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.
Pièce jointe 589157
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.
Pièce jointe 589158
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 ;)
Petite précision quand même
Citation:
Envoyé par ABCIWEB
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.
Citation:
...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:
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é.
Citation:
...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 :mrgreen:
Je t’avouerais qu'à une époque c'est un fonction JavaScript qui se charger d'éliminer les « whitespace » pour moi quand nécessaire.
