1485 sujets

Web Mobile et responsive web design

Bonjour,

Sur un site, pour une meilleure utilisabilité sur les smartphones, j'aimerais rendre plus grande la zone où le pointeur permet de cliquer sur les liens <a href="....">...</a>.

J'ai essayé diverses solutions comme le line-height, ou le padding de l'élément <a ...> mais en fait, le navigateur semble "intelligent" et ne modifie pas la zone clicable sur lien, elle reste limitée au texte que contient la balise <a ...>.

Je suis en train de chercher de mon coté, aussi, mais quelle solution vous verriez, pour faire cela, à moindre coût, c'est à dire de le faire en CSS, sans avoir à refactorer la structure du HTML ?

Merci de vos réponses
Ok merci beaucoup, pour le display block, je te laisse deviner pourquoi ca ne marche pas.

Pour le display:inline-block + padding, c'est ok sur firefox.

A tester sur les autres navigateurs, notamment Safari.

Petite remarque : je trouve ce style inline-block pas mal, mais je suis toujours un peu réticent à employer cette solution surement car c'est un style ajouté aux originaux "inline" et "block" et que je n'ai jamais encore pas utilisé ce style autrement que sur des sites existants et qu'avant je me sortais sans, mais c'est vrai que c'est bien pratique.
Modifié par jreeman (17 Nov 2011 - 11:56)
Administrateur
Florian_R a écrit :
Hello.

Avec un display: block ou inline-block plus du padding sur tes liens, ça devrait le faire.

Hello,

Pas besoin de display, le padding fonctionne très bien de base sur les liens... sauf si autre chose l'en empêche.

Bonne chance.
Administrateur
jreeman a écrit :

Petite remarque : je trouve ce style inline-block pas mal, mais je suis toujours un peu réticent à employer cette solution surement car c'est un style ajouté aux originaux &quot;inline&quot; et &quot;block&quot; et que je n'ai jamais encore pas utilisé ce style autrement que sur des sites existants et qu'avant je me sortais sans, mais c'est vrai que c'est bien pratique.

On l'utilise même un peu trop souvent en ce moment, sans vraiment connaître ses effets et contre-indications Smiley cligne
http://www.alsacreations.com/article/lire/1209-display-inline-block.html

PS : non, il ne s'agit pas d'un style "ajouté aux originaux inline et block", c'est un style qui existe depuis le début. C'est par exemple le display de base de certains éléments tels que les champs de formulaires.
Modifié par Raphael (17 Nov 2011 - 13:43)
Effectivement, j'ai répondu un peu vite. D'ailleurs jreeman, je serais curieux de voir à quoi ton code ressemble, histoire de savoir pourquoi le padding n'était pas pris en compte.
Ok merci, pour ces précisions.

Je suis pas sensé passé encore du temps dessus, mais si j'ai du temps perso, j'irais plus avant ici le problème car j'ai vraiment eu l'impression qu'en ajoutant "bêtement" le padding ca avait pas l'air de marcher.