28173 sujets

CSS et mise en forme, CSS3

Un rollover CSS assez étonnant [résolu]

Bonjour cher amis, je voulais soumettre ceci à votre jugement, même si j'ai déjà une opinion dessus : c'est un menu de mon cru avec rollover entièrement CSS


<ul>
<li><a href="index.php" class="lien1">Lien1</a></li>
<li><a href="index.php" class="lien2">Lien2</a></li>
<li><a href="index.php" class="lien3">Lien3</a></li>
<li><a href="index.php" class="lien4">Lien4</a></li>
<li><a href="index.php" class="lien5">Lien5</a></li>
<li><a href="index.php" class="lien6">Lien6</a></li>
</ul>


Voilà pour le Xthml rien de bien folichon


li {
	display: inline !important;
	float: left;
	margin: 10px 2px 0 2px;	 }	

a {	
	color: #fff;
	display: block;
	height: 111px;
	width: 90px;
	font-size: 16px;
	font-weight: bold;	 }

a.lien1 {
	background: transparent url(menu1.gif) top left no-repeat !important; }
	
a:lien1:hover {
	background: transparent url(menu1over.gif) top left no-repeat !important; }
	
a.lien2 {
	background: transparent url(menu2.gif) top left no-repeat !important; }
	
a:lien2:hover {
	background: transparent url(menu2over.gif) top left no-repeat !important; }

etc....


Voilà le CSS rien de bien folichon non plus seulement voilà vous ne remarquez pas quelques chose ?

Le fait d'avoir les images et les liens en même temps ? Normal me direz vous mais en fait mes images comportent déjà les liens avec une belle police.

A quoi sert donc les liens en dur ?

A faire propre en Xhtml pur, pour le référencement aussi.

Mais cela ne fait-il pas doublon avec les menus des images ?

Non car ils ne se voient pas !

Et comment ça ?

Et bien en fait les textes de mes images sont écris en bas. L'image à un espace blanc en haut de 5mm et c'est en blanc que sont écris les liens en haut.

Du coup on a le beurre et l'argent du beurre :

- Une liste à puce bien propre du menu
- Un menu rollover en image en CSS sans javascript
- Un texte bien propre sans aliasing pour les internautes
- l'Avantage avec les block c'est que le texte ne se sélectionne pas et reste invisible pour une utilisation de base

Google peut-il considérer ça comme du cloaking ?

Non je ne pense pas car il n'y a pas de texte véritablement caché puisque les liens ne font que reprendre le menu. Cela peut plus s'apparenter à de l'accessibilité

Selon mes premiers test c'est bien mais sur Explorer des fois en passant rapidement, l'image disparaît pour revenir au passage suivant (un préchargement des images résoudrait-il cela ?)

En tout cas je n'ai pas trouvé sur internet de menus similaires, qu'en pensez vous ?
Modifié par Samuel Berg (13 Jul 2007 - 11:49)
Modérateur
bonsoir,

pour avoir deja tester ce genre de truc (applicable en theorie aussi a certain elements de formulaire ) , on se retrouve toujours confronté a un moment ou un autre au probleme de la taille reelle d'affichage de la police chez l'internaute .

Je pense que c'est une options / possibilité a connaitre et a utiliser quand le risque de superposition texte reel sur le texte image est peu probable.
Le alt="" d'une image est peut-etre plus sur , même si parfois la mise en forme du menu semble difficile.

Ton exemple pourrait etre modifier avec l'adjonction d'une image transparente :
<li><a href="index.php" class="lien1"><img src="blank.gif" alt="Lien1" /></a></li>


L'image transparente d'un pixel peut même alors etre declaré en display:block , et etre dimensionné a convenance .

Mieux ou moins bien , je ne sais pas , mais une autre idée en tout cas .


gc
Modifié par gcyrillus (09 Jul 2007 - 22:23)
Ce que j'aime surtout dans ce menu c'est :

- pas ou peu de ligne de code
- le rollover en css n'entrave pas une bonne lecture Xthml
- la rapidité de chargement (même si il y a un peu d'instabilité)

Pour ce qui est de la taille d'affichage réelle du texte même sur Mac qui à tendance à être plus différent que les autres, la taille ne peut pas varier suffisament pour que cela gêne. Au pire on met une taille en pixel pour être plus sûr.

En tout cas chez mois sur IE, Firefox, Safari et Firefox Mac aucun problème

Le fait de mettre une image transparente c'est ce que je voulais éviter : sans feuille de style on se retrouve avec une sémantique Xthml assez pauvre (une image transparent avec un lien). Alors que dans mon exemple on a une vrai liste à puce du menu.

Le seul problème que j'aimerai résoudre c'est la stabilité du menu.
J'ai l'impression que les images se rechargent sans cesse, ne peut-on les charger une fois pour toute pour qu'elles ne bougent plus (bug du rollout qui fait disparaître parfois l'image sur IE) ?
Bonjour

samuel a écrit :
Pour ce qui est de la taille d'affichage réelle du texte même sur Mac qui à tendance à être plus différent que les autres, la taille ne peut pas varier suffisament pour que cela gêne.

Tu as essayé d'agrandir 3 ou 4 fois les polices par pom+ ???? Certains internautes utilisent cette fonction d'agrandissement.
Oh tiens, une technique de rollover CSS avec remplacement d'image, ça faisait longtemps.

Bon, comme d'habitude, on va préciser :
- oui c'est pas mal;
- mais ça reste problématique dans plusieurs cas.

Un cas typique de problème rencontré: si l'utilisateur désactive les images, ou les couleurs de fond (ce qui désactive les images de fond). Ou bien si l'image est temporairement indisponible sur le serveur et ne se charge pas.
Résultat : du texte en petit, et en blanc sur fond blanc. Pas tip top.

La solution la plus accessible reste l'utilisation d'images avec attribut alt qui va bien. Pour les effets de survol, Javascript est tout à fait fonctionnel.

Samuel Berg a écrit :
- Un menu rollover en image en CSS sans javascript

Parce que Javascript c'est le mal ou parce que ça demande deux ou trois efforts supplémentaires? Smiley cligne
a écrit :
Un cas typique de problème rencontré: si l'utilisateur désactive les images, ou les couleurs de fond (ce qui désactive les images de fond). Ou bien si l'image est temporairement indisponible sur le serveur et ne se charge pas.
Résultat : du texte en petit, et en blanc sur fond blanc. Pas tip top.


Et non Samuel Berg à réponse à tout : tu met un background noir pour ton header et un image de 10*10px blanc en repeat.

Résultat s'il désactive les images (y en a quand même pas des masses à le faire faut pas déconner) il aura un menu blanc bien propre dans une police tout à fait acceptable (les miens sont en majuscule en 12px) sur fond noir ! Smiley murf

a écrit :

La solution la plus accessible reste l'utilisation d'images avec attribut alt qui va bien. Pour les effets de survol, Javascript est tout à fait fonctionnel.


Je fais malheureusement parti des nombreuses personnes qui s'intéressent plus aux grands aveugles du net (les moteurs de recherche) qu'aux déficients visuels
Modifié par Samuel Berg (10 Jul 2007 - 11:12)
Samuel Berg a écrit :
Je fais malheureusement parti des nombreuses personnes qui s'intéressent plus aux grands aveugles du net (les moteurs de recherche) qu'aux déficients visuels

Google est un grand aveugle qui sait lire les attributs alt. Qui, sauf preuve du contraire (tiens ça m'intéresserait pour le coup...), ne sont pas pénalisant par rapport à du texte brut.

Ceci dit, ta technique est effectivement sympa, et du moment qu'on pense à mettre une couleur de fond contrastée on limite grandement les dégâts possibles (pour le «yen a pas tellement qui désactivent les couleurs et images de fond», on peut dire la même chose pour Javascript Smiley cligne ).
La limite de cette technique, c'est qu'il faut disposer d'un espace vide sur lequel on affichera le texte. D'où l'intérêt de connaitre d'autres techniques, dont la technique «standard» (images HTML avec attribut alt, rollover Javascript si besoin).
Et pour épiloguer sur Référencement vs. Accessibilité:
1. Il y a des mesures d'accessibilité qui profitent aux moteurs de recherche (texte alternatif aux contenus pas ou peu référençables, liens hypertexte fonctionnels à l'intitulé suffisant, etc.)
2. La majorité des mesures d'accessibilité n'a aucun impact (ou un impact marginal) sur le référencement. Aucune contre-indication.
3. La seule mesure d'accessibilité qui peut nuire au référencement, c'est quand on essaie de fournir un contenu (texte et liens, notamment) pertinent pour l'utilisateur plutôt que riche en mots-clefs qui nous arrangent pour les moteurs.

Le troisième point fera donc débat. Le reste relève de l'évidence. Smiley smile
Florent V. a écrit :
Et pour épiloguer sur Référencement vs. Accessibilité:
1. Il y a des mesures d'accessibilité qui profitent aux moteurs de recherche (texte alternatif aux contenus pas ou peu référençables, liens hypertexte fonctionnels à l'intitulé suffisant, etc.)
2. La majorité des mesures d'accessibilité n'a aucun impact (ou un impact marginal) sur le référencement. Aucune contre-indication.
3. La seule mesure d'accessibilité qui peut nuire au référencement, c'est quand on essaie de fournir un contenu (texte et liens, notamment) pertinent pour l'utilisateur plutôt que riche en mots-clefs qui nous arrangent pour les moteurs.

Le troisième point fera donc débat. Le reste relève de l'évidence. Smiley smile



Il y a une différence énorme pour un moteur entre une liste à puce en haute de page qui fait guise de menu et des attributs alt
Samuel Berg a écrit :



Il y a une différence énorme pour un moteur entre une liste à puce en haute de page qui fait guise de menu et des attributs alt

Heum... les deux sont parfaitement conciliables:

<ul>
<li><a href="#"><img alt="Titre1" src="image.png" /></a></li>
<li><a href="#"><img alt="Titre2" src="image.png" /></a></li>
<li><a href="#"><img alt="Titre3" src="image.png" /></a></li>
</ul>
Benjamin D.C. a écrit :

Heum... les deux sont parfaitement conciliables:

<ul>
<li><a href="#"><img alt="Titre1" src="image.png" /></a></li>
<li><a href="#"><img alt="Titre2" src="image.png" /></a></li>
<li><a href="#"><img alt="Titre3" src="image.png" /></a></li>
</ul>


J'aurais dû rajouter une liste à puce avec des liens en dur
Samuel Berg a écrit :
Il y a une différence énorme pour un moteur entre une liste à puce en haute de page qui fait guise de menu et des attributs alt

Les généralités aussi abusives sur les algorithmes des moteurs de recherche, ça n'engage que ceux qui y croient (et heureusement).
Modifié par Julien Royer (10 Jul 2007 - 13:21)
Samuel Berg a écrit :
Il y a une différence énorme pour un moteur entre une liste à puce en haute de page qui fait guise de menu et des attributs alt

Ah tiens, j'avais loupé ça.

Et donc: preuve, résultats de tests, démonstrations?
Samuel Berg a écrit :
webrankinfo

Que je connais un peu, mais sans doute pas autant que toi. Ceci dit, le nom «webrankinfo» en lui-même n'est pas une preuve. Smiley cligne

Donc, plus concrètement...?
Sujet clos
Aller à