28172 sujets

CSS et mise en forme, CSS3

[Résolu] Frétillement insuportable au survol item menu

Bonjour
J'ouvre un fil spécifique a ce qui me semble un problème.
J'avai initialement ouvert un fil pour mettre un des exemples que je trouvais super https://forum.alsacreations.com/topic-4-89654-1-Bout-de-code-survol-lien-de-menu.html
Malheureusement après plusieurs propositions, je ne suis pas arrivé à modifier le code généra par joomla ou m'adapté à lui Smiley decu
Du coup je pars sur le plus "simple" en souhaitant avoir un effet d'encadrement au survol et sur l'item du menu actif
La page : https://cochanger.eu/autres/cochanger-eu
Le CSS qui me semble interférer https://www.cochanger.eu/media/templates/site/cassiopeia/css/template.css
Mon user.css

/************** EN TÊTE, DEB ******************/
/* MENU, déb  */
.container-header .mod-menu > li > a {
    text-transform: uppercase;
  padding: 1px 1px;
    color:#000;    
}
.container-header .mod-menu > li > a:hover {
  /*background-color: red;
  border-bottom:none;*/
}

/* en test */
#navbar1 .nav-item:hover {
  border:2px solid black;
}
#navbar1 .current {
  border:2px solid black;
}

/* MENU, fin  */

/************** EN TÊTE, FIN ******************/

/************** COMMUNS, DEBUT ******************/
:root {
  --cassiopeia-color-primary: DarkOrange;
  --cassiopeia-color-link: #000;
  --cassiopeia-color-hover: red;
}

a {
color: Dark;
}

.container-header::after
{
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.5rem;
	height: 1rem;
	width:100%;
	
	background-image: radial-gradient(farthest-side at top center,transparent , #8888 , #fff ),linear-gradient(135deg,var(--cassiopeia-color-primary) 0,var(--cassiopeia-color-hover) 100%);
background-size: 100% 50%;/* ou hauteur a 0.5rem au lieu de 1rem ? */
background-position: bottom;
	
	
	background-repeat: no-repeat;	
}


/* icone pour ouverture site externe. */
a[href*="http"]:after {
  content: '\f14d';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  background-size: 16px 16px;
  padding-left: 5px;
}
a[href*="http"] { text-decoration: none; }

Modifié par HDcms (13 Jun 2022 - 18:43)
Je me demande si border ne rajouterait pas de l'espace.
Essaie sans temporairement pour voir si ça se déplace toujours au survol.
Y'a de forte chance que ce soit ça car il ne se passe rien au survol de Autres déjà sélectionné.
Du coup la soluce sera de mettre la même bordure mais transparente pour les éléments non survolés :
#navbar1 .nav-item {
  border:2px solid transparent;
}
Salut
J'avais fais le test un jour et cela m'a traversé l'esprit sans savoir que faire
Et voilà maintenant c'est résolu
meilleure journée aujourdhui Smiley smile
Merci
Ton Autres (l'élément sélectionné) n'est plus encadré.
Il faut que tu mettes ton .current après le CSS rajouté je pense.
#navbar1 .nav-item {
  border:2px solid transparent;
}
#navbar1 .nav-item:hover {
  border:2px solid black;
}
#navbar1 .current {
  border:2px solid black;
}

dans cet ordre là
Meilleure solution
Re
Bien vu, merci
Je n'avais pas fait attention. Je vois d'ailleurs aussi un autre soulignement
Reste encore qq trucs a améliorer sur cette page
Un petit coup de padding pour améliorer un peu la présentation.
Mais maintenant je dois passer sur un autre projet un peu plus urgent et je reviens
Sur :hover il vaut mieux utiliser outline plutôt que border. Cela évite le micro décalage des éléments, dû en effet à l'épaisseur du trait.
Sujet clos
Aller à