Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Code CSS "raccourcir un lien"

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

Résolu Code CSS "raccourcir un lien"

Message par jeremalix le 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 : 504
Inscrit(e) le : 21/12/2006

Voir le profil de l'utilisateur 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 le 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 : 111
Inscrit(e) le : 19/08/2013

Voir le profil de l'utilisateur 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 le 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 : 504
Inscrit(e) le : 21/12/2006

Voir le profil de l'utilisateur 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 le 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

Voir le profil de l'utilisateur 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 le 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 : 504
Inscrit(e) le : 21/12/2006

Voir le profil de l'utilisateur 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 le 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 : 15802
Inscrit(e) le : 08/08/2010

Voir le profil de l'utilisateur 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 le 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 : 504
Inscrit(e) le : 21/12/2006

Voir le profil de l'utilisateur 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 le 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 : 15802
Inscrit(e) le : 08/08/2010

Voir le profil de l'utilisateur 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 le 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 : 504
Inscrit(e) le : 21/12/2006

Voir le profil de l'utilisateur 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 le 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 : 15802
Inscrit(e) le : 08/08/2010

Voir le profil de l'utilisateur 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 le 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 : 504
Inscrit(e) le : 21/12/2006

Voir le profil de l'utilisateur 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 Milouze14 le 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
Milouze14

Milouze14
Membre actif

Masculin
Messages : 5880
Inscrit(e) le : 18/04/2005

Voir le profil de l'utilisateur https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

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

Message par jeremalix le Dim 1 Oct 2017 - 9:21

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

jeremalix
*****

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

Voir le profil de l'utilisateur 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 Milouze14 le 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++
Milouze14

Milouze14
Membre actif

Masculin
Messages : 5880
Inscrit(e) le : 18/04/2005

Voir le profil de l'utilisateur https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

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

Message par Lixyr le 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 :


EN PRÉSENCE RÉDUITE LA SEMAINE - RÉPOND AUX MP
fff - Code CSS "raccourcir un lien" G2J0e
Lixyr

Lixyr
Aidactive
Aidactive

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

Voir le profil de l'utilisateur
Lixyr a été remercié(e) par l'auteur de ce sujet.

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

Message par jeremalix le 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 : 504
Inscrit(e) le : 21/12/2006

Voir le profil de l'utilisateur 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


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