5563 sujets

Sémantique web et HTML

Bonjour,
j'ai des liens sous forme de petites images de 44x33 px. Ce sont des ancres. En mode grand écran, tout va bien. En mode mobile, le lien n'est pas actif sur la totalité de l'image, mais uniquement sur une petite partie à la gauche de l'image
<div>
    <div style="float: left">
         <a href="#bala"><img src="#" data-src="Images/Bala-M-C.jpg" alt="Musique au balafon" title="Bala" width="44" height="33"></a>
         </div>
    <div class="ancres">
        Bala
    </div></div>]

J'ai mis une class pour placer correctement le titre à droite de l'image.
Le css pour les smobiles :
.ancres {
        position:relative;
	display:block;	
        width:4em;
	margin-left:1em;}

Mystère.
Je te remercie. Depuis, j'ai abandonné cette idée de d'images miniatures à mettre dans mon footer, il y en avait trop.
Voulant tester ta proposition, j'en ai remis provisoirement une sur le site. Smiley fache ! Ça fonctionne sur toute l'image, sans que j'ai modifié quoi que ce soit ! Je n'ai pas eu le courage d'en mettre huit les unes à côté des autres comme sur l'original. C'était peut-être là le problème.
Mais je garde au chaud ta proposition. Parce que j'avais déjà été confronté à ce problème, par le passé.
Merci.
Modérateur
le display par défaut d'un élément <a> est inline de mémoire (d'où ton souci)
Ah oui, sur l'essai que j'ai effectué, je m'aperçois que j'ai bien modifié une chose, je n'ai pas mis display:block;
C'est sans doute la raison pour laquelle ça a fonctionné.
On clos le chapitre.
Encore merci pour la prochaine fois.
Meilleure solution