1. #1
    Membre à l'essai
    Femme Profil pro
    peintre
    Inscrit en
    août 2017
    Messages
    70
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : peintre

    Informations forums :
    Inscription : août 2017
    Messages : 70
    Points : 13
    Points
    13

    Par défaut Insérer barre verticale sur un ou plusieurs mots

    Bonjour,

    Je souhaite insérer un effet hover sur les liens de certains mots et j'aimerai qu'une barre verticale apparaisse de chaque côté du mot.
    J'ai cherché des codes mais jusque là j'ai trouvé que des codes de hover horizontaux.

    Merci pour votre aide

    canvas

  2. #2
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    373
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 373
    Points : 478
    Points
    478

    Par défaut

    As-tu cherché à utiliser les pseudo-éléments ::before et ::after ?
    Ce serait peut être ta solution ...

  3. #3
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 413
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 413
    Points : 20 794
    Points
    20 794

    Par défaut

    Bonjour,

    • Ajoute une classe sur ces liens (pour les distinguer des autres)
    • Passe ces liens en display:inline-block
    • ensuite, sur le :hover, ajouter des border-box et border-box


    Ça devrait faire la farce.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  4. #4
    Membre à l'essai
    Femme Profil pro
    peintre
    Inscrit en
    août 2017
    Messages
    70
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : peintre

    Informations forums :
    Inscription : août 2017
    Messages : 70
    Points : 13
    Points
    13

    Par défaut

    Bonjour à tous merci pour votre aide.
    Alors voilà, je suis débutant donc je cherche pas mal avant de trouver des solutions...
    Pour le moment j'ai réussi à créer un rectangle autour du lien seulement je souhaiterai supprimer les ligne du haut et du bas.
    De plus, ... autre question... comment gérer l'espacement entre le trait et le mot?

    Voilà le test que j'ai fait: https://jsfiddle.net/eevzksnv/

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <div class="container">
    <div class="footer" href="default.asp" target="_blank">Test</div></div>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    div.footer {  
    font-family: sans-serif;
    font-size:12px;
    font-variant: small-caps;
    text-align: center;
    }
     
    div.footer:link {color:#000000;}
    div.footer:hover{color:#cccccc;}
    div.footer: display{inline-block;
    }
     
    div.container {
      width:200;
      border:2px solid black;
    }
    Merci pour votre aide

    novis

  5. #5
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 413
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 413
    Points : 20 794
    Points
    20 794

    Par défaut

    Bonjour,

    il va falloir apprendre les bases du HTML...
    Un lien se met dans une balise <a>.

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <p>
      Ceci est un <a href="default.asp">lien normal</a>.
    </p>
    <p>
      Voici un <a class="alink" href="default.asp">lien avec bordures</a> de chaque coté !
    </p>
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    /* style général des liens */
    a {
      font-family: sans-serif;
      font-size: 100%;
      font-variant: small-caps;
      text-align: center;
      text-decoration: underline;
      color: darkblue;
    }
    a:hover {
      color: darkred;
    }
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    /* style particulier : liens avec bordures */
    a.alink {
      color: darkorange;
      padding: 0 2px;
      border-left: 1px solid transparent;
      border-right: 1px solid transparent;
      text-decoration: none;
    }
    a.alink:hover {
      display: inline-block;
      color: green;
      border-left: 1px solid green;
      border-right: 1px solid green;
      text-decoration: none;
    }
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  6. #6
    Membre à l'essai
    Femme Profil pro
    peintre
    Inscrit en
    août 2017
    Messages
    70
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : peintre

    Informations forums :
    Inscription : août 2017
    Messages : 70
    Points : 13
    Points
    13

    Par défaut

    ha ok, merci pour votre aide!!
    d 'ou l 'intérêt de mettre une div pour éviter que cela ne s applique à tous les liens... je comprends mieux...
    merci
    je vais tester!

  7. #7
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 413
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 413
    Points : 20 794
    Points
    20 794

    Par défaut

    Pas une div. Une classe CSS.

    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

Discussions similaires

  1. Apparition des barres verticales sur le bas de mon écran
    Par patricia_zer dans le forum Ordinateurs
    Réponses: 5
    Dernier message: 23/10/2015, 08h54
  2. [XL-2010] Comment positionner une barre verticale sur un graphique
    Par juju05 dans le forum Macros et VBA Excel
    Réponses: 1
    Dernier message: 06/09/2012, 22h24
  3. Réponses: 23
    Dernier message: 17/09/2008, 11h01
  4. Recherche sur plusieurs mots-clés
    Par Freedolphin dans le forum Installation
    Réponses: 3
    Dernier message: 10/12/2007, 03h11
  5. trouver plusieurs mots sur page web et les surligner
    Par biggione dans le forum VB 6 et antérieur
    Réponses: 3
    Dernier message: 08/08/2006, 16h22

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo