Bonjour

Depuis hier je me prends la la tête sur un prob de CSS qui paraît vraiment une broutille et pourtant. Si quelqu'un avait la gentillesse de me filer un coup de main...

J'ai un div dans un autre div :
<div id="encadre_article">
<div id="surtitre_encadre_article">Surtitre de l'encadre</div>
<p class="titre_encadre_article">Titre de l'encadré</p>
<p class="txt_encadre_article">Texte de l'encadré</p>
</div>

Le div qui me pose problème est celui en rouge

L'identifiant #surtitre_encadre_article porte les caractéristiques CSS suivantes :
#surtitre_encadre_article{
background-color: #9e131c;
font-size: 11px;
font-weight: bold;
color: #fff;
width:130px;
padding-left: 5px;
padding-right: 5px;
text-transform:uppercase;
margin: 0px;
}

Je souhaite que ce div rouge puisse faire 2 choses mais en vain :
- se positionner centrer tout en haut de l'encadré
- que le bandeau rouge puisse s'agrandir ou se diminuer en fonction de la longueur du texte qu'il contient.

Merci d'avance de vos idées de génie !

Pourquoi utiliser un div pour un surtitre ? Et un paragraphe pour ton titre ?
Tu pourrais, par exemple, utiliser une balise <h1> pour ton titre, et une balise de titre d'importance moindre (<h2> par exemple) pour le surtitre.

Tu pourrais ensuite centrer le <h2> avec ceci :


Logiquement (sans tester), avec ce que tu y as déjà mis, ça devrait fonctionner.

#encadre_article,
#encadre_article #surtitre_encadre_article{
margin:0px;
padding:0px;
}

#encadre_article #surtitre_encadre_article{
height:auto;
}
Si ça ne marche pas, merci de me communiquer tout ton code.

Je rejoins captain_torche,

j'utiliserai une balise spécifique pour le titre !

Pour en revenir à ton code, (je ne suis pas sûr d'avoir compris) mais as tu essayé de faire text-align:center; ?