Donner la même largeur à plusieurs boutons liens (sans image)

[FlodAriege]

Bonjour,

Le Template JSN Boot que j'utilise me permet de créer des boutons liens avec une classe css telle que :
class="link-button button-red" par exemple

J'ai 4 boutons de ce type sur ma page d'accueil :
(lien supprimé)
mais visuellement je trouve ça moche car le texte qu'il contient n'étant pas de la même longueur, les boutons sont chacun d'une longueur différente.

Est-ce que par hasard il y aurait moyen, en bidouillant un peu le custom.css, de leur donner tous la même largeur ?

PS : attention je suis grande débutante en css, et je ne sais guère que recopier un code qu'on me donne...

Merci d'avance

[Rajoz]

Re : Donner la même largeur à plusieurs boutons liens (sans image)

Bonjour FlodAriege,

Il est possible de définir la largeur souhaitée pour les boutons en ajoutant à la fin du fichier templates/jsn_boot_pro/css/custom.css le code :

.link-button {
    width: 215px;
}

Tous les boutons (dont les 4 de la page d'accueil) utilisant cette classe seront de la même largeur soit 215 pixels.

Amicalement,
Rajoz

[FlodAriege]

Re : Donner la même largeur à plusieurs boutons liens (sans image)

Puis-je remplacer, dans ce code, la classe :
link-button
Par une nouvelle classe que je pourrais appeler, par ex :
link-button215
Puis donner la nouvelle classe aux seuls 4 boutons de l'accueil, ceci afin de laisser les autres boutons du site "tranquilles" ?
Merci beaucoup pour ton aide, là je suis en route pour le cinoche, mais j'essaie ton code demain



Sent from my iPhone using Forum Joomla.fr mobile app

[lomart]

Re : Donner la même largeur à plusieurs boutons liens (sans image)

Bonsoir,

Une autre méthode qui respecte le responsive.
Il suffit d'ajouter la règle CSS suivante qui ne s'appliquera qu'aux 4 boutons

#jsn-pos-promo-left a.link-button {
    width: 90%;
}

[FlodAriege]

Re : Donner la même largeur à plusieurs boutons liens (sans image)

Bonsoir,

Une autre méthode qui respecte le responsive.
Il suffit d'ajouter la règle CSS suivante qui ne s'appliquera qu'aux 4 boutons

#jsn-pos-promo-left a.link-button {
    width: 90%;
}

TIP TOP nickel chrome parfait

Merci !

[PhilJ]

Re : Donner la même largeur à plusieurs boutons liens (sans image)

Bonjour Florence,


Au sujet du fil* « MAJ JSN BOOT PRO : comment changer taille caractères "sous-titres" menu principal » (http://forum.joomla.fr/showthread.ph...35#post1035335) :

.menu-mainmenu a span span.jsn-menudescription {
font-size: 14px !important;
}

Dans cette directive, 13 px est un maximum sur un écran 1024 (compte tenu d'un padding de 18 px pour div.jsn-modulecontainer ul.menu-mainmenu > li > a), ou bien alors le menu se retrouve à nouveau sur deux étages (= 2 lignes) dans ce format.


* Je ne pouvais pas te signaler cela sur le fil en question car il est fermé.


Bonne journée.



PhilJ

[FlodAriege]

Re : Donner la même largeur à plusieurs boutons liens (sans image)

Bonjour Florence,


Au sujet du fil* « MAJ JSN BOOT PRO : comment changer taille caractères "sous-titres" menu principal » (http://forum.joomla.fr/showthread.ph...35#post1035335) :

.menu-mainmenu a span span.jsn-menudescription {
font-size: 14px !important;
}

Dans cette directive, 13 px est un maximum sur un écran 1024 (compte tenu d'un padding de 18 px pour div.jsn-modulecontainer ul.menu-mainmenu > li > a), ou bien alors le menu se retrouve à nouveau sur deux étages (= 2 lignes) dans ce format.

Je ne comprends pas, quand je fais le test en vue adaptative sur Moz ça marche nickel (une seule ligne)
Et de 961 à 1199 px, le padding est réglé sur 15 px 18 px

* Je ne pouvais pas te signaler cela sur le fil en question car il est fermé.

Ca m'apprendra à passer un sujet en résolu...

[PhilJ]

Re : Donner la même largeur à plusieurs boutons liens (sans image)

Je ne comprends pas, quand je fais le test en vue adaptative sur Moz ça marche nickel (une seule ligne)
Et de 961 à 1199 px, le padding est réglé sur 15 px 18 px
[ATTACH=CONFIG]28370[/ATTACH]


Ca m'apprendra à passer un sujet en résolu...

On trouve ceci dans template.css, ligne 194 :

/* =============== LAYOUT - OVERALL PAGE =============== */
/* ... */

#jsn-header-inner,
#jsn-menu-inner,
#jsn-body,
#jsn-usermodules3-inner,
#jsn-footer-inner {
margin: 0 auto;
width: 960px;
}

...autrement dit, il est prévu que le menu (container #jsn-menu-inner) ait une largeur de 960 px exactement — du moins lorsque l'écran est en 1024 px (sur écran large, jsn_wide.css prend le relai et impose 1170 px).

Or ton menu est composé de 6 liens avec une largeur totale de 962 px. Donc il est impossible qu'il tienne sur une seule ligne contrainte à 960 px.

Il est vrai qu'un écart de 2 pixels c'est un peu l'épaisseur d'un cheveu, mais c'est suffisant pour déclencher ce problème de largeur.

Ce qui se passe, très probablement : ta copie d'écran n'est pas correcte du fait que ton facteur de zoom d'affichage diffère de 100%.

=> Dans le menu de Firefox, faire 'Affichage' > 'Zoom' > 'Normal' (en principe, on obtient le même résultat avec CTRL+0, c.-à-d. CTRL + zéro, mais utiliser le menu est toujours plus sûr).

[FlodAriege]

Re : Donner la même largeur à plusieurs boutons liens (sans image)

Bon alors rien à faire au niveau du zoom je suis bien à 100%, ce qui veut dire que je ne peux pas trop me fier à la vue adaptative de moz…
Mais comme je te crois sur parole, j'ai fait une modif qui me semble être correcte.
Merci à toi. Encore une fois


Sent from my iPhone using Forum Joomla.fr mobile app

[PhilJ]

Re : Donner la même largeur à plusieurs boutons liens (sans image)

comme je te crois sur parole [...]

...Il ne faut pas, ne serait-ce que parce que j'ai pu me tromper . D'après ma calculette, tous les <li> du menu (dans <ul class="menu-mainmenu menu-iconmenu menu-richmenu">) additionnés donnaient un total de 962 px, mais que tu vérifies toi-même (= avec 14 px pour les sous-titres des liens de menu) serait une bonne chose.

Actuellement, l'addition est la suivante, de 'Accueil' jusqu'à 'Aides financières', sous-titres inclus : 112 + 158 + 156 + 172 + 122 + 196. Total : 916 px. Donc, c'est logique, le menu est bien maintenu sur une seule ligne, sur écran 1024, et même jusqu'à 960 px, limite inférieure en deçà de laquelle on passe en mode mobile (avec un menu compact).

[FlodAriege]

Re : Donner la même largeur à plusieurs boutons liens (sans image)

Actuellement, l'addition est la suivante, de 'Accueil' jusqu'à 'Aides financières', sous-titres inclus : 112 + 158 + 156 + 172 + 122 + 196

Hop hop hop stop ! Là tu surestimes ma compréhension mon ami
C'est là que j'ai besoin que tu me dises : comment calcules-tu qu'un lien mesure 112 ou 158 ou … px ?
C'est quoi la règle de calcul (ou l'outil) qui permet de passer d'un nombre de caractères et d'une taille de caractères à une longueur en pixels ?


Sent from my iPhone using Forum Joomla.fr mobile app

[PhilJ]

Re : Donner la même largeur à plusieurs boutons liens (sans image)

Hop hop hop stop ! Là tu surestimes ma compréhension mon ami
C'est là que j'ai besoin que tu me dises : comment calcules-tu qu'un lien mesure 112 ou 158 ou … px ?
C'est quoi la règle de calcul (ou l'outil) qui permet de passer d'un nombre de caractères et d'une taille de caractères à une longueur en pixels ?

...C'est comme je te l'ai dit mon amie : même si tu n'es point familière de Firebug (http://getfirebug.com), regardes le code source de n'importe quelle page. Tu verras quelque chose du genre :

<ul class="menu-mainmenu menu-iconmenu menu-richmenu">

<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>

</ul>

C'est le menu principal.

A l'intérieur de chaque <li>...</li> se trouvent : (1°) le lien de menu, et (2°) le sous-titre du lien de menu.

Par exemple pour le lien 'ACCUEIL', tu peux lire ceci tout comme moi dans la source :

<li class="current active first jsn-icon-home">

<a class="current" href="/" title=" bienvenue" >

<span>

<span class="jsn-menutitle">Accueil</span>
<span class="jsn-menudescription"> bienvenue</span>

</span>

</a>

</li>

Autrement dit, l'encombrement de tout ce que tu vois dans « l'onglet » 'ACCUEIL' se trouve dans un container HTML répondant au doux nom de <li>...</li>.

--------------------

Maintenant, pour répondre à ta question :

Utilise ton ami Firebug. Sélectionne le <li>...</li> contenant cet onglet 'ACCUEIL'. Puis, dans la fenêtre de Firebug, sélectionne 'Apparence' : sous tes yeux émerveillés, tu pourras lire le résultat : 112 X 71. Autrement dit : largeur 112 px, hauteur 71 px.


Et voilà. Rien de magique .

[FlodAriege]

Re : Donner la même largeur à plusieurs boutons liens (sans image)

D'accord, j'ai compris.
Pas du premier coup m'ais j'ai compris.
En fait avec Firebug je n'ai pas les totaux qui s'affichent (peut-être n'ai-je pas la même version que toi ?). je vois une boite qui m'indique la dimension du contenu + la dimension des padding, mais pas le total.
Par contre en faisant clic droit / inspecter l'élément (mais pas avec firebug, avec le truc d'origine de moz), là je vois s'affficher à l'écran lorsque je survole chaque ligne de <li>...</li> la dimension comme tu en parles. Par exemple 112x71.

Vérification faite :
sur mon écran (1600), j'obtiens un total de 130+179+176+186+143+222=1036 pixels. Donc tu avais complètement raison : sur un écran de 1024 pixels, mes caractères en 14px devaient faire passer le menu sur 2 lignes.
Comme je t'avais cru sur parole, j'avais ajouté une ligne de css pour qu'entre 961-1199 px, la police passe à 13 px.
Et quand je passe en vue adaptative à un écran de 1024 px, j'obtiens cette fois (presque) le même résultat que toi dans ton dernier post : 112+158+156+172+124+198=920

Moralité, tu as eu entièrement raison de me faire remarquer que 14 px c'était trop pour les écrans de taille intermédiaire, et j'ai bien fait de te croire sur parole

Bonne soirée.
Et merci de m'avoir appris à utiliser un nouvel outil.

[PhilJ]

[...] En fait avec Firebug je n'ai pas les totaux qui s'affichent (peut-être n'ai-je pas la même version que toi ?). je vois une boite qui m'indique la dimension du contenu + la dimension des padding, mais pas le total.

...Parce qu'avec Firebug, ce que tu regardes en fait ce sont les dimensions de <a href=...>...</a>, c.-à-d. les dimensions du lien, et non pas celles de son container <li>...</li>. Étant donné que <a href=...>...</a> est défini avec une marge intérieure (= padding), tu vois les valeurs des liens eux-mêmes et celles des marges intérieures, séparément.

Par exemple, pour le lien 'ACCUEIL', tu vois (de gauche à droite) : 18 | 76 X 40 | 18, c.-à-d. : padding gauche 18 px, puis 76 px pour l'intérieur du conteneur, et padding droit 18 px. Le total fait bien : 18 + 76 + 18 = 112 px.

Pour voir le total, directement, il faut remonter juste au-dessus de <a href=...>...</a>, c.-à-d. pointer directement le conteneur parent : <li>...</li>. Lecture directe, toujours pour le lien 'ACCUEIL' : 112 px. Les conteneurs <li>...</li> n'ont pas de marge externe (= margin). Donc ils se touchent. Du coup, l'addition de tous les <li>...</li> donne directement et rapidement l'encombrement total du menu. De plus, ils n'ont pas non plus de marge interne (= padding). Donc la valeur lue est bien la valeur totale du conteneur : on économise toutes les additions que tu as dû faire.

quand je passe en vue adaptative à un écran de 1024 px, j'obtiens cette fois (presque) le même résultat que toi dans ton dernier post : 112+158+156+172+124+198=920.

...Là par contre j'avoue que je ne sais pas l'origine de cet écart de 2px sur les 2 derniers conteneurs (124 et 198 px chez toi, 122 et 196 px chez moi, ces deux valeurs sur deux écrans très différents) :-\

[FlodAriege]

Re : Donner la même largeur à plusieurs boutons liens (sans image)

D'accord, j'ai compris.
Et j'ai même découvert qu'en pointant directement une ligne encore au dessus : <div class="jsn-modulecontent"> j'obtenais directement le total de tous les liens de menus = 1034 px (contre 1036 avec l'outil F12 en additionnant les différents liens) ou 917 px (contre 920) si je réduis la taille de la fenêtre et force ainsi les caractères à passer en 13 px.
Vérification faite, j'obtiens exactement le même résultat (1034 et 917) si je pointe jsn-modulecontent avec l'inspecteur... à condition de le lire dans la boite qui s'affiche sur le côté droit de l'inspecteur, parce que si je lis le résultat directement sur les petites vignettes qui s'affichent au-dessus de chaque élément à l'écran, j'obtiens un résultat différent (apparemment moins fiable donc) :
cf pièce jointe