Bonjour, 

Je cherche à faire ça :

en CSS;

Mon idée : 

- une div "transparente" de la hauteur du texte;

- une div pour la ligne noire, centrée verticalement (selon méthode expliquée ici);

- une div (ou autre) pour mettre le texte par dessus.

Je m'en sors pour les deux premières étapes, mais pas pour la troisième... Ma méthode est-elle la bonne ou faut-il réfléchir autrement ?

Merci de votre aide et bonne journée.

Tu as plusieurs méthodes, regarde sur cette page : http://goetter.tumblr.com/post/36084887039/tes-pas-cap-première-édition

Merci pour ta réponse;

Problème : je ne comprends pas tout :-)

Voici ce que je fais :

.traitqqs {
 position: relative;
 overflow: hidden;
 border: 1px solid blue;}
    
.traitqqs:before, .traitqqs:after {
 position: absolute;
 top: 46%;
 width: 100%;
 height: 12px;
 content: '\a0';
 background-color: #504651;}
    
.traitqqs:before {
 margin-left: -50%;}
    
.ligneqqs p {
 width: 220px;
 padding: 20px;
 font-size: 2em;
 font-family: 'hipsterish', sans;
 background-color: #fff;
 margin-left: 45px;
 border: 1px solid red;}

<div class="ligneqqs"><div class="traitqqs"><p>quelques mots...</p></div></div>

et voici ce que j'obtiens :

évidemment, les bordures disparaîtront, c'est juste pour voir ce qui se passe...

Tu n'as pas suivi les versions proposées dans l'article : toutes n'utilisent qu'un unique élément (ici h1). Tu n'as pas besoin de toutes tes div (ni p, d'ailleurs, puisque ce que tu cherches à faire n'est pas un paragraphe, c'est même probablement un titre).

Ah oui, je vois...

par contre, j'arrive toujours à rien; je ne trouve pas sur internet à quoi correspond '/a0'; tu peux éclairer ma lanterne ?

C'est \a0, tu as inversé le slash. C'est le symbole du "non-breaking space", ou "espace insécable", qui permet de faire un espacement et d'empêcher les parties en before et en after de passer à la ligne.

C'est bien ce que je pensais : j'y pige que dalle :-)

Bon, entre-temps, j'ai tenté d'adapter la méthode 

h1 {
  display: table;
  white-space: nowrap;
  text-align: center;
}
h1:before, h1:after {
  content: "";
  display: table-cell;
  width: 50%;
  background: linear-gradient(#000, #000) repeat-x left center;
  background-size: 1px 1px;
}

qui est plus claire pour moi...

J'ai séparé before et after pour pouvoir décaler mon titre sur la gauche. (width 20% pour before et 80% pour after)

Reste le problème de l'écartement de la ligne par rapport au texte (pour l'instant, la ligne touche le texte).

Une idée ?

Bon, pour l'instant, j'ai triché : un petit   avant et après le texte, et j'ai un petit espace...

Par contre, si quelqu'un a une méthode plus propre, je suis preneur !

@Lamecarlate: encore merci de ton aide et bonne journée !

Avec la méthode du table-cell hélas pas de marges possibles.

Sinon, tu peux étudier ce que j'ai fait ici : http://lamecarlate.net (en gros ça ressemble à celle proposée par Giraudel dans le lien plus haut).

Façon ticket de métro !...

<style>
    .fond  { height: 98px; background-color: gold; border:1px solid gold; 
           } 
    .trait { height: 12px; margin: 44px 0px; background-color: saddlebrown;
           } 
    .texte { width: 200px; margin-left: 100px;
           background-color: gold;
           color: saddlebrown;
           font-size: 40px; text-align:center;
           position: relative; z-index: 1;
           top: -20px;           
           }
</style>

<div class="fond">
     <div class="trait">
          <div class="texte">About Us</div>
     </div>
</div>

-
Edité par Anonyme 10 février 2016 à 12:07:38

ctkc > efficace, mais l'intérêt des différentes méthodes évoquées plus haut c'est justement l'indépendance avec la couleur du fond

@Lame : Oui effectivement, en "transparent" ça va pas le faire... (pas bien lu)...

@ Manu :  Alignez 3 div en float:left dans le container...

-
Edité par Anonyme 10 février 2016 à 12:26:47

Avec 3 div en float:left :

<style>
     body  { width: 800px; }
    .fond  { height:100px; line-height:100px; border:1px solid; 
           } 
    .trait { float:left; height:12px; margin:44px 0; background-color:gray;
           } 
    .texte { float:left;
           font-size:40px; text-align:center;
           color: gray;         
           }
</style>

<div class="fond">
     <div class="trait" style="width:10%"></div>
     <div class="texte" style="width:22%">About Us</div>
     <div class="trait" style="width:68%"></div>
</div>

-
Edité par Anonyme 10 février 2016 à 13:56:59