Changer un lien en un bouton

Bonjour
Ok cela refonctionne !!

Merci

Re
Ah effectivement en parlant de mon site c'est sur le côté droit
Titre (titre)
|- créer un article (url)
|- créer un événement (url)
Titre2 (titre)
|- blog2 (url)

re
Bon je n'y arrive pas
j'ai ajouté un terme pour identifier le menu
* je n'arrive pas à faire le bouton
* plutôt qu'encadré le titre et les liens en dessous. Je souhaite mettre un espace (en test) au dessus des chaque titre pour le mettre en valeur

J'ai mis cela

menugestion-tableau-bord  span.nav-header {
    font-size:200%;   
    color: #e5f;
}

.menugestion-tableau-bord  .menu-deeper .menu-parent {
	margin-top:50px;
/* border: 2px solid #000;*/
}
.menugestion-tableau-bord a {
display: inline-block;
    font-size: 0.785rem;
    padding: 1rem 2.5rem;
    border-radius: 100px;
    border: 2px solid #fff;
    color: #fff;
}

Bonjour,

1) Dans tes css, il y a plein d'autres instructions qui interfèrent avec ce que tu essaies de faire.

Par exemple, dans default.css, il y a :

.sp-module ul > li > a {
  color: #252525;
}

or le sélecteur ".sp-module ul > li > a" est assez puissant et va être prioritaire sur ".menugestion-tableau-bord a" que tu emploies.

Utilise comme sélecteur par exemple ".sp-module ul.menugestion-tableau-bord ul > li > a" qui devrait être plus fort que le sélecteur ".sp-module ul > li > a".

2) Pour transformer ta balise "a" en bouton orange, il faut rajouter un background: orange.

Par exemple :

.sp-module ul.menugestion-tableau-bord ul > li > a {
    display: inline-block;
    font-size: 0.785rem;
    padding: 1rem 2.5rem;
    border-radius: 100px;
    border: 0;
    color: #fff;
    background: orange;
}

3) Pour rajouter des espaces au dessus des titres, tu peux rajouter un margin-top pour ces titres (toujours en choisissant un sélecteur fort pour que ce soit bien pris en compte).

Amicalement,

Bonjour,

HDcms a écrit :
J'aurai eu tendance à mettre !important !!!!

!important, c'est uniquement pour les cas où on n'a pas d'autres solutions.

HDcms a écrit :
vous utilisez rem ... qu'est-ce ?

1 rem = taille de la police du navigateur.

L'intérêt, c'est que si l'utilisateur a du mal à voir les petites polices de caractères, et qu'il a par exemple changé la police par défaut de son navigateur, les textes seront affichés dans la taille choisie par l'utilisateur. Ensuite, on peut utiliser aussi cette unité pour les autres dimensions. Ainsi, tout sera agrandi proportionnellement. Pour tester ce que ça donne, il suffit de changer la taille de la police par défaut du navigateur.

D'une manière générale, je conseille d'utiliser aussi souvent que possible rem et em (taille de la police de l'élément). Mais dans certains cas, en particulier pour les bordures, les px peuvent être le meilleur choix.

HDcms a écrit :
J'ai mis

padding: 2px, 2px, 2px, 5px;

parce que j'avais appris (il y a longtemps) mais j'ai l'impression que c'est le mauvais élément
l'objectif étant de diminuer la hauteur haut et bas pour coller plus de bouton (une dizaine) et décaler le lien un peu vers la droite pour qu'il ne colle pas.

Un padding ajoute de l'espace autour de l'élément, mais cet espace a le même fond que le reste de l'élément.

Un margin ajoute de l'espace autour de l'élément, mais le fond est celui de l'élément parent. Souvent, on utilise les deux, en particulier quand le fond de l'élément est différent de celui de son parent.

HDcms a écrit :
question subsidiaire: peut-être que l'aspect rectangulaire serait plus lisible ? a vos avis ?

Je suis moyen voire nul en design ! Du coup, j'évite de donner des conseils dans ce domaine-là !

Mais déjà, tu peux t'inspirer du design de sites qui te plaisent.

Amicalement,

Rebonjour
ok merci pour ces précisions
peux-tu regarder le site pour l'amélioration du bouton (comme précisé plus haut)?
car en l'état c'est moche
Pour le titre, je vais jouer sur la taille et peut-être le centrage
Merci
@+

re
bon j'abandonne l'idée des boutons qui dans le site réel serait probabelemnt très moche
Du coup je suis parti pour jouer plus simplement sur l'état du lien (couleur et soulignement) et cela ne fonctionne pas
Je pense pourtant être parti sur tes conseils.
Merci pour me dire ce qui fonctionnerait
@+
ps: si c'est possible de diminuer encore l'espace (hauteur) entre 2 liens, ce serait top

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

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

je me suis basé sur
https://developer.mozilla.org/fr/docs/Web/CSS/text-decoration
https://www.alsacreations.com/astuce/lire/43-comment-dfinir-lapparence-de-ses-liens.html
Modifié par HDcms (22 Jan 2019 - 17:45)

Bonjour,

Pour le line-height, c'est 1.5rem (avec un point) et non pas 1,5rem (avec une virgule).

Un "*" devant un lien :

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

Amicalement,