"Réalisation d'un design complet (XHTML / CSS) en 5 étapes"

ce tuto est super bien fait :
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/design-css

mais je but sur un problème simple :
dans l'exemple, le menu est composé d'élément semblables : même largeur/hauteur, meme image de fond, etc.

Dans mon cas chaque élément du menu est une image, et chaque image est differente…
il faut changer le code html et css, mais comment faire ??

Bonjour aussi...

Tiens, au fait, sais-tu que les mots "bonjour", "s'il vous plaît", "au-revoir", "merci", etc. sont tous des mots du dictionnaire et que nous les utilisons ici sans honte ?

D'ailleurs contrairement aux apparences, tes interlocuteurs sont tous des vrais gens dans la vraie vie, comme toi, et non des robots.

Bonsoir,

nlex a écrit :
Dans mon cas chaque élément du menu est une image, et chaque image est differente…

Auquel cas, le plus simple est sans doute de faire ceci:

<ul id="navigation">
	<li><a href="..."><img alt="Intitulé du premier lien" src="..." /></a></li>
	<li><a href="..."><img alt="Intitulé du deuxième lien" src="..." /></a></li>
	<li><a href="..."><img alt="Intitulé du troisième lien" src="..." /></a></li>
</ul>

Si tu affiches tous les li du menu en display: inline, tu auras déjà réalisé la première étape.

désolé si j'en ai heurté certains, il est vrai que j'hésite toujours à commencer par dire bonjour dans un forum, c'est rarement l'usage ic et la, par contre des que j'ai des interlocuteurs 'en face' je ne suis en général pas avare de formules de politesse

une autre formule de politesse consiste aussi dans les forums à être clair dans sa demande d'aide, ce que je me suis efforcé de faire ici, et j'ai également voulu souligner le fait que je trouvais le tutorial particulièrement bien fait, car ce n'est pas un du… tout ça pour dire que je n'ai pas l'impression d'être un rustre total mais nul n'est parfait et je suis sur que je peux m'améliorer, ce qui tous notre but, n'est-ce pas ?

pour revenir au sujet d'origine

merci Florent pour ton aide, je vais essayer ça de suite

je me demande quand même comment je vais faire mon rollover puisque l'image est dans le code html et pas dans le css comme dans le tuto

en effet mon menu, est composée d'images (du texte en GIF quoi) qui au survol sont remplacées par une autre image (qui n'est en fait qu'un rectangle noir donc on peut imaginer aussi ne pas faire un GIF mais faire un rectangle noire en CSS, je ne sais pas)

je vais essayer de suite mais j'imagine que la méthode du tuto dans mon cas sera inopérante

nlex a écrit :
je me demande quand même comment je vais faire mon rollover puisque l'image est dans le code html et pas dans le css comme dans le tuto

Avec du Javascript, à priori.
Les rollover décoratifs en Javascript sont plus accessibles que leurs équivalents CSS à coup de techniques de remplacement d'image.

oulah !

donc en clair je me prends la tête pour rien ! a la base j'avais fait mes roll-over dans Image Ready en 2 minutes, mais bon finalement a la lecture des tutoriaux etc je pensais que c'etait mieux en css…

je suis déçu la, je voulais le faire en css…

nlex a écrit :
donc en clair je me prends la tête pour rien !

À voir... il n'est pas inutile d'apprendre plusieurs techniques, et de peser le pour et le contre de chacune.
Tu pourrais très bien réaliser ton design avec des li flottants de largeurs variables (pour coller à la largeur de l'image de fond de chaque lien), et utiliser la technique des rollover CSS. Celle-ci n'est pas terrible niveau accessibilité, mais a le mérite de ne pas demander à gérer trois langages à la fois (HTML, CSS et Javascript).

Les rollover Javascript, lorsqu'ils sont bien faits, sont par contre les plus accessibles. Je ne sais pas trop si ceux produits par ImageReady sont corrects, par contre.

nlex a écrit :
a la lecture des tutoriaux etc je pensais que c'etait mieux en css…

Chaque technologie a ses capacités et son rôle propres. CSS n'est pas fait pour générer des contenus, et il sera donc problématique (notamment pour l'accessibilité) de passer des contenus (images portant une information, notamment un intitulé de menu) en images de fond via CSS. Mais c'est une technique qui existe, qui est relativement simple à manier quand on connait bien CSS... d'où son usage fréquent, et sa présence dans des tutoriels CSS sur Alsacréations.

Tu remarqueras tout de même que dans le tutoriel dont il est question ici, le texte lui-même est dans le code HTML, tandis que les images de fond on bien un rôle d'images de fond (rôle décoratif). Mais à partir du moment où on n'utilise pas le texte présent dans le code HTML, il faut réfléchir aux solutions pour que les liens aient tout de même un intitulé dans le code HTML. Utiliser des images (via balise <img>) avec un attribut alt est le moyen le plus évident.

nlex a écrit :
je suis déçu la, je voulais le faire en css…

Le but n'est pas nécessairement de «faire en CSS», mais de faire avec la technologie adaptée.

Florent V. a écrit :

À voir... il n'est pas inutile d'apprendre plusieurs techniques, et de peser le pour et le contre de chacune.
Tu pourrais très bien réaliser ton design avec des li flottants de largeurs variables (pour coller à la largeur de l'image de fond de chaque lien), et utiliser la technique des rollover CSS. Celle-ci n'est pas terrible niveau accessibilité, mais a le mérite de ne pas demander à gérer trois langages à la fois (HTML, CSS et Javascript).

tu veux dire un peu comme dans ton premier post, avec l'image dans le html ?

Florent V. a écrit :

Les rollover Javascript, lorsqu'ils sont bien faits, sont par contre les plus accessibles. Je ne sais pas trop si ceux produits par ImageReady sont corrects, par contre.

je suis a peu près sur que non !

Florent V. a écrit :

Chaque technologie a ses capacités et son rôle propres. CSS n'est pas fait pour générer des contenus, et il sera donc problématique (notamment pour l'accessibilité) de passer des contenus (images portant une information, notamment un intitulé de menu) en images de fond via CSS. Mais c'est une technique qui existe, qui est relativement simple à manier quand on connait bien CSS... d'où son usage fréquent, et sa présence dans des tutoriels CSS sur Alsacréations.

Tu remarqueras tout de même que dans le tutoriel dont il est question ici, le texte lui-même est dans le code HTML, tandis que les images de fond on bien un rôle d'images de fond (rôle décoratif). Mais à partir du moment où on n'utilise pas le texte présent dans le code HTML, il faut réfléchir aux solutions pour que les liens aient tout de même un intitulé dans le code HTML. Utiliser des images (via balise <img>) avec un attribut alt est le moyen le plus évident.


Le but n'est pas nécessairement de «faire en CSS», mais de faire avec la technologie adaptée.

biensur c'est simplement que je n'ai actuellement pas de code JS dans mon site et donc il me semblait que rajouter JS serait une source de probleme surtout s'il est généré par Image ready (et je ne compte pas apprendre ce language juste dans l'optique de faire un pauvre menu, ça serait disproportionné pour ce je fais…)