Discussion :

[djedje-08]

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 :

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

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 html :

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

<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

[NoSmoking]

Bonjour,

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 !

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 :

<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

[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 html :

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

<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 html :

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

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

Le "width=15%" c'est 15% de la largeur du tableau.

[NoSmoking]

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

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 !?!

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

La mauvaise construction, ton essai :

Code html :

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

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

La bonne construction :

Code html :

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

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

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

Pas possible ?