28173 sujets

CSS et mise en forme, CSS3

Utilité de span dans a

Bonjour!

Je me permet de vous poser une petite question à propos d'un code que j'ai vu sur le site openwengo.com...



#openwengo_header h1 a span {
	display:none;
}




<h1>

			<a href="/"><span>OpenWengo</span></a>

		</h1>


A quoi sert span alors qu'on pourrait masquer directement h1 ou a?

merci d'avance pour votre réponse!
Modifié par foxeye (03 Mar 2006 - 17:10)
c'est sans doute qu'au survol du lien, le span est affiché au moyen d'un

#openwengo_header h1 a:hover span {
	display: inline;
}
Bonjour,

Ce span est le plus souvent utilisé pour masquer le texte au profit de l'image d'arrière-plan de l'élément h1: h1{(background-image: url(...)}.

Très bien en théorie, sauf... que le texte supposé être disponible dans tous les navigateurs non CSS sera le plus souvent masqué dans les lecteurs d'écran, pour lesquels il n'y aura donc aucun contenu pour h1. Utiliser dans ce cas une autre propriété que display pour masquer le contenu, ou remplacer plus simplement le tout par une bonne vieille <h1><img src="..." alt="...></h1>

Voir http://blog-and-blues.org/weblog/2004/08/19/277-mettre-un-titre-en-image
merci pour toutes ces infos Smiley smile

Autre question, peut-être sans rapport direct d'ailleurs, mais toujours intéressante:

Je constate que l'ajout d'une propriété float à un élément span, normalement non redimensionnable, permet de le redimensionner... très curieux Smiley confus
Administrateur
foxeye a écrit :
Je constate que l'ajout d'une propriété float à un élément span, normalement non redimensionnable, permet de le redimensionner... très curieux Smiley confus

Oui, car Float "transforme" l'élément automatiquement en élément de type Bloc, donc dimensionnable Smiley cligne
Raphael a écrit :

Oui, car Float "transforme" l'élément automatiquement en élément de type Bloc, donc dimensionnable Smiley cligne


De comportement block plutôt que de type block je dirais.
Sujet clos
Aller à