Titre centré + background

Amstramgram
Les bases HTML/CSS

Bonjour,

alors voila un peu petit moment que je cherche une solution à un problème surement tout con.

J'ai un titre qui doit rester centré sur la page avec une variation de longueur en nombre de caractère avec un background genre une ligne à droite et à gauche.

Genre comme ca.

pour l'instant j'ai une structure qui ressemble à ca mais qui ne s'adapte pas à la taille des titres, je dois rajouter une class.

HTML

<h1><span class="pm">Prochain match</span></h1>

CSS 

h1{
    height: 43px;
    display: block;
    font-size: 46px;
    line-height: 35px;
    margin: 12px 0px 36px 0;
    background: url(img/bg_title.png) right center repeat-x;/*La ligne grise*/
    text-transform: uppercase;
}
h1>span{
    display: block;
    text-align: center;
    position: absolute; left: 50%;
    height: 40px;
    padding-right: 10px;
    padding-left: 10px;
    background: url(img/bg.png) repeat-x;/*Le même fond que la page pour cacher la ligne qui traverse le texte*/
}
h1>span.pm{
    width: 412px;
    margin-left: -216px;
}

enfin voila.

Merci, des bisous.

3 réponses

Nairolf
Réponse acceptée

Ba genre cet effet tu peux le faire avec juste des couleurs et sans images comme ça:

<html>
    <head>
        <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
        <style type="text/css">
        body {
            background-color: #3f3f3f;
            font-family: 'Roboto Condensed', sans-serif;
        }
        h1{
            color: #929292;
            height: 43px;
            font-size: 46px;
            line-height: 35px;
            margin: 12px 0px 36px 0;
            text-align: center;
            text-transform: uppercase;  
        }
        h1 hr{
            background-color: #929292;
            border: 0px;
            height: 3px;
            margin-top: -17px; 
        }
        h1 span{
            background-color: #3f3f3f;
            padding: 0 10px;   
        }
        </style>
    </head>
    <body>
        <h1><span>Un super long texte</span><hr></h1>
        <h1><span>Un texte</span><hr></h1>
    </body>
</html>

Avec la balise <hr> tu peux faire ta barre. Après si tu veux faire un titre qui ne fait pas plus de 600px tu remplaces ça: 

margin: 12px 0px 36px 0;

Par ça: 

margin: 12px auto 36px auto;
width: 600px;

Après le problème c'est que si ton texte fait plus de 600px, tu auras des problèmes, enfin dit moi si ma solution te convient, sinon on peut chercher mieux.

Amstramgram
Auteur

Nice, merci. J'avais presque tout essayé sauf le hr...

Merci encore, tu viens de sauver une vie ;)

Nairolf

Une vie quand même pas mais de rien ;)