Personnalisation du menu horizontal

VinchzVinchz Member
dans Archives
Bonjour,

Je viens d'installer Pluxml et, après la rédaction du premier billet, je me suis dit qu'un petit tour dans les CSS ne me ferait pas de mal. En effet, je voulais rectifier quelques éléments comme les liens et le menu horizontal.

Ce que je voudrais faire sur ce menu c'est que, au survol d'un lien, une barre apparaisse au-dessus de ce dernier (un peu comme le menu du site Pluxml). Voici donc ce que j'obtiens dans ma feuille de styles :
#menu li a:hover {
	background : #111;
	color : #fff;
	border-top : 2px solid #fff; /*Ligne ajoutée*/
	}
Lorsque je survole une rubrique du menu, ce dernier s'agrandit pour faire apparaître la bordure du haut ... Comment faire pour éviter cet agrandissement ? Voici l'adresse de mon blog pour tester le skin : Journal d'un geek

Merci d'avance et à bientôt :)

Réponses

  • BalouBalou Member
    Salut Vinchz
    Pour obtenir ce que tu désire, ajoute ceci dans ton #menu li a:hover

    margin-top: -2px; ;)
  • VinchzVinchz Member
    Balou : Ta réponse marche sous Firefox et je t'en remercies. Cependant, vu que je suis linuxien et adorateur de KDE, j'utilise beaucoup Konqueror (que je trouve très pratique). Malheureusement, sous ce dernier, le bug persiste. Il y aurait-il un moyen pour que ça marche sur tous les navigateurs ? (Je n'aime pas en favoriser un navigateur à un autre)
  • DitiDiti Member
    Euh, je viens de tester sur Konqueror 3.5.5, et je ne vois aucun bug. Est-ce reglé ?
  • gcyrillusgcyrillus Member
    bonjour,
    pour reglé ce bug , qui n'en est pas vraiment un , il faut faire en sorte que la balise ai la même hauteur en etat "normal" ou "hover , active, focus , etc ...."

    donc , la marge negative au survol (pourquoi pas ) , un padding-top au repos de la hauteur de la bordure remis a zero au survol (on deplace le padding en epaisseur de bordure et vice versa ), la bordure de la couleur de fond qui change alors seulement de couleur au survol( la mieux parceque plus stable que les autres a priori) ... l'idée est de gardé la même surface d'affichage sans deplacé visuelement le baseline sur lequel le texte repose .

    ++
  • VinchzVinchz Member
    Même lorsque j'ajoute un padding-top de 2px au repos, le bug persiste.

    @ Diti : Il est normal que tu n'aies pas vu le bug, je l'avais enlevé (j'aime pas afficher un truc bugué :) ). J'ai modfié le CSS et je l'ai mis en ligne. Tu peux maintenant voir le bug sous Konqueror.
  • DitiDiti Member
    Exact, je me demande d'où vient le bug... Sur Opera ça fait pareil ?
    (Parce qu'Opera et Konqueror sont les plus respectueux des standards du W3 que je connaisse, c'est pour ça que j'demande :))
  • VinchzVinchz Member
    Sous Opera ça fonctionne.
    Et puis après tout, ce n'est qu'une part, j'en ai pas tellement besoin :p ! Moi je pensais que c'étaient Opera et Safari les plus respectueux des standards du W3C. Enfin, ne polémiquons pas, on en a bien assez avec HTML 5 et XHTML 2 (hors sujet, quand tu nous tiens).

    Sinon, est-ce possible de rajouter des smileys à pluxml ? Si oui, comment ?
Connectez-vous ou Inscrivez-vous pour répondre.