background-image invisible sur mobile

Version imprimable

Bonjour à tous,
Dans de but d'essayer de rendre mon site ergonomique sur mobile, j'ai voulu mettre certaines images en background dans un petit tableau.
Pour ce faire, voici un exemple de code CSS que j'utilise :
Code:

1 2 3 4 5 6 7 8 9 10 11 .menuhautemail{ background-image: url('img/picto-email.png'); background-repeat: no-repeat; background-size: contain; background-position: center; cursor:pointer; } .menuhautemail:hover { background-color:white; }
Dans ma page, j'utilise le code suivant :

Code:

<td width= "15%" class="menuhautemail onclick="location.href="'/contact.php#email'"> </td>

Sur PC aucun soucis, tout s'affiche correctement. Par contre sur mobile, aucune des images que j'ai voulu traitées de cette façon ne s'affiche.

Quelqu'un aurait une idée de la façon de corriger ce problème ?
J'imagine que ce n'est pas bien compliqué, mais ça fait plusieurs heures que je tourne en rond.

Merci d'avance pour vos réponses constructives :)

07/06/2023, 18h40
NoSmoking

Bonjour,

Citation:

Dans de but d'essayer de rendre mon site ergonomique sur mobile, j'ai voulu mettre certaines images en background dans un petit tableau.

nul besoin de <table> pour cela !

Citation:

Quelqu'un aurait une idée de la façon de corriger ce problème ?

pour commencer il te faut corriger la syntaxe dans ton code HTML :

Citation:

<td width= "15%" class="menuhautemail onclick="location.href="'/contact.php#email'"> </td>

... il n'est pas conforme, ouverture/fermeture des guillemets notamment, et si c'est un lien il existe l'élément <a> qui est prévu pour cela.

La width="15%", c'est 15% de quoi ?

Un lien vers une page en ligne serait quand même un plus ;)
07/06/2023, 21h06
djedje-08

Bonjour et merci de t'intéresser à mon problème.

Je sais que je n'ai pas besoin de passer par un tableau pour organiser ma page, mais sur cet emplacement je trouve que c'est plus pratique ;)
Je sais également que l'élément <a> permet de créer les liens, mais là j'ai besoin de créer un lien sur la cellule du tableau, le but étant que le background paraisse cliquable.
Initialement j'avais pensé mettre un code un peu comme ci-dessous, mais ça ne fonctionne pas :'(

Code:

<a href="page.html"><td>contenu de la cellule</td></a>

J'ai effectivement fait une faute de guillemets dans l'extrait de code que j'ai posté.
Voici le code corrigé :

Code:

<td width= "15%" class="menuhautemail" onclick="location.href='/contact.php#email'"> </td>

Le "width=15%" c'est 15% de la largeur du tableau.
09/06/2023, 08h14
NoSmoking
Citation:

Envoyé par djedje-08

Je sais que je n'ai pas besoin de passer par un tableau pour organiser ma page, mais sur cet emplacement je trouve que c'est plus pratique ;)

c'est ton choix ;)

Citation:

Envoyé par djedje-08

Je sais également que l'élément <a> permet de créer les liens, mais là j'ai besoin de créer un lien sur la cellule du tableau, le but étant que le background paraisse cliquable.

oui et alors !?!

Citation:

Envoyé par djedje-08

Initialement j'avais pensé mettre un code un peu comme ci-dessous, mais ça ne fonctionne pas :'(

La mauvaise construction, ton essai :
Code:

1 2 3 <a href="page.html"> <td>contenu de la cellule</td> </a>
La bonne construction :
Code:

1 2 3 <td> <a href="page.html">contenu de la cellule</a> </td>
Citation:

Envoyé par NoSmoking

Un lien vers une page en ligne serait quand même un plus ;)

Pas possible ?