[Résolu] :first-letter et h1

Bonjour !!

Voilà je suis exposé à un cruel dilemme : j'ai besoin de mettre un titre composé de deux mots en h1. Mais je voudrais que chaque première lettre soit d'un design différent du reste des mots.

Actuellement j'ai un bidouillage qui fait gueuler mon marqueur xhtml 1.0 :

<div>
  <h1>
    <p>Premier</p>
    <p>Deuxième</p>
  </h1>
</div>

et en css :

h1 {
    color: #330000;
    font: normal small-caps bold 3.2em sans-serif;
    ...
}
h1 p:first-letter{
    color: #990101;
}

donc forcément un block dans un in-line, beuark !
la seule solution valide, qui est pire pour le référencement google, c'est de faire ceci :

<div>
  <h1>Premier</h1>
  <h1>Deuxième</h1>
</div>

Et de définir h1:first-letter, mais biiiiip !! un seul h1 s'il vous plait !! grrrrr...

comme first-lettre ne marche que sur un block, je ne peut pas mettre un span dans h1 pour contourner ce problème... je boue là, je ne sais pas comment m'en dépatouiller !

help ? merci d'avance ^^
Modifié par darkendorf (20 Mar 2009 - 11:22)

Salut,

darkendorf a écrit :
donc forcément un block dans un in-line, beuark !

En l'occurrence H1 est bien de type bloc mais il fait partie des exceptions.

Pourquoi ne pas faire :

h1 span {
    color: #990101;
}

<h1><span>P</span>remier <span>D</span>euxième</h1>

Peut être <h1><strong>Titre</strong>suite titre</h1> ?

<edit :>bzh -- ça ne me met pas toutes les premières lettres en couleur ^^</edit>

Tout d'abord merci d'avoir répondu !

Oui j'y ai pensé, mais pour le référencement, je me retrouve avec 4 mots : p, remier, d, euxième...

D'où mon problème. Il ne me reste qu'à trouver une solution ou mes mots restent entiers, sont dans un seul h1 et ont la première lettre de chaque mot en couleur (ici rouge).

Un casse tête qui va finir en bidouillage, je le sens !!
Modifié par darkendorf (20 Mar 2009 - 11:09)

Salut,

darkendorf a écrit :
Oui j'y ai pensé, mais pour le référencement, je me retrouve avec 4 mots : p, remier, d, euxième...

Mais non , les robots tiennent compte (comme les humains) des espaces, de la ponctuation, pour séparer les mots, ils ne voient pas les <span>* lors de l'indexation.

*D'autant plus que cet élément est neutre d'un point vue sémantique.

darkendorf a écrit :
Oui j'y ai pensé, mais pour le référencement, je me retrouve avec 4 mots : p, remier, d, euxième...

Non, les robots font un striptags, et n'affichent que le texte brut. N'ayant pas d'espace entre le "p" et le "remier", il s'affichera en un seul mot pour les robots.

On m'aurait menti ?

Pourquoi je ne suis pas venu ici directement pour poser la question, plutôt que de faire confiance à google grâce auquel j'ai pu lire à droite et à gauche que c'était bouh pas bien...

Merci Hô Grands Maîtres du CSS !! je vais enfin me débarrasser de cette alerte... ^^

merci.

merci.