Ombre portée CSS

Bonjour à tous ,

Voila ! je viens de mettre un site en ligne avec des titre en ombre portée fait avec CSS. Mon problème est que l'affichage est correct sous IE mais pas sous firefox ( voici l'adresse : www.nicolas-mourlon.com ).

Voici mon code css , sachant que mes titres et sous titres sont placé dans des colonnes ou je met l'attribut align = center.

h1, span {
font: bold 25px verdana, sans-serif;
}
h1 {
position: relative; /* on positionne le conteneur H1 pour placer ensuite le SPAN */
color: gray;
}
h1 span {
position: absolute; /* on superpose le SPAN sur le titre */
top: -2; /* on décale le SPAN */
left: -2;
color:#0066cc;
}


h2, h3 {
font: bold 14px verdana, sans-serif;
}
h2 {
position: relative; /* on positionne le conteneur H1 pour placer ensuite le SPAN */
color: gray;
}
h2 h3 {
	position: absolute;
	top: -1px;
	left: -1px;
	color:#0066cc;

} 

Si qqun peut m'aider , ca serait super , merci
Modifié par alexhardouin (06 Oct 2006 - 21:37)

Bonjour alexhardouin et bienvenue sur ce forum.

Pour commencer, je te propose de te conformer aux règles de ce forum et de bien vouloir correctement mettre en forme ton message. En particulier, il faudrait que tu encadres les portions de code citées par les balises ad hoc, soit [ code] et [ /code] (sans les espaces). Il y a également un bouton de disponible en bas du formulaire d'édition.

Tu peux éditer ton message en utilisant le bouton d'édition en haut à droite. Merci d'avance.

Je suis pas sur qu'en terme d'accessibilité, ce soit très judicieux de vouloir faire ce type d'effet en CSS...
Il y a redondance d'information.

Remplace ça par une image et un texte alternatif.

Le code suivant marche parfaitement :

h1 {
	position: relative;
	text-align: left;
	color: gray;
	font: bold 25px verdana, sans-serif;
}
h1 span {
	position: absolute;
	top: -2px;
	left: -2px;
	color:#0066cc;
}

Par contre, dans ton code à toi, j'ai relevé toute une tripotée d'erreurs. En voici quelques unes :

Erreurs de codage
1) Absence de doctype valide (le doctype utilisé pour ta page est incomplet, et fait passer Internet Explorer en mode Quirks... est-ce volontaire ?) ;
2)

h1, span {
	font: bold 25px verdana, sans-serif;
}

Les propriétés CSS entre les accolades vont s'appliquer à tous les éléments h1 et à tous les éléments span de la page. Un sélecteur plus approprié serait sans doute h1, h1 span, bien que la deuxième partie ne soit à vrai dire pas nécessaire : on peut très bien se contenter de profiter de la cascade CSS et du fait que le span contenu dans h1 hérite d'une partie des propriétés de mise en forme de h1 (en particulier celles qui concernent la mise en forme du texte).

3)

HTML :
<h2>- Actualités -</h2><h3>- Actualités -</h3>

CSS :
h2 h3 {
	bla: bla bla;
}

Je devine d'après le code CSS que le h3 était prévu pour être inclus dans le h2. D'une, ce n'est pas le cas dans le HTML (d'où un petit problème). De deux, il n'est pas possible de caser un titre de section de niveau 3 à l'intérieur d'un titre de section de niveau 2. Pourquoi ne pas utiliser un span, dans ce cas également (à part le fait que l'erreur soulignée ci-dessus fait que tout span a un texte énorme, ce qui effectivement peut être problématique) ?

4) Je propose un petit test. Il suffit d'insérer le code suivant dans la feuille de style :

h1 {border: solid 2px red;}

Cela permet de se rendre compte de l'étendue du h1, et de constater que le span se positionne bien à -2px en haut et -2px à gauche du coin supérieur gauche du bloc h1.
Le span est donc bien positionné. Par contre, le texte du h1 lui-même est complètement décalé à cause du centrage.


« Erreurs » de conception
Il y a deux problèmes avec la façon dont cette page est construite :
1 - la mise en page en tableaux imbriqués, qui nuit fortement à l'accessibilité du contenu.
Cf. Construire un site sans tableaux.
2 - le fait de répéter deux fois le même contenu textuel pour obtenir un simple effet graphique me semble peu opportun. Juste pour un effet graphique, on nuit très fortement à l'accessibilité du contenu. Il suffit de désactiver la feuille de style pour voir apparaître un titre au contenu dédoublé, ce qui risque fortement de troubler le visiteur. Si on tient vraiment à l'effet graphique, pourquoi ne pas faire, tout simplement, une image ? En renseignant correctement le texte alternatif (attribut alt) de l'image, on obtient un résultat tout à fait accessible. Exemple :

<h1><img src="titre.png" alt="Nicolas Mourlon - Professionel de golf" />[/h1]

Edit : easyzik m'a devancé pour souligner ce dernier point...
Modifié par mpop (06 Oct 2006 - 21:55)