Changer un lien en un bouton

(reprise du message précédent)

Bonsoir
ok merci mais décidément il y a qq chose qui m'échappe pour l'espacement car je ne vois aucun effet ne exagérant l'espacement

 .sp-module ul.menugestion-tableau-bord ul > li > a  {
  text-decoration: underline;  
  line-height: 3.5rem;
}

pour le "*" cela fonctionne. effet de bord , i lest aussi souligné mais bon je peux vivre avec
Bonne soirée

Bonjour,

HDcms a écrit :
Bonsoir
ok merci mais décidément il y a qq chose qui m'échappe pour l'espacement car je ne vois aucun effet ne exagérant l'espacement

 .sp-module ul.menugestion-tableau-bord ul > li > a  {
  text-decoration: underline;  
  line-height: 3.5rem;
}

Parce que le line-height (de 36px) est imposé par un sélecteur plus fort qui est "#sp-right .sp-module ul > li > a" et qui se trouve dans template.css.

Pour vérifier ça, tu peux utiliser l'inspecteur de ton navigateur (accessible via un clic droit en général) : pas facile au début mais bien pratique.

HDcms a écrit :
pour le "*" cela fonctionne. effet de bord , i lest aussi souligné mais bon je peux vivre avec

Dans ce cas, mets le ":before" sur le "li" qui contient le "a" au lieu de le mettre sur le "a" (le "li" n'étant lui pas souligné). Y a plein d'autres manières de faire, mais il faut réfléchir un peu.

Amicalement,

Bonjour

Bon ben du coup j'ai mis un !important sur le line-height et cela fonctionne

Pour ne pas avoir le soulignement de "*" j'avai déjà essayé de mettre après le before, ela me met un retour à la ligne inadéquat. Voic imon code au cas ou j'ai fais encore une erreur bête, sinon si qq peut me donner d'autres pistes.

/*.sp-module ul.menugestion-tableau-bord ul > li:before  { */
.sp-module ul.menugestion-tableau-bord ul > li > a:before  {
  content: "> ";
}

en tout les cas merci pour ton aide et explicatins
Bonne journée

HDcms a écrit :
Voic imon code au cas ou j'ai fais encore une erreur bête, sinon si qq peut me donner d'autres pistes.

/*.sp-module ul.menugestion-tableau-bord ul > li:before  { */
.sp-module ul.menugestion-tableau-bord ul > li > a:before  {
  content: "> ";
}

Et ça :

.sp-module ul.menugestion-tableau-bord ul > li:before  {
  content: ">";
}

Amicalement,

Bonjour
c'est exactement ce que j'avai mis (voir en commentaire dans mon code. désolé oublié de l'enlever!).
j'ai réessayai et même retour à la ligne
@+

Bonjour

HDcms a écrit :
Bonjour
c'est exactement ce que j'avai mis (voir en commentaire dans mon code. désolé oublié de l'enlever!).
j'ai réessayai et même retour à la ligne
@+

Quel retour à la ligne ?

Amicalement,

Bonjour,

Ton retour à la ligne est dû à quoi selon toi ? (on va faire de la pédagogie sinon on ne va jamais s'en sortir).

Amicalement,
Modifié par parsimonhi (23 Jan 2019 - 13:42)

Bonjour
Ca y est j'ai rectifié. je me doutais que c’était du à un inline manquant mais j'avoue que je suis vite perdue avec la multiplication des css que je ne maîtrise pas dans un cms et j'ai peur de me modifications quand il y a des cascades.
Là je crois que je n'ai ps le chois des !important mais cela fonctionne
Merci pour ta persévérance et pédagogie qui m'a poussé à aller au bout
Bonne journée

mon code final

.sp-module ul.menugestion-tableau-bord ul > li > a  {
  text-decoration: underline;  
  line-height: 1rem!important;
  display: inline!important;
}

.sp-module ul.menugestion-tableau-bord ul > li:before {
content:"> ";
}

.sp-module ul.menugestion-tableau-bord ul > li > a:visited {
text-decoration: underline; 
  color:green;
 /* text-decoration: underline overline #FF3028; */
}
.sp-module ul.menugestion-tableau-bord ul > li > a:hover{
  text-decoration:  #a00 wavy underline;
  color: #a00;
}

.menugestion-tableau-bord  span.nav-header {
    font-size:1.5rem;
    padding: 0rem 0rem 0rem 1.2rem;
    font-weight : 800;
}