18041 sujets

Questions générales et questions de débutants

[Résolu] Largeur effet hover sur un li/a

Bonjour,
Je suis entrain de faire un projet pour les cours mais je bloque sur un détail.
Je voudraiq que dans mon menu à gauche lorsque je passe sur les catégories le "hover" gris soit de la même largeur que le menu (soit 150px).
J'ai l'impression d'avoir tout essayé, mettre un width de 150 pour a, pareil sur les li, ect. (de toute évidence non puisque j'ai pas résolu mon problème...). Je ne crois pas que les margin gènent...
Bref, je ne comprend pas alors si quelqu'un peut m'aider ce serait top.
J'ai mis une petite capture pour que ce soit plus clair mais si jamais il faut plus de détail je les posterais.
upload/63547-hoverli.jpg
Merci d'avance.
Bonsoir.

Sur Mozilla Firefox 48, il y a un padding-left égal à 30px par défaut sur les éléments ul. Je ne sais pas ce qu'il en est pour les autres navigateurs, peut-être c'est le margin-left qui est fixé par défaut.

Quoi qu'il en soit, il faut déjà mettre le padding-left des éléments ul à 0px.

Smiley smile
Merci Zelena,
J'avoue que je comprend toujours pas parce que dans mon css pour le ul j'ai seulement ceci:
ul {
list-style: none;
font-size: 18px;
font-family: arial;
line-height: 70px;
}
Les navigateurs ont des styles par défaut. Si vous ne mettez pas de css, il y aura quand même une mise en forme - minimale - qui dépendra de chaque navigateur.

Smiley smile
Cool tu as trouvé la réponse.

Concernant les styles par défaut, tu peux utiliser un "reset" comme celui-ci:
http://meyerweb.com/eric/tools/css/reset/ que tu peux personnaliser ou t'en créer un.

Il y a aussi le fichier 'normalize':
http://netmacom.fr/blog/webdesign/armoniser-ses-feuilles-de-style-normalize-css.html

Une bonne astuce est de rajouter cette propriété à tous les éléments (en plus du padding et margin à 0)


*{
box-sizing: border-box;
margin: 0;
padding: 0;
}


Plus sur le box-sizing: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
allan00958 a écrit :
Une bonne astuce est de rajouter cette propriété à tous les éléments (en plus du padding et margin à 0)
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}

Après ça n'empêchera pas pour autant de le redéclarer pour certains éléments spécifiques, comme sur un input range dédié (::-moz-range-thumb) ou pour un pseudo élément...
Sujet clos
Aller à