Code CSS "raccourcir un lien"

5 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Code CSS "raccourcir un lien"

Message par jeremalix Ven 29 Sep 2017 - 11:18

Bonjour
Les liens trop longs mettent le bins' sur un topic.
J'ai donc rentré le code CSS qui les raccourcit (saisie1)
Mais... il raccourci également les images (saisie2)
Normal ? ? ? ?

fff - Code CSS "raccourcir un lien" 1118


fff - Code CSS "raccourcir un lien" 1021



Dernière édition par jeremalix le Mer 4 Oct 2017 - 11:11, édité 1 fois
jeremalix

jeremalix
*****

Masculin
Messages : 557
Inscrit(e) le : 21/12/2006

https://nul-55.1fr1.net/
jeremalix a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code CSS "raccourcir un lien"

Message par rmn73 Ven 29 Sep 2017 - 11:38

Bonjour,
On peut aussi simplement ne pas mettre le lien "brut" mais "l'habiller" ...

Code:

[url=mettre le lien brut ici]Message qui remplacera le lien long[/url]

Ça fait un petit peu de choses à coder mais pas trop.
avatar

rmn73
***

Masculin
Messages : 113
Inscrit(e) le : 19/08/2013

http://www.forum-abcc.fr
rmn73 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code CSS "raccourcir un lien"

Message par jeremalix Ven 29 Sep 2017 - 11:56

Bonjour
Oui....c'est une solution, mais les adhérents ne font pas l'effort.
J'ai mis sur la page "Portail" (en bas) un lien pour un site qui raccourcit les liens.
Personne ne l'utilise.
Alors je voulais contourner cette ...... désinvolture Very Happy

fff - Code CSS "raccourcir un lien" 328

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

Suite....
J'ai laissé tombé le CSS
Avec le code javascript ....... super !
jeremalix

jeremalix
*****

Masculin
Messages : 557
Inscrit(e) le : 21/12/2006

https://nul-55.1fr1.net/
jeremalix a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Code CSS "raccourcir un lien"

Message par Sen Hime Ven 29 Sep 2017 - 18:00

Bonjour,

Le résultat est normal parce que le CSS s'applique sur tous les liens sans distinction de contenu, que ce soit un texte ou une image. Je ne connais malheureusement pas de règle CSS qui permette de faire une différence en fonction du contenu (mais si je me trompe et que quelqu'un qui passe par ici en connait une, n'hésitez pas à me détromper), en revanche je vois une autre solution qui passerait par l'utilisation de Javascript.

L'idée serait de parcourir en Javascript le contenu des messages pour ajouter une classe CSS (par exemple "text-link") dynamiquement aux liens qui ne contiennent pas une image. Ensuite, il suffit d'appliquer le code CSS sur ces liens en particulier.

Côté CSS l'adaptation est minime, ça donne :
Code:
.postbody a.text-link {
   display: inline-block;
   max-width: 100px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   vertical-align: bottom;
}

Côté Javascript, il me semble que Forumactif importe la librairie jQuery par défaut, ce qui permettrait d'utiliser un code de ce genre :
Code:
<script type="text/javascript">
   $(function() {
      $('.postbody a').each(function() {
         if($(this).children('img').length == 0) {
            $(this).addClass('text-link');
         }
      });
   });
</script>
Sen Hime

Sen Hime
****

Féminin
Messages : 249
Inscrit(e) le : 24/03/2009

http://hyrulesjourney.fr-bb.com
Sen Hime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code CSS "raccourcir un lien"

Message par jeremalix Ven 29 Sep 2017 - 20:09

Hello rmn73 .....Sen Hime
Je vais essayer ces CSS
Mais question....
Je suis plutôt javascript car le titre me permet de me souvenir du but de ce javascript (je suis semi lambda)
Ce qui n'est pas le cas avec le CSS.
A moins que je puisse taper du texte avant le code sans que cela nuise à son fonctionnement.
Est-ce possible ? ?

fff - Code CSS "raccourcir un lien" 1022
jeremalix

jeremalix
*****

Masculin
Messages : 557
Inscrit(e) le : 21/12/2006

https://nul-55.1fr1.net/
jeremalix a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code CSS "raccourcir un lien"

Message par Neptunia Ven 29 Sep 2017 - 20:14

Bonjour Jeremalix


En CSS tout ce qui est placé entre /* et */ est un commentaire.
D'ailleurs votre capture écran montre un commentaire correct (ligne 66) et un autre incorrect (ligne 69)
Neptunia

Neptunia
Membre actif

Féminin
Messages : 17853
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code CSS "raccourcir un lien"

Message par jeremalix Ven 29 Sep 2017 - 21:36

Bonjour
Donc je dois être correct comme ceci.
C'est un "pense bête" qui n'aura pas d'influence sur le code.

fff - Code CSS "raccourcir un lien" 1123
jeremalix

jeremalix
*****

Masculin
Messages : 557
Inscrit(e) le : 21/12/2006

https://nul-55.1fr1.net/
jeremalix a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code CSS "raccourcir un lien"

Message par Neptunia Ven 29 Sep 2017 - 22:06

Parfait !

Par contre évitez les caractères spéciaux tels que les guillemets < >. Personnellement j'ai même pris l'habitude de ne pas utiliser d'accent ou de cédilles bien que l'on m'ait dit que cette précaution n'était pas nécessaire.
Neptunia

Neptunia
Membre actif

Féminin
Messages : 17853
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code CSS "raccourcir un lien"

Message par jeremalix Sam 30 Sep 2017 - 2:37

Re,
J'ai noté tous mes codes CSS sauf ....saisie ci-dessous.
Y en a t-il 1 ou 2 ? ?
Quel est (ou quels sont) le but ? ?


fff - Code CSS "raccourcir un lien" 1124
jeremalix

jeremalix
*****

Masculin
Messages : 557
Inscrit(e) le : 21/12/2006

https://nul-55.1fr1.net/
jeremalix a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code CSS "raccourcir un lien"

Message par Neptunia Sam 30 Sep 2017 - 4:41

Un code qui commence par un commentaire BEGIN (début) et termine par un commentaire END (fin). C'est typique des personnes prévoyantes (usage personnel) ou désireuses d'être mieux comprises (tutos ou libre-service).
Une structure que l'on retrouve sans cesse dans nos templates.

Rien qu'en me fiant aux commentaires fournis et aux identifiants utilisés, je dirai qu'il s'agit d'un tuto proposé à la communauté Forumactif visant à réduire l'encombrement pris par les citations.
Contribution proposée ou traduite par un non-anglophone (l'anglophone aurait utilisé .fm pour Forumotion à la place de .fa) mais par une personne habituée à coder pour les autres. Si le français est la langue de la diplomatie, l'anglais est celle de la programmation.

(Dis-moi comment tu codes, je te dirai qui tu es !)
Neptunia

Neptunia
Membre actif

Féminin
Messages : 17853
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code CSS "raccourcir un lien"

Message par jeremalix Sam 30 Sep 2017 - 8:55

Bonjour.
Tite plaisanterie....tu ne sauras donc jamais qui je suis Very Happy
------------------------
J'ai changé une couleur...#FF00FF à la place de #FFF
Aucun effet sur citation / code /
Je vais laisser comme ça et à un moment je verrai bien apparaître ce rose (#FF00FF)
jeremalix

jeremalix
*****

Masculin
Messages : 557
Inscrit(e) le : 21/12/2006

https://nul-55.1fr1.net/
jeremalix a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code CSS "raccourcir un lien"

Message par Invité Dim 1 Oct 2017 - 5:36

Hello jeremalix, Hélène et Sen Hime,

tu peux avec ce script et en excluant la signature (le cas échéant) mettre une class aux liens et au survol afficher dans une infobulle la totalité du lien.

Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Codes Javascript

Mets un titre explicite.
Coches sur les sujets.


Déposes ceci:
Code:
$(function(){
$('.postbody div:not(.signature_div)').find('a').each(function(){
var link=  $(this).attr('href');
$(this).addClass('M14_lien_long').attr('title',link);
});});

Penses a cliquer sur le bouton VALIDER

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajoutes ceci:

Code:

.M14_lien_long
{
 display: inline-block;
  max-width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom;
}



Penses à cliquer sur le bouton fff - Code CSS "raccourcir un lien" 3060548200

Si tu ne désires pas afficher le lien au survol.
Le script sera alors ainsi:

Code:

$(function(){
$('.postbody div:not(.signature_div)').find('a').each(function(){
$(this).addClass('M14_lien_long');
});});


Ou ce script tout bête (sans c.s.s) qui va donner comme titre aux liens "LINK":
Que tu pourras changer ici
Code:
$(this).html('LINK');

Code:

$(function(){
$('.postbody div:not(.signature_div)').find('a').each(function(){
$(this).html('LINK');
});});

fff - Code CSS "raccourcir un lien" 173

Wink
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code CSS "raccourcir un lien"

Message par jeremalix Dim 1 Oct 2017 - 9:21

Hello Milouze
Je me lance...
Merci..
jeremalix

jeremalix
*****

Masculin
Messages : 557
Inscrit(e) le : 21/12/2006

https://nul-55.1fr1.net/
jeremalix a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code CSS "raccourcir un lien"

Message par Invité Dim 1 Oct 2017 - 11:13

Re,
tu as aussi ce script qui au survol affichera le lien dans une infobulle faite maison Very Happy .

Code:
$(function(){
$('.postbody div:not(.signature_div)').find('a').each(function(){
var link=  $(this).attr('href');
  $(this).after('<div style="max-width:300px;max-height:60px;overflow:hidden;background:white;border:2px solid black;border-radius:10px;position: absolute;margin-top:20px;padding:4px 6px;color:black;display:none;">'+link+'</div>');
$(this).html('LIEN');
$(this).hover(function(){
$(this).next().toggle();
  });
});});



a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code CSS "raccourcir un lien"

Message par Lixyr Lun 2 Oct 2017 - 20:07

fff - Code CSS "raccourcir un lien" 3CGETGJJe rappelle qu'une seule question par sujet est autorisée, afin de favoriser les recherches ultérieures. Je vous prierai donc de rester sur le sujet initial qui consiste à trouver un moyen de réduire les liens en dehors des images !

Je vous invite à lire :


Pour faciliter les recherches, mettez un titre explicite.
Remerciez fff - Code CSS "raccourcir un lien" 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu fff - Code CSS "raccourcir un lien" 3592387030 pour prévenir la modération.

fff - Code CSS "raccourcir un lien" Baston10
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code CSS "raccourcir un lien"

Message par jeremalix Lun 2 Oct 2017 - 20:43

Bonjour
Lixyr a écrit:Je rappelle qu'une seule question par sujet est autorisée,
A quel moment, avec quelle question ai-je quitté le sujet initial ? ?
Si tel est le cas et que vous l'ayez supprimée, pouvez-vous me la rappeler ? ?
Serait-ce la tite parenthèse pour un tuyau sur la façon de mettre un texte "pense bête" au
début d'un code What a Face What a Face

jeremalix

jeremalix
*****

Masculin
Messages : 557
Inscrit(e) le : 21/12/2006

https://nul-55.1fr1.net/
jeremalix a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum