Centrer un titre par rapport à son fond

[Voulf]

Salut!

J'ai un titre (h3) qui se présente pour le moment sous cette forme :

<h3 style="background-image:url(elipse.gif);
      padding: 0 0 0 15px;
      margin:0;
      height:53px;
      width:450px;
      font-size:18px;">Titre sur une ou deux lignes</h3>

J'aimerai que le contenu soit centré automatiquement en hauteur que le texte soit sur une ou deux ligne.

La sémantique est importante mais s'il faut rajouter des <div> ou <span> ou autre ce n'est pas un problème.

Merci.

[Raphael]

Il suffit de supprimer le padding bas et le contenu sera centré (par défaut)

[Voulf]

Salut

Est ce que tu as testé de ton côté?

Du mien, en supprimant les padding, cela ne change rien, et en appliquant un padding-left (nécessaire pour faire apparaitre le background) cela ne change rien non plus...

[Paginus]

Bonjour Voulf,

Si j'ai bien compris, tu veux centrer ton titre à l'horizontale et à la verticale à l'intérieur d'un espace faisant 450px de large sur 53px de haut.

Si tel est le cas, tu peux définir d'abord une div ayant les dimensions voulues, puis y placer ton titre h3 avec les attributs qui y sont propres. On obtiendrait alors un code comme ceci :

<div style="width: 450px; height: 53px;">
     <h3 style="background-image:url(elipse.gif);
          margin: auto;
          padding: 0;
          font-size: 18px; 
          text-align: center;">Titre sur une ou deux lignes</h3>
</div>

Le truc le plus simple pour observer le résultat sans fausser les mesures consiste à faire usage d'une couleur de fond. Ajoute background-color:#ff0 à ta div et tu comprendras ce que je veux dire. Idéal pour savoir où commence et où finit le bidule qu'on cherche à positionner.

Maintenant, permets-moi une suggestion. Avec px comme unité de mesure, tu définis une taille de police en valeur fixe. Ce qui aura pour résultat qu'il sera impossible à l'utilisateur d'en modifier la taille sous Internet Explorer. 18px c'est quand même assez gros, mais il se peut que ce ne soit pas suffisant pour certains.

Pour éviter ce désagrément, tu pourrais essayer de définir tes tailles de police avec une unité de mesure relative. Avec New Times Roman, par exemple, un texte de 1.1em aura la même taille que s'il avait été défini à 18px.

[Voulf]

Salut!

Merci pour ta réponse.

J'essayerai ça lundi sur le site du boulot. J'espère que c'est compatible ie5, margin : auto; ne va-t-il pas poser un problème?

Je pense que je vais devoir reporter l'affichage de l'elipse dans la déclaration du div. En effet la hauteur du h3 permettait de faire apparaitre la dite elipse, sans quoi la hauteur du h3 sera équivalente à la hauteur du texte... et ne fera donc pas apparaitre le background en entier, à moins que le margin : auto; prenne toute la hauteur du div.

Pour la suggestion, merci beaucoup, je suis bien au fait de l'utilisation des unités relatives mais je suis aussi dépendant de fortes contraintes et ne suis pas seul à travailler sur ce projet. Pour simplifier la maintenance et le déveleppment, j'ai préféré des unités fixes.

Je te tiens au jus.

[Paginus]

Excellent, alors, si tu connais les différentes unités de mesure. Rien de mieux que de savoir ce que l'on fait.

En passant, je suis sous Win XP et j'ai une version autonome de IE 5.01. Vérification faite, par de problème à signaler. Même chose avec IE 5.5 (standalone). Sous IE 6 (authentique) non plus. Quant à Mozilla, Firefox et Opera, c'est gagné d'avance.

Cela dit, rien de mieux que de vérifier avec une authentique vieille version d'IE, bien sûr.

Bonne chance.