28172 sujets

CSS et mise en forme, CSS3

Étendre un lien sans padding

Salut,

En faite quand on fait un lien sur un texte, disons comme ça :

<li><a href=..></a></li>

Si on mets un fond sur le <li> et le <a> on vois que le lien est positionné seulement sur le texte et pas sur tout le <li>.

Donc d'habitude pour remédier a ce probleme je mets un padding sur le <a> pour qu'il soit plus grand que le <li>.

Mais je voulais savoir s'il y avait une autre methode, disons plus propre pour faire un sorte que le lien soit sur tout l'élement et pas que sur le texte.
Bonjour,

Petit retour aux bases Smiley cligne
Créer des menus simples en CSS
Le tutoriel a écrit :

Pour que les éléments du menu réagissent comme des boutons au passage de la souris, il faut faire en sorte que les liens occupent tout l'espace à l'intérieur des <li>:
#navigation li a {
  [b]display: block ;[/b]
  background: #c00 ;
  color: #fff ;
  font: 1em "Trebuchet MS",Arial,sans-serif ;
  line-height: 1em ;
  text-align: center ;
  text-decoration: none ;
  padding: 4px 0 ;
}


La partie importante en gras dans le CSS Smiley cligne
À adapter à ton besoin.
En espérant avoir répondu à ton besoin Smiley cligne
bah.....


tout simplement <a href=..> <li></li></a>
Modifié par JENCAL (10 Jun 2015 - 11:36)
@JENCAL> techniquement ça va dur. Tu as écris dans la précipitation... Ce que propose 6l20 est la bonne méthode, un simple "display: block" suffit.
Bien sur je ne dit pas que ce que propose 6l20 n'est pas une bonne méthode.

j'ai enlever le " cherche pas plus loin " qui pouvait porter à confusion.
Modifié par JENCAL (10 Jun 2015 - 11:37)
Ce n'était pas à cause de ça, c'est juste que c'est impossible d'avoir un :
<a href=""> <li></li></a>
Sujet clos
Aller à