IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Insérer barre verticale sur un ou plusieurs mots


Sujet :

CSS

  1. #1
    Membre à l'essai
    Femme Profil pro
    peintre
    Inscrit en
    Août 2017
    Messages
    82
    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 : 82
    Points : 17
    Points
    17
    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 éclairé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    Juin 2012
    Messages
    519
    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 : 519
    Points : 705
    Points
    705
    Par défaut
    As-tu cherché à utiliser les pseudo-éléments ::before et ::after ?
    Ce serait peut être ta solution ...

  3. #3
    Invité
    Invité(e)
    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.

  4. #4
    Membre à l'essai
    Femme Profil pro
    peintre
    Inscrit en
    Août 2017
    Messages
    82
    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 : 82
    Points : 17
    Points
    17
    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
    Invité
    Invité(e)
    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;
    }
    Dernière modification par Invité ; 08/11/2017 à 12h26.

  6. #6
    Membre à l'essai
    Femme Profil pro
    peintre
    Inscrit en
    Août 2017
    Messages
    82
    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 : 82
    Points : 17
    Points
    17
    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
    Invité
    Invité(e)
    Par défaut
    Pas une div. Une classe CSS.


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