Question pour mise en forme d'un titre

Bonjour tout le monde,

aujourd'hui j'aurais besoin de votre aide pour la mise en forme d'un titre en CSS. Avant toute chose, voilà le résultat que je souhaite obtenir :

http://img109.imageshack.us/img109/166/headerbz.png

Au niveau de mon code HTML, je me retrouve avec ceci :

<div id="title">
//mettre ici le titre
</div>

Il faut que le titre soit centré par rapport au bloc title. L'utilisation de margin:auto est impossible car la longueur du titre peut changer d'une page à l'autre...

Pensez-vous aussi qu'il est possible de tout faire tenir dans une balise h1, afin d'optimiser le référencement ?

J'ai eu beau essayer de retourner le problème dans tous les sens (span, display:block, ...) je n'y suis pas arrivé. Pourriez-vous m'aider s'il vous plait ?

Je vous remercie pour votre aide,
Cordialement

kevin

Bonjour Kevin,

Essayes

<div id="title"> 
  <h1 style="text-align:center;">Ton titre</h1>
</div> 

Manu

Coucou manu

Je connais bien cette technique mais en l'occurrence le problème est que mon titre est sur deux niveaux différents :

tu as la partie gauche sur un niveau, et la partie droite qui se trouve sur deux niveaux.

Le problème est à cet endroit

j'ai l'impression que j'ai une solution (je me suis fait une pause prise de tête casse-tête css !). J'utilise jamais le display:inline-block mais ça m'a l'air de marcher avec ça (in english : The element will generate a block box, laid out as an inline box)

à toi de régler les valeurs du line-height et du top et de remplacer la barre verticale par ce que tu veux :


le html :

<h1><span id="ville">LUGAIGNAC|</span><span id="detail">villa<br />570000€</span></h1>

le css :

  <style type="text/css">
  h1 {
  	text-align:center;
  }
  #ville {
	display:inline-block;
	position:relative;
	top:-15px;
  }
    #detail {
	display:inline-block;
	text-align:left;
	line-height:30px;  }
  </style>

et dis moi si ça marche comme tu veux, que je me remette à mon taf sereinement !

Bonjour,

manu > ta technique n'est qu'une multiplication des balises, inutile d'inclure un h1 dans un div s'il n'y a pas d'autres éléments.

f1na > Utiliser h1 pour "optimiser le référencement" est une très mauvaise idée. Par contre l'utiliser parce qu'il est un titre de section de niveau 1 dans la page, c'est effectivement la bonne chose à faire.

margin:auto; ne centrera la titre qu'horizontalement, pas verticalement.


Quelque chose dans le genre :

<h1>Ludaignac</h1>
<p>Villa<br>570000€</p>

Avec un peu de float et de display:table-cell devrait faire l'affaire.

Coucou tous les deux,

tout d'abord désolé pour le temps de réponse (j'espère que tu as pu te remettre à travailler sereinement yacks ^^), mais j'ai passé toute l'aprem au téléphone

@yacks : super ta méthode donne le résultat escompté. De plus cela marche pareil sur FF et sur Chrome/Safari (à tester avec IE)

@Laurie-Anne : quand je parlais d'optimisation du référencement, c'est bien que le titre est un titre de niveau 1 . Le problème est que l'ensemble du texte (ville + prix + type) est le titre. Cela ne pose-t-il pas de problèmes d'avoir une multiplication de span dans une balise h1 ?

En tout cas, un grand merci pour votre aide
Cordialement

kevin