Partage
  • Partager sur Facebook
  • Partager sur Twitter

Ajouter un titre dans ma border top

    16 avril 2018 à 13:58:06

    Bonjour! =)

    Tout est dit dans le titre... je cherche à placer, en HTML, CSS, ou avec des classes Bootstrap, un titre sur ma "border-top".
    J'ai cherché mais pas trouvé grand chose de probant sur le net "sans doute pas les bons mots clé encore).

    L'effet que je cherche à faire est le suivant : 


    Merci pour vos réponses!






    • Partager sur Facebook
    • Partager sur Twitter
    Learn, Code, Repeat
      16 avril 2018 à 14:28:59

      Salut :)

      Je me souviens d'avoir vu un sujet comme celui-ci récemment dans ce forum mais je ne le retrouve plus...

      Moi j'essaierais de "poser" le titre sur la bordure avec le positionnement absolu mais ça ne fonctionne pas si le fond doit être transparent au niveau du titre.

      • Partager sur Facebook
      • Partager sur Twitter
        16 avril 2018 à 14:29:34

        Bonjour,

        Un exemple avec le pseudo-élément ::before :

        http://jsbin.com/runelil/2/edit?html,css,output

        <div class="test">Texte dans la div</div>

        CSS

        .test{
          border:5px solid darkred;
          margin-top:1rem;
          padding:1rem;
          position:relative;
          border-radius:5px;
        }
        
        .test::before{
          content:'Texte sur bordure';
          position:absolute;
          background-color:white;
          color:darkred;
          top:-1rem;
          font-size:2rem;
          line-height:1rem;
          padding:0 2px;
        }




        -
        Edité par philiga 16 avril 2018 à 14:31:29

        • Partager sur Facebook
        • Partager sur Twitter
        "La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)

        Ajouter un titre dans ma border top

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
        • Editeur
        • Markdown