DentsLongues Posté 11 Février 2006 Posté 11 Février 2006 (modifié) Salut, je voudrais créer un menu dynamique hybride. Image + CSS. EDIT > barre de navigation = une série de boutons alignés horizontalement. C'est plus rapide et moins gourmand (moins d'images à charger) et plus souple (les titres du menu sont du texte en surimpression sur une image de fond qui est répétée, au lieu de créer un fichier image spécifique pour chaque titre...) J'ai trouvé un petit bout de code ad hoc mais je ne sais pas où l'insérer exactement. Notamment, je ne sais pas pourquoi il y a écrit --- div --- devant chaque #menu... cela ne correspond pas aux autres lignes de codes de mon fichier CSS. Tous mes essais d'insertion jusqu'à présent sont neutres ou catastrophiques. (nb: la source de ce code http://builder.com.com/5100-6371_14-5345057.html) --------- div#menu { height: auto; width: 150px; } div#menu li { height: 40px; width: 125px; margin: 10px; font-family: Arial, Helvetica, sans-serif; font-size: small; text-align: center; line-height: 200%; list-style-type: none; background-image: url(images/buttonface-up.jpg); background-repeat: no-repeat; } div#menu li a { display: block; width: 100%; height: 100%; text-decoration: none; } div#menu li a:link { color: blue: } div#menu li a:visited { color: #900; } div#menu li a:hover { font-weight: bold; color: red; } div#menu li a:active { font-weight: bold; color: red; background-image: url(images/buttonface-down.jpg); background-repeat: no-repeat; } (ps: je débute en code.) Modifié 11 Février 2006 par DentsLongues
Monique Posté 12 Février 2006 Posté 12 Février 2006 Bonjour, div#menu est un sélecteur d'ID. Cela signifie que les propriétés contenues dans cette règle s'appliqueront au contenu du bloc <div id="menu"> Un attribut ID sert à identifier un élément unique, on ne peut donc le trouver qu'une seule fois dans la page. div#menu li sont des sélecteurs descendants. Cela signifie que les propriétés de cette règle s'appliqueront à tous les éléments <li> contenus dans le bloc <div id="menu"> De même, les propriétés de la règle div#menu li a s'appliqueront à tous les liens contenus dans tous les éléments <li> contenus dans le bloc <div id="menu"> Quand à savoir où et comment insérer le code, et éventuellement comprendre pourquoi cela ne fonctionne pas, ce serait bien que tu nous donnes un lien vers une page test.
DentsLongues Posté 14 Février 2006 Auteur Posté 14 Février 2006 Ouais. Finalement, j'ai opté pour le javascript que je suis parvenu à intégrer dans la page. Mais j'ai du virer des Div#menu dans mon .css car ils gênaient la mise en page. Le javascript doit peser environ 95% de ma page mais bon... Je n'y croyais plus, mais il semble que trifouiller un code n'est pas si compliqué, même pour un bleu comme moi. Suffit de prendre le temps de TESTER DES DIZAINES DE MODIFS! Ca m'a pris quelques jours quand même! Mais désormais je connais un peu mieux tonton javascript! J'ai aussi amélioré ma connaissance de CSS. Donc c'est génial! Vivent les embrouilles de codes! Je vais peaufiner la page et la tester avec divers navigateurs. Si je javascript devait poser problème, j'ajouterais des hyperliens en dur sur la page d'accueil et une page index avec tous les liens... comme roue de secours. Jusqu'ici mes pages n'étaient que de simples trucs basiques en CSS.
xpatval Posté 14 Février 2006 Posté 14 Février 2006 Et tu as pensé à ceux qui désactivaient Javascript dans leur navigateur ? xpatval
DentsLongues Posté 17 Février 2006 Auteur Posté 17 Février 2006 Et tu as pensé à ceux qui désactivaient Javascript dans leur navigateur ? xpatval <{POST_SNAPBACK}> Je ne connais pas la proportion de "désactivateurs" parmi les gens en général, 2 ou 3% peut-être? Il ne verront donc pas ma zolie barre de navigation... Alea jacta est! Je n'ai pas le niveau pour fair un site à la fois joli et hyper-accessible. Je vais rajouter un hyperlien vers la page index du site (en dur) pour les anti-javascript et pour m'assurer que les fouineurs des moteurs de recherche repèrent bien toutes les pages. La barre de navigation javascript est trop clinquante pour que je me contente d'un CSS... qui n'est fait que pour la mise en page d'après certains.
Monique Posté 17 Février 2006 Posté 17 Février 2006 Bonjour, Je ne connais pas la proportion de "désactivateurs" parmi les gens en général, 2 ou 3% peut-être? Il ne verront donc pas ma zolie barre de navigation... <{POST_SNAPBACK}> A lire pour prendre ta décision en toute connaissance de cause : Pourquoi certains n'activent pas JavaScript ? La barre de navigation javascript est trop clinquante pour que je me contente d'un CSS... qui n'est fait que pour la mise en page d'après certains. Juste une petite réflexion, pas inutile : pour qui fait-on un site ? pour soi (donc pour se faire plaisir) ou bien pour le visiteur (lui assurer confort, facilité, efficacité et plaisir de naviguer) ? Et les CSS servent aussi a gérer la mise en forme d'une page (son aspect visuel)... ceux qui affirment le contraire se trompent
Denis Posté 17 Février 2006 Posté 17 Février 2006 Et tu as pensé à ceux qui désactivaient Javascript dans leur navigateur ? Incroyable, comment on ne s'en sort jamais n'est-ce pas?
DentsLongues Posté 17 Février 2006 Auteur Posté 17 Février 2006 (modifié) Bonjour, A lire pour prendre ta décision en toute connaissance de cause : Pourquoi certains n'activent pas JavaScript ? Juste une petite réflexion, pas inutile : pour qui fait-on un site ? pour soi (donc pour se faire plaisir) ou bien pour le visiteur (lui assurer confort, facilité, efficacité et plaisir de naviguer) ? Et les CSS servent aussi a gérer la mise en forme d'une page (son aspect visuel)... ceux qui affirment le contraire se trompent <{POST_SNAPBACK}> Je l'ai lu auparavant ouais. Personellement, le javascript ne m'a jamais posé de problème (sauf quand la page est sur mon disque dur...là j'ai contrôle activeX qui débarque...bizarre, nan?..). Je suis un surfeur moyen. Je surfe bcp mais je ne bidouille pas mon navigateur (qui au passage est toujours IE! ). Je me suis inspiré du code javascript d'un site professionnel et qui tourne bien. Je viens de rebosser ma mise en page, je vais ajouter un grand menu sur la gauche pour accès direct aux articles. Donc, le javascript sera un plus pour les petits malins qui tolèrent ce langage. Les autres surferont via ce menu fixe. Je passerai à CSS uniquement si je peux avoir le même résultat, ce qui n'est pas dans mes cordes pour le moment. Les barres de navigation type menu déroulant participent à l'apparence hachement professionnelle d'un site vous trouvez pas? Les menu déroulants en CSS ont l'air de design ATARI. (Ceci dit sans offense!) Je n'ai pas encore réussi à allier graphisme et CSS, malgré les tutoriels que j'ai trouvé. Je dois passer à d'autres détails techniques, après avoir consacré environ 3 jours à ce Pµ!@:# de menu déroulant. S'agit de bosser mes graphismes, la mise en page, le texte, les liens... pfiou! Dur dur d'être un webmaster pro! (surtout quand on est amateur!) Modifié 17 Février 2006 par DentsLongues
xpatval Posté 17 Février 2006 Posté 17 Février 2006 Incroyable, comment on ne s'en sort jamais n'est-ce pas? <{POST_SNAPBACK}> Au contraire, je trouve certains effets par css interposées très clean, aussi, et sauf spécification dûment mandatée par le client, j'évite d'en faire (des menus) en JS... xpatval
Denis Posté 17 Février 2006 Posté 17 Février 2006 Au contraire, [...] et sauf spécification dûment mandatée par le client, j'évite d'en faire (des menus) en JS... C'est bien ce que je voulais dire... Plus ça change, plus c'est pareil.
Dudu Posté 20 Février 2006 Posté 20 Février 2006 Salut Je ne connais pas la proportion de "désactivateurs" parmi les gens en général, 2 ou 3% peut-être? Il ne verront donc pas ma zolie barre de navigation... Alea jacta est! Je n'ai pas le niveau pour fair un site à la fois joli et hyper-accessible. Je vais rajouter un hyperlien vers la page index du site (en dur) pour les anti-javascript et pour m'assurer que les fouineurs des moteurs de recherche repèrent bien toutes les pages. Donc, le javascript sera un plus pour les petits malins qui tolèrent ce langage. Les autres surferont via ce menu fixe. Je dois passer à d'autres détails techniques, après avoir consacré environ 3 jours à ce Pµ!@:# de menu déroulant. S'agit de bosser mes graphismes, la mise en page, le texte, les liens... pfiou! Dur dur d'être un webmaster pro! (surtout quand on est amateur!) DentsLongues, si çà ne te dérange pas, je reformule ces citations de toi, je change juste 2-3 petites choses. "Je ne connais pas la proportion d'handicapés moteur parmi les gens en général, 2 ou 3% peut-être? Il ne pourront donc pas monter les escaliers du nouvel immeuble que je viens de construire... Alea jacta est! Je n'ai pas le niveau pour fair un immeuble à la fois joli et hyper-accessible. Je vais rajouter un beau panneau explicatif (en dur) pour les anti-monteurs d'escalier et pour m'assurer que les fouineurs de la police repèrent bien que je ne fais pas de discrimination. Donc, l'escalier sera un plus pour les petits malins qui tolèrent de monter des marches. Les autres resteront en bas. Je dois passer à d'autres détails techniques, après avoir consacré environ 3 jours à ce Pµ!@:# d'escalier. S'agit de bosser mes intérieurs, la mise en conformité, les raccordements EDF, les arrivées d'eau... pfiou! Dur dur d'être un architecte pro! (surtout quand on est amateur!)" Tout de suite, çà sonne moins bien, n'est ce pas La grande majorité des personnes qui n'ont pas Javascript activé ne sont pas des petits malins qui tolèrent ou pas quoi que ce soit, ce sont surtout des gens qui n'ont pas le choix. Et les stats s'élèvent à plus de 2 ou 3%.. Comme le souligne Monique, tu donnes l'impression de faire un site pour ton bon plaisir sans même te soucier de tes visiteurs. Dans ce cas, pourquoi faire un site ?
DentsLongues Posté 21 Février 2006 Auteur Posté 21 Février 2006 (modifié) Salut DentsLongues, si çà ne te dérange pas, je reformule ces citations de toi, je change juste 2-3 petites choses... Comparaison n'est pas raison. Tout le monde pourra accéder au site. Pour reprendre la métaphore et ce que je disais initialement, il y aura un ascenseur pour les "valides" (javascript) et un autre pour les "handicapés" (plan du site, genre page de liens en html). C'est dans mon intérêt d'être le plus accessible possible. Ce compromis me paraît honnête, sachant que certains sites ne proposent pas d'alternative du tout. Justement, ce serait intéressant de voir quel %age de visiteurs utilisent cette page html paliative à javascript (précisément). Je ne sais pas si c'est techniquement possible. Cela me donnerait une idée plus juste du nombre réel de visiteurs anti-javascript. Sauf si même certains pro-javascript préfèrent utiliser le plan du site... Ou alors faire deux versions du site... Avec un header.html (et menu déroulant) en javascript et un autre en pur CSS. Le reste du contenu ne changerait pas. Le visiteur pourrait choisir l'option de danser le javascript ou pas. Modifié 21 Février 2006 par DentsLongues
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant