Analyse de la page d'accueil du site www.alsacecreations.fr

Issu de la mis en page par tableaux je débarque et apprend avec stuppeur que tous ca tire a sa fin. J'ai toujours codé à la main donc les tableaux imbriqué de rowspan et colspan je connais pas trop même si les tableaux sont pas fait pour la mis en page mon code était quand même propre bref j'éssai de migrer tranquilement vers la mis en page css et j'ai acheté le livre css2 pour soutenir alsacecréation. Pour partir du bon pied rien de tel qu'un Reverse engineering de la page d'accueil d'alasce creation. Après avoir décortiqué le css et le code html la il y a quelque chose qui m'échappe au niveau du menu création solution et expertise en effet je ne voi ni la source de l'image dans le code html ni dans le css ca serait bien sympa d'avoir quelques explications . Aussi quel intérêt d'afficher les lien texte avec un position left à -5000px pourquoi ne pas utiliser display none ? mis a part ce détail l'intérêt de faire ca est de proposer un menu de navigation alternatif avec une autre feuille de style ?

ok c'est menu.png j'avais pas vue et la technique du rolllover est bien décrite dans la section tutoriel. Pour le display none j'ai trouvé la raison également tout est expliqué sur le site j'avais pas vu mille pardon.

Bonjour Parmenioneyes, et bienvenue sur ce forum.

Attention, c'est AlsacréationS, et pas AlsaCEcréation !

a écrit :
Aussi quel intérêt d'afficher les lien texte avec un position left à -5000px pourquoi ne pas utiliser display none ?

display: none pose des problèmes pour l'accessibilité. Ça serait une fausse bonne idée de l'utiliser pour créer une sorte de « texte alternatif ».

Voir ceci : Blog Alsacréations - Remplacement d'images : halte au display none !

a écrit :
Après avoir décortiqué le css et le code html la il y a quelque chose qui m'échappe au niveau du menu création solution et expertise en effet je ne voi ni la source de l'image dans le code html ni dans le css ca serait bien sympa d'avoir quelques explications

Un petit commentaire pour commencer : ce passage que je viens de citer est totalement dépourvu de signe de ponctuation. Pour faciliter la compréhension de tes messages, il serait bien de faire quelques efforts au niveau de la syntaxe (à marquer par la ponctuation) et de la séparation des idées (à marquer par des paragraphes). Merci d'avance.

Ensuite, l'image est forcément appelée depuis la feuille de style.
D'ailleurs, ça se passe par là :

#menu ul {
	background: transparent url(design/menu.png) top left no-repeat;
}
#menu li a:hover {
	background: transparent url(design/menu.png) top left no-repeat;
}
#menu a#creation:hover {
	background-position: 0px -53px;
}
#menu a#solutions:hover {
	background-position: -145px -53px;
}
#menu a#expertises:hover {
	background-position: -290px -53px;
}

Il y a en tout et pour tout une seule image :
http://alsacreations.fr/design/menu.png

Sans survol, c'est le background de #menu ul qui s'affiche.
Ensuite chaque lien, lorsqu'il est survolé, affiche la même image, mais avec un décalage. Et voilà le travail.
Le fait de tout placer sur une seule image permet entre autres de ne pas à avoir à utiliser de système de preload pour les états secondaires de l'image.
Modifié par mpop (31 Aug 2006 - 18:00)

Bonjour et merci de ta bienvenue.

Si l'intérêt premier de ce type de menu est d'être accessible pourquoi ne pas utiliser de simple image renseigné avec des alt en guise de bouton ?
exemple:
<ul>
<li><img src=... alt=....><li>
<li><img src=....alt=....><li>
<li><img src=....alt=....><li>
</ul>

Y a t'il un intérêt autre qui dicte ce choix? je pense par exemple à faire plus facilement par la suite une feuille de style print ayant la même structure mais sans image.

Salut Parmenioneyes

C'est bien, tu réfléchis et tu cherches et tu trouves ! Bravo, ça fait plaisir (si si !)

Juste une autre réprimande de modération en passant vu que t'as pas l'air trop sôt, tu comprendras vite je n'en doute pas !

Merci de baliser ton code avec les balises adéquates ([code ] [/ code] (sans espace)), ça facilite la lecture par la suite.

Pour répondre à ta question, oui c'est un bon reflexe en effet d'utiliser les images avec les attributs alt='' renseignés (s'ils le sont correctement cela dit en passant mais je pense que c'est ce que tu sous entendais).

Ce sont 2 façons de faire
Par contre, pour le roll over, avec l'utilisation d'image dans le code HTML, il faudra le faire par JavaScript.

Autre point, si tu utilises des images <img />, ça sera des éléments de deco a priori et """philosophiquement""" parlant c'est pas très correct dans la mesure où l'ont sépare deco et code. Un problème inhérent à cette question, c'est que le changement de mise en page nécessitera de changer cette partie aussi et non plus uniquement le style CSS.

Voili voilou.
Modifié par Olivier (01 Sep 2006 - 01:36)

Olivier a écrit :
Autre point, si tu utilises des images <img />, ça sera des éléments de deco a priori et """philosophiquement""" (...)

Non. Une icône de navigation, une image utilisée dans un menu, etc. sont des images véhiculant une information (la fonction du lien). Pas de la "déco". Le détournement de ces images dans les CSS est une confusion entre structure et présentation (mais dans un sens auquel on était moins habitué).

Par voie de conséquences, en son état actuel (image de background CSS et texte masqué), le menu d' http://alsacreations.fr n'est pas accessible au niveau A WCAG1.0: les options "désactiver la couleur" des navigateurs graphiques, par exemple, font en effet disparaître les images d'arrière-plan CSS, sans que le texte masqué ne puisse réapparaître (puisque cette option ne désactive pas le reste des styles CSS).

La solution accessible (pour les roll-over) passe par javascript, et non par les images d'arrière-plan CSS

Pour ce qui est de la facilité de maintenance et des changements d'image liés à redesign du site, c'est du ressort des technologies serveur (templates, etc) : mais cela ne justifie pas cette régression de la structure HTML...
Modifié par Laurent Denis (01 Sep 2006 - 06:49)

Laurent Denis a écrit :


Non. Une icône de navigation, une image utilisée dans un menu, etc. sont des images véhiculant une information (la fonction du lien). Pas de la "déco". Le détournement de ces images dans les CSS est une confusion entre structure et présentation (mais dans un sens auquel on était moins habitué).

Par voie de conséquences, en son état actuel (image de background CSS et texte masqué), le menu d' http://alsacreations.fr n'est pas accessible au niveau A WCAG1.0: les options "désactiver la couleur" des navigateurs graphiques, par exemple, font en effet disparaître les images d'arrière-plan CSS, sans que le texte masqué ne puisse réapparaître (puisque cette option ne désactive pas le reste des styles CSS).

Point très intéréssant. L'utilisation de bouton de navigation en img renseignés en alt est ce qui reste de plus accessible ? Je réitère donc ma question: pourquoi alsacreation à utilisé un menu avec image en background css ? doit y avoir une très bonne raison car ca demande pas mal plus de rigeur que de mettre une simple balise img...