Partage

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!






Learn, Code, Repeat

Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%
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.

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

"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é.
  • Editeur
  • Markdown