MiniGriSpip

frdm · 10-07-2007 06:45:05

Bonjour,

J'ai un problème de CSS qui semble dépasser mes capacités spontanées unsure et comme il est lié aux caractéristiques de Mgs j'ose le poser ici.

Dans Mgs, les liens qu'ils soient "internes" ou "externes" sont signalés de la même façon (ce qui me convient pour un site documentaire, et n'alourdit pas l'affichage) : par un souligné pointillé discret et un fond.

Or, mon site est tellement documentaire que des liens peuvent se succéder dans une phrase et l'on finit par ne plus voir où termine le lien précédent et où commence le suivant, sans concentration excessive sur cet aspect (repérer l'espace non souligné entre deux liens !).
Et, encore plus gênant, lorsque je fais un pdf d'un de mes articles, le soulignement et le fond différenciés disparaissent, ce qui fait que l'on ne peut plus du tout repérer les liens, sauf en les survolant du curseur.

Je souhaite que tous les liens dans les articles se terminent par une espace + caractère unicode #9432 : ⓘ.
Mais comment fait-on cela ?
Je cherche depuis un bon moment une explication sur le web, et n'en trouve pas à mon niveau très modéré de technicité.

Cordial,
frdm

Dernière modification par frdm (10-07-2007 06:51:38)

FredoMkb · 10-07-2007 07:46:22

Bonjour Frdm smile

frdm a écrit:
Je souhaite que tous les liens dans les articles se terminent par une espace + caractère unicode #9432 : ?.

Je suis un peu pressé ce matin, je ne pourrais donc pas vraiment développer...

Comme-ça, au premier abord, j'y vois deux solutions possibles :

- Réaliser un filtre Spip qui appliquerait le caractère #9432 systèmatiquement à tous les liens présents dans les articles et brèves, ou mieux, un plugin Spip qui agirait sur l'ensemble des liens du site... seul hic, faut le développer... à priori ça ne semble pas trop compliqué, mais ça demande pas mal de temps quand-même... et perso, hélas je n'en dispose pas beaucoup en ce moment...

- Faire un mini-picto (petite bout de capture d'écran par exeple), du caractère #9432, puis ajouter ce picto aux feuilles de style des liens que tu décides signaler de la sorte, par exemple, voici ce que donnerait un style avec un picto aligné à droite (exemple non testé faute de temps) :

Code:

a, a:link {
    background: url(img/pictoLien.gif) no-repeat right center;
    padding: 0px 15px 0px 0px;
}

On admet donc que le fichier image du picto se nomme "pictoLien.gif", puis on admet que ses dimensions sont de 15 pixels, on applique donc un "padding" de cette valeur à droite du lien pour laisser apparaître le picto... petit avantage de cette méthode, comme il s'agit d'une image, cette solution ne produira aucun problème d'encodage des caractères au moment de générer le Pdf...

Voilà... je dois partir, désolé de ne pouvoir entrer un peu plus dans les détails, j'espère que d'autres pourront venir donner leur avis et éventuellement corriger/compléter ces deux pistes...

à+ smile

frdm · 10-07-2007 08:34:04

Merci Fredo...

C'est bien d'un filtre articles et brèves dont j'aurais besoin ; sur l'ensemble du site cela ferait trop surchargé.

D'ailleurs ce que tu as répondu m'a fait comprendre pour partie des solutions opaques jusque là :
http://css.alsacreations.com/Accessibil … le-fenetre
http://www.daniel-lemire.com/blogue/200 … -externes/

et j'ai bricolé ceci :
a:after {
content: "\0000a0\24D8";
}
(sachant tout de même que la commande "after" ne fonctionne pas dans IE…),
que j'ai placé dans "mgs_style.css" ; cela s'applique alors à l'ensemble du site et c'est...
horrible blink . Il ne faut faire ça que sur les articles et brèves.

Je ne sais pas, pas encore, confectionner de filtre, je vais essayer de voir sur spip.net si je peux m'améliorer…

Merci,
frdm

Je me réponds-suite.
j'ai trouvé en fin de cette page : http://www.spip.net/fr_article901.html
le principe des filtres, et comme le principe est de langage php, déjà que je rame en html...
donc comme cela semble impossible en simple CSS pour s'appliquer seulement au corps des articles et brèves, je pense que mon idée ne mérite des "développements"… par d'autres huh , que si elle est d'un intérêt un tant soit peu collectif…

À+, je dis si je trouve d'autres pistes…
frdm

Dernière modification par frdm (10-07-2007 09:10:17)

FredoMkb · 10-07-2007 09:39:28

Re... vite fait, entre deux rendez-vous blink wink

Un filtre peut en effet être une solution pour bien cibler le champ d'action, mais les feuille de style peuvent aussi agir sur un type délément en particulier, par exemple, si tu souhaites modifier l'apparence uniquement des liens présents dans les corps des articles et brèves, il faut indiquer le chemin vers l'objet qui contient ces textes, ce qui donnerait, pour Mgs, un truc du genre (toujours non testé) :

Code:

.mgs_article .mgs_texte_int a {
    background: url(img/pictoLien.gif) no-repeat right center;
    padding: 0px 15px 0px 0px;
}

.mgs_article .mgs_texte_int a:link {
    background: url(img/pictoLien.gif) no-repeat right center;
    padding: 0px 15px 0px 0px;
}

Donc, "mgs_article" est la classe du bloc général contenant les articles et brèves, puis la classe "mgs_texte_int" cible uniquement le bloc affichant les textes des articles et brèves, enfin, "a" et "a:link" sont deux balises identiques, seulement, les récentes normes préconisent "a:link" alors que "a" est juse pour assurer une compatiblilité descendente avec certains navigateurs...

On aurait pu écrire ces deux styles sur une seule définition, de la manière suivante :

Code:

.mgs_article .mgs_texte_int a, .mgs_article .mgs_texte_int a:link {
    background: url(img/pictoLien.gif) no-repeat right center;
    padding: 0px 15px 0px 0px;
}

Ceci est une peu moins lisible que la première méthode, mais elle est plus simple à maintenir et mettre à jour...

Voilà... j'y vais vite à mon prochain rendez-vous... à+ smile

frdm · 10-07-2007 19:14:05

FredoMkb a écrit:

Code:

.mgs_article .mgs_texte_int a, .mgs_article .mgs_texte_int a:link {
    background: url(img/pictoLien.gif) no-repeat right center;
    padding: 0px 15px 0px 0px;
}

C'est impeccable, exactement ce que je cherchais à obtenir, et en plus avec tes explications je comprends la démarche du code ; il me reste à améliorer mon pictogramme.
Heu… juste un détail : avec ce code, le pictogramme se place aussi sur les simples ancres nommées, il faudrait pouvoir exclure ce cas.
Et puis pour que cela marche il faut que je mette chez moi url(/img/pictoi.jpg), c'est-à-dire que je dois mettre un / devant img pour que l'image soit trouvée — pourquoi je dois faire ça (trouvé en tâtonnant) de différent des instructions que je vois partout, je ne sais pas.
À+, frdm

FredoMkb · 11-07-2007 09:32:43

Bonjour Frdm smile

frdm a écrit:
Heu… juste un détail : avec ce code, le pictogramme se place aussi sur les simples ancres nommées, il faudrait pouvoir exclure ce cas.

Ha oui, excellente remarque, je n'y avait pas pensé... voici une autre proposition pour corriger ce problème :

Code:

.mgs_article a.spip_out {
    background: url(img/pictoLien.gif) no-repeat right center;
    padding: 0px 15px 0px 0px;
}

Voir petite explication sur la proposition suivante...

frdm a écrit:
Et puis pour que cela marche il faut que je mette chez moi url(/img/pictoi.jpg), c'est-à-dire que je dois mettre un / devant img pour que l'image soit trouvée — pourquoi je dois faire ça (trouvé en tâtonnant) de différent des instructions que je vois partout, je ne sais pas.

Tiens-tiens... c'est bizarre en effet... blink

Tu as bien placé le picto dans le dossier "img" du dossier du squelette ?
Et le fichier "mgs_styles.css" se trouve bien au premier nivau du dossier du squelette ?

Si la réponse et oui deux fois, alors je ne comprends pas bien... bref, si celà fonctionne avec un slash au début, je pense qu'il faut le garder tel quel... on trouvera un jour le fin mot de l'histoire wink

Enfin, j'ai pris un moment pour explorer ta piste de style Css, avec l'utilisation de la pseudo classe ":after" (que je ne connaissaît pas, je l'avoue), puis je suis arrivé à faire quelque chose qui à l'air de bien fonctionner dans les brèves et articles...

Voici donc le style Css qui pourrait éviter d'utiliser un picto dans les liens :

Code:

.mgs_article a.spip_out:after {
    content: "\0000a0\24D8";
    font-size: 0.85em;
}

Donc, pour la petite explication, la classe "spip_out" est automatiquement appliquée par Spip au code des liens ciblant des sources externes présents dans les articles, brèves et commentaires.

Du coup, il suffit de parmétrer cette classe pour obtenir le résultat que tu souhaitais...

D'autre part, je me suis penché quelques minutes pour réliser un petit filtre qui ajouterai, directement dans le code des pages, le code nécessaire pour les liens sortants, code que j'ai récupére de ta page sommaire, le voici :

Code:

/******************************/
/* Filtre lien_ext */
/******************************/
/* Version : 1.0 */
/* Date : 07/2007 */
/* Realisation : FredoMkb sur une idée de Frdm */
/* Utilisation : [(#TEXTE|lien_ext)] ou [(#TEXTE*|autres_filtres|propre|lien_ext)] */
/******************************/
function lien_ext($texte) {
    if (strpos($texte, 'spip_out') !== false) {
        $lien = '<span style="font-family: \'Arial Unicode MS\'; font-size: 80%;">?</span>';
        $texte = preg_replace('#<a(.*?)spip_out(.*?)<\/a>#s', '<a$1spip_out$2 '.$lien.'</a>', $texte);
    }
    return $texte;
}
/******************************/
/* Fin Filtre lien_ext */
/******************************/

Il suffit d'appliquer ce filtre sur la balise "#TEXTE" des articles, brèves et comentaires pour que les liens externes reçoivent le caractère spécial à afficher.

L'installation de ce filtre est relativement simple :

1. Faire un copier/coller du code ci-dessus pour le coller à la fin du fichier "mes_fonctions.php" ;

2. Appliquer le filtre sur la balise "#TEXTE" des boucles ARTICLES, BREVES et FORUMS, des fichiers "article.html", "breve.html" et "inc-forum.html" respectivement, de la manière suivante :

Code:

[(#TEXTE|lien_ext)]

Ou avec cette autre syntaxe s'il y a d'autres filtres avant :

Code:

[(#TEXTE*|autres_filtres|propre|lien_ext)]

3. Enfin, il faut enregistrer les modifications de tous ces fichiers puis vider le cache de Spip (espace privé -> Configuration -> Vider le cache).

Donc, en gros, il y a désormais trois solutions pour afficher le caractère que tu souhaitais dans les liens sortants, chqu'une possède ses avantages et incovénients, dont voici ceux que j'entrevois :

1. Solution Css avec picto :
- Avantages : il s'agit d'un style Css, ce qui assure une certaine rapidité d'affichage, tout en autorisant des éventuels changements ultérieurs de manière très simple, enfin, comme il s'agit d'une image, l'impression ne devrait poser aucun souci d'encodage de caractères ;
- Incovénients : l'utilisation d'un picto peut parfois, sous certaines conditions, poser quelques ralentissements ou problèmes d'affichage ou chargement des pages.

2. Solution CSS avec caractère unicode :
- Avantages : là aussi, le fait que ce soit un style Css c'est un atout dans la rapidité d'affichage, de plus, comme il s'agit d'un caractère, les temps de chargement et d'affichage des pages est d'autant moins ralenti qu'avec des pictos ;
- Inconvénients : les caractères Unicode peuvent parfois poser des problèmes d'affichage selon les réglages des certains navigateurs, puis ils peuvent aussi poser des soucis d'encodage lors des impressions, enfin, la pseudo classe ":after" n'est sûrement pas bien interprétée par tous les navigateurs (je ne l'ai pas testé partout, en tout cas, sous Safari et Firefox ça ne semble pas poser de souci), faisant partie des nouvelles spécifications Css.

3. Solution avec filtre Spip dédié :
- Avantages : posibilité d'insérer du code html dans les codes des liens, ce qui peut autoriser d'autres personnalisations spécifiques ;
- Inconvénients : ralentissement lors de la fabrication des pages côté serveur, plus on ajoute des filtres et autres plugins, plus on donne du boulot au moteur de Spip, de plus, on alourdi le poid des pages en y insérant du code supplémentaire, ce qui peut produire des ralentissements lors des chargement des pages.

Voilà Frdm, je pense qu'avec ces trois pistes tu peux désormais choisir la solution la plus judicieuse pour ton site, sachant que si l'une pose des problèmes majeurs, tu peux toujours adopter une autre.

Tiens-nous au courant Stp... à + smile

frdm · 11-07-2007 15:09:28

Bonjour Fredo,
C'est super que tu te sois intéressé comme ça à cet enrichissement des liens, je reviens là-dessus plus tard ce soir après mise en oeuvre, et tu viens de me faire découvrir par déduction qu'il y a aussi "spip-in" si l'on veut le même signalement sur les liens internes que sur les liens externes par "sip-out", ce qui est mon cas (je ne cherche pas à faire distinguer les liens externes des liens internes, mais cela peut-être important pour d'autres).
D'emblée je précise que l'instruction "after" n'est pas traitée par IE, mais regardant l'autre fil très actif en ce moment, sur l'adaptation à IE, cela donne des pistes pour la Css spéciale à IE : tout mais pas "after" dans cette feuille de style spéciale IE.
Pour l'instant je vois que tu as pensé à indiquer une taille spécifique dans le cas de l'usage d'un caractère unicode ; là aussi ça me conduit à penser que non seulement c'est judicieux, mais en plus il faudrait pour que le caractère soit uniforme qu'il soit "ni italique ni gras ni capitales ni small-caps", pour avoir une allure constante.
Voilà rapidement, plus ce soir après mes essais.
Encore merci,
frdm

frdm · 11-07-2007 20:14:10

Salut Fredo,

Alors voilà : j'ai décidé de conserver ta suggestion d'utiliser un pictogramme (image), pour deux raisons :
1.- ainsi je suis sûr que le "signe" affiché est toujours le même, quel que soit l'environnement typographique (et ainsi le "signe" ne change pas de taille quand on fait varier la taille de la police à l'affichage navigateur)
2.- et aussi je peux avoir un picto inverse de mon i cerclé unicode #8432 (= \24D8), ce qui donne un petit point d'exclamation cerclé, exactement symétrique horizontalement au i cerclé ; je me sers de ce i inversé cerclé pour les liens internes, et du i cerclé pour les liens externes.
- LE BUT : que dans les deux cas les visiteurs se sentent coupables s'ils ne vont pas chercher l'information ! entre un i cerclé pour "information" (externe) et un point d'exclamation cerclé pour "attention" (interne), peut-être que l'on comprend qu'il vaudrait mieux avoir visité les liens avant de poser des questions… c'est mon but, que ce soit implicitement compris, "senti" par les visiteurs.
- Évidemment… il reste un hic, comme toujours, c'est que si je saisis un lien complet avec http://et.cete.ra/ qui pointe vers une page "interne", ce lien est traité comme lien externe, donc il y a intérêt à une discipline de toujours noter les liens internes par les raccourcis Spip, du genre [->article666].

Voici donc le code que j'ai inséré à la fin de mgs_style.css :

Code:

.mgs_article a.spip_out {
    background: url(/IMG/jpg/pictoi.jpg) no-repeat right center;
    padding: 0px 15px 0px 0px;
}

.mgs_article a.spip_in {
    background: url(/IMG/jpg/pictoinv.jpg) no-repeat right center;
    padding: 0px 15px 0px 0px;
}

et pour voir, cliquer sur "Site web" ici dans la colonne de gauche, sous mon pseudo-initiales.
À+, et encore merci Fredo smile
frdm

Ajout :
Et bien entendu, ça coince avec IE… si le lien s'étend sur plus d'une ligne, le picto se trouve placé chevauchant l'une des lignes, ou en surcharge, et selon les cas coupé, on n'en voit que la moitié supérieure… incroyable IE.

Donc il faudrait utiliser le filtre, mais qui ajoute le picto, pas le caractère unicode, pour les raisons précitées, et que le filtre traite aussi les liens internes pour un picto différent : et ensuite, à pile ou face peut-être cette solution serait bonne assez aussi pour IE ?
Mais je ne sais pas modifier en ce sens le filtre que tu as proposé…
Et au fait, au point où nous en sommes, je vais mettre un lien vers cette discussion dans celle où Sebasalex s'occupe de la compatibilité IE

Dernière modification par frdm (11-07-2007 20:35:48)

FredoMkb · 12-07-2007 09:29:57

Salut Frdm smile

Petite idée en passant, j'ai encore une journée bien mouvementée... j'y reviendrais plus tranquil ce soir...

frdm a écrit:
Et bien entendu, ça coince avec IE… si le lien s'étend sur plus d'une ligne, le picto se trouve placé chevauchant l'une des lignes, ou en surcharge, et selon les cas coupé, on n'en voit que la moitié supérieure… incroyable IE.

Donc il faudrait utiliser le filtre, mais qui ajoute le picto, [...]

Je me disais, si au lieu d'utiliser la valeur "center" pour l'attribut "background" on mettait à la place "bottom", ça pourrait résoudre le problème sous IE (enfin, je suppose siffle ), mais reste à savoir comment réagiront les autres navigateurs (!?) blink

Donc, l'idée est de changer l'attribut "backgroud" de la manière suivante :

Code:

background: url(/IMG/jpg/pictoi.jpg) no-repeat right bottom;

Si ce test ne s'avère pas concluant, je regarderais pour adapter le filtre suivant tes indications, ça ne devrait pas être bien difficile à faire...

Tiens-nous au courant Stp... à+ smile

FredoMkb · 12-07-2007 23:12:01

Bonjour Frdm smile

Alors, voici une adaptation du filtre pour être utilisée avec des petites images (pictos), aussi bien sur les liens externes qu'internes, j'en ai profité pour lui changer son petit nom afin qu'il soit plus parlant :

Code:

/**********************************************************************************************************/
/* Filtre pictos_liens */
/**********************************************************************************************************/
/* Version : 1.0 */
/* Date : 07/2007 */
/* Realisation : FredoMkb d'après une idée de Frdm, voir :<http://fredomkb.free.fr/forum/viewtopic.php?id=114> */
/* Utilisation : Sur la balise #TEXTE des boucles ARTICLES, BREVES et FORUMS,  
        par exemple : [(#TEXTE|pictos_liens)] ou [(#TEXTE*|autres_filtres|propre|pictos_liens)] */
/**********************************************************************************************************/
function pictos_liens($texte) {
    // Picto sur les liens externes
    if (strpos($texte, 'spip_out') !== false) {
        $image = '<img src="/IMG/jpg/pictoi.jpg" alt="Lien externe" title="Lien externe" class="mgs_minipicto mgs_minipicto_ext" />';
        $texte = preg_replace('#<a(.*?)spip_out(.*?)<\/a>#s', '<a$1spip_out$2 '.$image.'</a>', $texte);
    }
    // Picto sur les liens internes
    if (strpos($texte, 'spip_in') !== false) {
        $image = '<img src="/IMG/jpg/pictoinv.jpg" alt="Lien interne" title="Lien interne" class="mgs_minipicto mgs_minipicto_int" />';
        $texte = preg_replace('#<a(.*?)spip_in(.*?)<\/a>#s', '<a$1spip_in$2 '.$image.'</a>', $texte);
    }
    return $texte;
}
/**********************************************************************************************************/
/* Fin Filtre pictos_liens */
/**********************************************************************************************************/

L'installation est en tout point semblable à la précédente version, seul le nom du filtre change...

Petit détail qui peut avoir son importance, les balises "img" insérées par le filtre disposent des deux "class" chacune, une comune nommée "mgs_minipicto" et une différente selon qu'il s'agisse d'un lien externe "mgs_minipicto_ext" ou interne "mgs_minipicot_int", ceci peut être utile pour bien personnaliser l'aspect et/ou comportement de chaque picto avec des styles dédiés...

Voilà, j'avoue que je l'ai fait un peu vite et que je n'ai pas pris le soin de le tester, mais je pense que ça ne devrait pas poser de problème particulier, enfin, j'espère blink wink

Voilà pour cette fournée... tiens-moi au courant Stp... à+ smile

frdm · 13-07-2007 06:54:12

Je récapitule d'abord les instructions que j'ai appliquées avec succès :

FredoMkb a écrit:

… voici une adaptation du filtre pour être utilisée avec des petites images (pictos), aussi bien sur les liens externes qu'internes, j'en ai profité pour lui changer son petit nom afin qu'il soit plus parlant :

Code:

/**********************************************************************************************************/
/* Filtre pictos_liens */
/**********************************************************************************************************/
/* Version : 1.0 */
/* Date : 07/2007 */
/* Realisation : FredoMkb d'après une idée de Frdm, voir :<http://fredomkb.free.fr/forum/viewtopic.php?id=114> */
/* Utilisation : Sur la balise #TEXTE des boucles ARTICLES, BREVES et FORUMS,  
        par exemple : [(#TEXTE|pictos_liens)] ou [(#TEXTE*|autres_filtres|propre|pictos_liens)] */
/**********************************************************************************************************/
function pictos_liens($texte) {
    // Picto sur les liens externes
    if (strpos($texte, 'spip_out') !== false) {
        $image = '<img src="/IMG/jpg/pictoi.jpg" alt="Lien externe" title="Lien externe" class="mgs_minipicto mgs_minipicto_ext" />';
        $texte = preg_replace('#<a(.*?)spip_out(.*?)<\/a>#s', '<a$1spip_out$2 '.$image.'</a>', $texte);
    }
    // Picto sur les liens internes
    if (strpos($texte, 'spip_in') !== false) {
        $image = '<img src="/IMG/jpg/pictoinv.jpg" alt="Lien interne" title="Lien interne" class="mgs_minipicto mgs_minipicto_int" />';
        $texte = preg_replace('#<a(.*?)spip_in(.*?)<\/a>#s', '<a$1spip_in$2 '.$image.'</a>', $texte);
    }
    return $texte;
}
/**********************************************************************************************************/
/* Fin Filtre pictos_liens */
/**********************************************************************************************************/

Petit détail qui peut avoir son importance, les balises "img" insérées par le filtre disposent des deux "class" chacune, une comune nommée "mgs_minipicto" et une différente selon qu'il s'agisse d'un lien externe "mgs_minipicto_ext" ou interne "mgs_minipicot_int", ceci peut être utile pour bien personnaliser l'aspect et/ou comportement de chaque picto avec des styles dédiés...

FredoMkb a écrit:
L'installation de ce filtre est relativement simple :

1. Faire un copier/coller du code ci-dessus pour le coller à la fin du fichier "mes_fonctions.php" ;

2. Appliquer le filtre sur la balise "#TEXTE" des boucles ARTICLES, BREVES et FORUMS, des fichiers "article.html", "breve.html" et "inc-forum.html" et "sommaire.html" (pour l'article en édito) respectivement, de la manière suivante :
Code:
[(#TEXTE|lien_ext)]
Ou avec cette autre syntaxe s'il y a d'autres filtres avant :
Code:
[(#TEXTE*|autres_filtres|propre|lien_ext)]
3. Enfin, il faut enregistrer les modifications de tous ces fichiers puis vider le cache de Spip (espace privé -> Configuration -> Vider le cache).

Tous les problèmes sont résolus, c'est parfait. Merci Fredo ! ! top
Plus aucun problème de chevauchement avec les derniers caractères du lien, ou positionnement bizarre, que ce soit avec Firefox, Opera ou IE.
Il y aurait juste la position du picto sur la ligne à améliorer : la position "center" que tu avais fait figurer dans la solution antérieure qui concernait "mgs_style.css", cette solution "center" donnait le meilleur positionnement vertical. Est-il possible de retrouver cette instruction "center" dans la solution par filtre ? Car actuellement, le picto frôle le soulignement pointillé de la ligne au dessus, quand le lien s'étend sur plus d'une ligne.

Encore merci, et j'espère que d'autres trouveront que ton travail sur ces pictos conforte encore le style de Mgs…

À+, fr

FredoMkb · 18-07-2007 06:27:44

Bonjour Frdm smile

frdm a écrit:
Je récapitule d'abord les instructions que j'ai appliquées avec succès :
[...]
2. ... et "sommaire.html" (pour l'article en édito) ...

He oui, évidemment, c'était sûr que j'allais oublier quelque chose blink heureusement que les MiniGrisistes (mmm... MiniGrisiens, MiniGrisois, MiniGrisais... ) veillent au grain cheese wink

frdm a écrit:
Il y aurait juste la position du picto sur la ligne à améliorer : la position "center" que tu avais fait figurer dans la solution antérieure qui concernait "mgs_style.css", cette solution "center" donnait le meilleur positionnement vertical. Est-il possible de retrouver cette instruction "center" dans la solution par filtre ? Car actuellement, le picto frôle le soulignement pointillé de la ligne au dessus, quand le lien s'étend sur plus d'une ligne.

Je pense qu'on peut faire quelque chose, mais je ne peu le tester pour l'instant...
Tente d'utiliser l'attribut "padding" sur le style nommé "mgs_minipicto", un peu comme ceci :

Code:

.mgs_minipicto { padding: 2px 0px 0px 0px; }

Modifie les valeurs du "padding" jusqu'à obtenir la présentation que tu souhiates (juste pour rappel, la première valeur concerne le sommet de l'objet, puis on tourne dans les sens des aiguilles d'une montre).

à+ smile

frdm · 18-07-2007 07:41:43

FredoMkb a écrit:
Tente d'utiliser l'attribut "padding" sur le style nommé "mgs_minipicto", un peu comme ceci :
Code:
.mgs_minipicto { padding: 2px 0px 0px 0px; }
Modifie les valeurs du "padding" jusqu'à obtenir la présentation que tu souhaites (juste pour rappel, la première valeur concerne le sommet de l'objet, puis on tourne dans les sens des aiguilles d'une montre).

Bonjour Fredo,
Je viens d'essayer, ça ne bouge pas d'un poil à l'affichage, même en mettant 10px.
C'est bien toujours dans mgs_style.css qu'il fallait placer le bout de code ? Je l'ai mis à la fin.
Mais c'est du perfectionnisme de ma part, l'affichage est très correct même avec le petit décalage vers le haut, on pourrait aussi dire que c'est étudié pour… donc, pas urgent en tout cas, la perfection peut attendre... mais ce serait la perfection d'y arriver ! Malheureusement les Apéros-Spip de Paris sont interrompus pour les vacances, je n'ai plus ma source de solutions pour briller ici... siffle
À+,
frdm

FredoMkb · 18-07-2007 07:47:06

Ha... blink

Ok, tente une de ces deux pistes :

1. Change "padding" par "margin" (on sait jamais wink )

2. Ajoute, au début du nom du style, un "img", ce qui donnerait :

Code:

img.mgs_minipicto { padding: 2px 0px 0px 0px; }

Oui oui, c'est toujours dans "mgs_styles.css", à la fin du fichier c'est farpait wink

a+ smile

frdm · 18-07-2007 08:11:50

Ça marche avec img.mgs_minipicto,
aussi bien avec margin qu'avec padding,
mais dans les deux cas… c'est toute la ligne qui descend pleure
Ça ne se voit qu'avec de petites polices, je me suis contenté de 3px pour décoller les pictos de soulignements de liens à la ligne supérieure.
Faute encore laisser mûrir… unsure
Merci, smile
frdm

frdm · 27-07-2007 03:40:15

Bonjour Fredo,
J'ai piqué cette mise en forme dans le code d'affichage d'un blog "Blogger", et ça résout tout :
donc, dans mgs_style.css, à la fin j'ai indiqué :

Code:

img.mgs_minipicto { 
    border: 0pt none;
    vertical-align: middle;
}

et tout va bien, les minipictos sont centrés verticalement sur la ligne, quelle que soit la taille (hauteur) de la ligne... oui
À+,
frdm

MiniGriSpip

Annonce

#1 10-07-2007 06:45:05

Signalement des liens dans Mgs

#2 10-07-2007 07:46:22

Re: Signalement des liens dans Mgs

frdm a écrit:

Code:

#3 10-07-2007 08:34:04

Re: Signalement des liens dans Mgs

#4 10-07-2007 09:39:28

Re: Signalement des liens dans Mgs

Code:

Code:

#5 10-07-2007 19:14:05

Re: Signalement des liens dans Mgs

FredoMkb a écrit:

Code:

#6 11-07-2007 09:32:43

Re: Signalement des liens dans Mgs

frdm a écrit:

Code:

frdm a écrit:

Code:

Code:

Code:

Code:

#7 11-07-2007 15:09:28

Re: Signalement des liens dans Mgs

#8 11-07-2007 20:14:10

Re: Signalement des liens dans Mgs

Code:

#9 12-07-2007 09:29:57

Re: Signalement des liens dans Mgs

frdm a écrit:

Code:

#10 12-07-2007 23:12:01

Re: Signalement des liens dans Mgs

Code:

#11 13-07-2007 06:54:12

Re: Signalement des liens dans Mgs

FredoMkb a écrit:

Code:

FredoMkb a écrit:

Code:

Code:

#12 18-07-2007 06:27:44

Re: Signalement des liens dans Mgs

frdm a écrit:

frdm a écrit:

Code:

#13 18-07-2007 07:41:43

Re: Signalement des liens dans Mgs

FredoMkb a écrit:

Code:

#14 18-07-2007 07:47:06

Re: Signalement des liens dans Mgs

Code:

#15 18-07-2007 08:11:50

Re: Signalement des liens dans Mgs

#16 27-07-2007 03:40:15

Re: Signalement des liens dans Mgs

Code:

Pied de page des forums