Traits de chaque côté d'un titre

3 janvier 2015 à 16:05:55

Bonjour !

J'aimerais savoir comment faire pour afficher des petits traits de chaque côté d'un titre. Exemple sur le site officiel de l'OM avec "L'équipe pro à la une" : https://www.om.net/.

Mon code HTML :

<!DOCTYPE html>
<html>

<head>
   <meta charset="utf-8"/>
   <link rel="stylesheet" href="style.css"/>
   <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
   <title>FIFA 15 - Feel the game</title>
</head>

<body>

<header>
   <img src="headerbar.png"/>
</header>

<nav>
   <ul>
      <li><a href="index.html">Accueil</a></li>
	  <li><a href="#">Images</a></li>
	  <li><a href="#">Vidéos</a></li>
	  <li><a href="#">S'inscrire</a></li>
   </ul>
</nav>

<section>
   <article>
      <h1>Les nouveautés de FIFA 15</h1>
   </article>
</section>

<footer>
   <p>© 2015 - Tous droits réservés.</p>
</footer>

</body>

</html>

Mon code CSS :

@font-face
{
   font-family: 'Open Sans';
   src: url('opensans.eot') format('eot');
   src: url('opensans.woff') format('woff'),
        url('opensans.woff2') format('woff2'),
        url('opensans.ttf') format('ttf'),
        url('opensans.svg') format('svg');
   font-weight: normal;
   font-style: normal;
}

body
{
   margin: 0px;
   padding: 0px;
   background-color: #FFFFFF;
}

header img
{
   width: 100%;
   position: center;
}

nav
{
   display: block;
   width: 100%;
   margin-top: -20px;
   background-color: #181818;
   text-align: center;
}

nav ul
{
   list-style-type: none;
}

nav li
{
   display: inline-block;
   margin-right: 30px;
}

nav a
{
   font-family: 'Open Sans';
   font-size: 1em;
   color: #FFFFFF;
   line-height: 50px;
   text-transform: uppercase;
   text-decoration: none;
}

nav a:hover
{
   color: #F8CC32;
}

section
{
   width: 100%;
   background-color: #FFFFFF;
}

article h1
{
   font-family: 'Open Sans';
   font-size: 1.5em;
   color: #000000;
   text-transform: uppercase;
   text-decoration: none;
   text-align: center;
}

footer
{
   display: block;
   width: 100%;
   background-color: #181818;
}

footer p
{
   display: block;
   font-family: 'Open Sans';
   font-size: 0.8em;
   color: #FFFFFF;
   line-height: 30px;
   text-align: center;
   text-decoration: none;
}

Merci d'avance !

-
Edité par AdidasTwo 3 janvier 2015 à 16:47:23

Lamecarlate

3 janvier 2015 à 17:12:45

Ben, n'as-tu pas étudié comment c'est fait sur la page que tu montres ? Tous les navigateurs ont un inspecteur de code maintenant, clic droit > inspecter, ou bien F12 (ça dépend du navigateur). Bon, dans ce cas précis, le code n'est pas très optimal parce que très dépendant de la couleur de fond ; tu peux cependant t'en inspirer, ou bien lire ceci http://goetter.fr/tumblr-backup/ (cherche "T'es pas cap !" (première édition) dans la page).

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Anonyme

3 janvier 2015 à 18:09:45

10 min de recherche:

<p class="subtitle fancy"><span>Ton titre</span></p>

CSS:

.fancy {
  overflow: hidden;
  text-align: center;
}

.fancy span {
  position: relative;
}

.fancy span:before,
.fancy span:after {
  content: "";
  position: absolute;
  border-bottom: 1px solid white;
  border-top: 1px solid white;
  width: 600px;
  height: 7px;
  top: 50%;
  margin-top: -4px;
}

.fancy span:before {
  right: 100%;
  margin-right: 15px;
}

.fancy span:after {
  left: 100%;
  margin-left: 15px;
}

La méthode utilisé sur le site de l'OM est différente de celle-ci

AdidasTwo

3 janvier 2015 à 18:35:20

Ça ne marche pas, rien ne s'affiche.

Anonyme

3 janvier 2015 à 18:44:27

As tu remarqué que les bords était en blancs dans le code que je t'ai donné ?

Reste à modifier le code comme tu veux ou alors tu es libre de reconstruire ton propre code maintenant que tu as la piste (pseudo élément)

renomaup

13 décembre 2016 à 17:39:45

L'intérêt d'utiliser les border permet d'avoir un double trait de part et d'autre.
L'exemple marche bien aussi en mettant un background color sur les after et before de la span contenu dans .fancy.

Si quelqu'un a une solution en stylant directement le h2 sans span à l'intérieur, je suis preneur!

DavidDeschamps8

14 juin 2019 à 14:30:43

Je confirme ça marche pas

Frogweb

14 juin 2019 à 14:37:16

Intéressant de déterrer un sujet pour n'apporter... Et en plus ça fonctionne très bien.
Il suffit de comprendre le code ou de lire le deuxième message de Maathieu24

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !