[Résolu]Ombrage d'un texte

Bonjour à tous,

Je suis dans une perplexité épaisse et je ne vois pas le bout du tunel.
Je fais un texte ombré avec :

<h1 class="titre2">Texte ombré<span class="texte">Texte ombré</span></h1>

que je style :

h1.titre2 {
position:relative;
left:0px;
top:0px;
margin:0px;
padding:0px;
font: bold 300% arial,verdana,sans-serif;
color:#fff;
}
.texte {
position:absolute;
left:-2px;
top:-3px;
color:#54829c;
}

Sous IE pas de problème mais sous FF, le span ne veut pas se positionner par rapport au H1 et tout est décalé.

Voyez vous une piste ?
Modifié par papyjo (30 Jun 2005 - 16:23)

Au lieu de mettre .texte en absolu, met le en relatif, c'est précisément dans ce genre de cas que c'est utile :

décaller un élément de sa position normale.

-----

Ouai, en écrivant je me rend compte que ça ne marche pas puisque tu ne connais pas la largeur à priori...

Si tu rajoute un display block (normalement il ne faut pas ..) ça aiderait pas ie ?

Salut TriadPtale,

Ça pas bon du tout, les deux navigateurs me donnent la même vue :
le H1 et le texte à la suite l'un de l'autre mais pas l'un sur l'autre.

Si tu met le span en type block et en absolu, il sort du flux et ne doit pas se mettre en dessous....

Vires le top : 0 et left : 0 du h1 pour voir

Bonjour,

Attention toutefois à cette "bidouille" comme l'indique le tutoriel de Raphaël:

a écrit :
Important : cette technique relève du "bidouillage" car elle posera des problèmes si le navigateur des visiteurs est ancien ou n'a pas activé les styles CSS, ou simplement si vos visiteurs utilisent un navigateur textuel ou braille. En effet, dans ce cas, la structure HTML sera affichée brute et tous les textes ombrés apparaîtront en double, l'un à côté de l'autre.

Sinon j'ai tenté çà qui fonctionne sur IE, FF, Opera:

<h1><span>Un titre ombré</span>Un titre ombré</h1>

h1{position:relative;color:#ccc;}
h1 span{position:absolute;top:-.2em;left:-.2em;color:#333} 

@Igor

Tu m'as convaincu, c'est en effet un bidouillage qui fonctionne mais qui rend très mal la sémantique avec des navigateurs particuliers.

Je vais revoir le sujet sans ombres.

Merci de ton éclairage.

Bonsoir chez vous.
En attendant que tout soit remis dans l'ordre, tu peux indiquer "text-shadow: 2px 2px;"
( ça mange pas de pain ) Voir traduction française des ccs2 w3c. Je serais parmi les heureux élus à voir tes textes ombrés avec dégradés aussi beaux qu'avec photoshop.
Macintosh Safari accepte et respecte cette indication ( il merdoie et poudroie par ailleurs... ( grrr !) )