Problème propriété first-letter et images

Bonjour à tous,

J'ai un léger problème avec la déclaration des lettrines en CSS.

J'utilise

p:first-letter { ... }

pour ce faire mais le problème c'est que la première chose que j'ai dans mon paragraphe, c'est une image.

J'ai donc ça :

XHTML

<p><img src="toto.jpg" alt="toto" />mon super texte</p>

CSS

p:first-letter { 
  font-family:Georgia, "Times New Roman", Times, serif; 
  font-size:2.5em; 
  color:#b4ccae; 
  margin:0; 
  padding:0; 
}

J'ai l'impression que les navigateurs interprettent l'image comme first-letter, donc ma première lettre qui suit l'image n'est pas une lettrine...

Je ne vois pas comment résoudre le problème car, si je sort ma balise image de ma balise <p>, le code n'est plus valide XHTML 1.0 Strict....

C'est tout bête surement mais ça me bloque.

Salut !

zmove a écrit :
Bonjour à tous,

Je ne vois pas comment résoudre le problème car, si je sort ma balise image de ma balise <p>, le code n'est plus valide XHTML 1.0 Strict....

Pourquoi tu dis ça ?
Modifié par Zeke (22 Feb 2007 - 14:55)

Bonjour zmove,

Effectivement, dans ce cas l'image est considérée comme une lettre.
J'ai essayé cela qui fonctionne sur IE et FF mais cela me plais moyen :
HTML

<p class="image"><img src="toto.jpg" alt="toto" title="" /></p>
<p class="texte">mon super texte</p>

CSS

.image {
  float: left;
}
.texte:first-letter { 
  font-family:Georgia, "Times New Roman", Times, serif; 
  font-size:2.5em; 
  color:#b4ccae; 
  margin:0; 
  padding:0; 
}

Evitez le first-letter, surtout sur IE6 qui explose littéralement la plupart du temps. Le mieux est d'entourer l'élément nécessaire (lettre ou image) d'un span de class lettrine par exemple, beaucoup plus sûr...
Modifié par FlorentG (22 Feb 2007 - 14:59)

FlorentG a écrit :
Evitez le first-letter, surtout sur IE6 qui explose littéralement la plupart du temps. Le mieux est d'entourer l'élément nécessaire (lettre ou image) d'un span de class lettrine par exemple, beaucoup plus sûr...

+1. Dans ce cas précis, il sera bien plus efficace d'ajouter un span autour de la première lettre du texte.

Par contre, j'ai déjà utilisé :first-letter sans problèmes particuliers avec IE6. Le tout est de ne pas se lancer dans des trucs trop extravagants

Thomas D. a écrit :
Par contre, j'ai déjà utilisé :first-letter sans problèmes particuliers avec IE6. Le tout est de ne pas se lancer dans des trucs trop extravagants

Oui, pour rappel :
- IE ne reconnait pas first-letter lorsqu'il n'y a pas d'espace entre le sélecteur et l'accolade (ex : ".toto:first-letter{propriétés;}")
- Les propriétés display, width et height ne portent pas sur le pseudo-élément :first-letter.
- Line-height s'applique et elle "remplace" en quelque-sorte la propriété height

Laurent Denis avait concocté un bon résumé tantôt, je vais chercher ça...

EDIT : aaah heureusement qu'il y'a un bon moteur de recherche sur ce forum
http://forum.alsacreations.com/topic.php?fid=2&tid=5779#p51089
http://forum.alsacreations.com/topic.php?fid=4&tid=7625
Modifié par Raphael (22 Feb 2007 - 15:14)

Ok, merci pour ces réponses.

J'avais cherché dans le forum et dans les tutoriaux, et j'avais connaissance de la technique des span que je cherchais à éviter car dans mon cas, tous les navigateurs (même IE6) géraient bien mes lettrines.

Mais le problème de mon image est venu tout perpturbé, je vais donc utiliser la bidouille du span.

Merci pour vos réponses. J'hésite à mettre résolu dans mon topic car le problème n'est pas résolu mais contourné. Ca existe pas encore les valises [contourné] dans le titre d'un topic ?

En tout cas merci à vous tous.

Raphael a écrit :
EDIT : aaah heureusement qu'il y'a un bon moteur de recherche sur ce forum

Ah bon ? Où ça ?

Raphael a écrit :
heureusement qu'il y'a un bon moteur de recherche sur ce forum

Oui, oui, moi je viens de le faire avec :

mot clé : a:hover

nom d'utilisateur : Laurent Denis

Rechercher dans : contenu des messages

date : n'importe quand

Et ça a marché tout de suite

en fait ça devrait être un point de la faq pour l'optimisation du recours au moteur de recherche

Bon évidemment sans mettre mon pseudo comme mot clé ... J'ai ma fierté quand même.
Modifié par Christian Le Bouler (22 Feb 2007 - 15:24)

Christian Le Bouler a écrit :
en fait ça devrait être un point de la faq pour l'optimisation du recours au moteur de recherche

Carrément ?

zmove a écrit :
Ca existe pas encore les valises [contourné] dans le titre d'un topic ?

Aaah on les sent bien les vacances