Associer un menu au css avec des hovers activ
Fermé
Mortimer59
Messages postés
139
Date d'inscription
vendredi 27 juillet 2007
Statut
Membre
Dernière intervention
31 août 2018
-
28 mars 2008 à 00:24
Mortimer59 Messages postés 139 Date d'inscription vendredi 27 juillet 2007 Statut Membre Dernière intervention 31 août 2018 - 22 juin 2008 à 12:29
Mortimer59 Messages postés 139 Date d'inscription vendredi 27 juillet 2007 Statut Membre Dernière intervention 31 août 2018 - 22 juin 2008 à 12:29
A voir également:
- Associer un menu au css avec des hovers activ
- Menu déroulant excel - Guide
- Menu démarrer windows 11 - Guide
- Associer chromecast - Guide
- Canon quick menu - Télécharger - Utilitaires
- Menu demarrer - Guide
18 réponses
Salut, difficile de faire plus compliqué en effet. Tu as des répétitions à n'en plus finir là-dedans et le code est long... très long. Pour pas grand chose j'ai l'impression, ça risque d'être très difficile de le tenir à jour si tu veux y faire des modifs un jour.. Enfin, c'est mon avis, tu en fais ce que tu veux..
Tout ça pour dire que j'ai pas compris ta question, tu pourrais la formuler plus clairement et mettre des guillemets quand tu veux "on" comme dans "on/off" ?
Danke
Tout ça pour dire que j'ai pas compris ta question, tu pourrais la formuler plus clairement et mettre des guillemets quand tu veux "on" comme dans "on/off" ?
Danke
Mortimer59
Messages postés
139
Date d'inscription
vendredi 27 juillet 2007
Statut
Membre
Dernière intervention
31 août 2018
12
28 mars 2008 à 01:51
28 mars 2008 à 01:51
bon au début j'avais le même css sans le #m21 li.m21 et dans mon menu j'avais un truc comme <li a title='home' id= menu home' ou <li a title='home' id= menu home_on le truc c'est que ça je le mattais manuellement en fonction de mes pages bref apres 70000 fichiers un peu lourd du coup je me suis dis pourquoi ne pas faire qu'un seul menu à cpoier 10000 fois sans modifications et modifier le css en rajoutant un id correspondant à chaque page d'ou le <li class="m21" dans le menu que renvoit en théorie le css grace à #m21 et li.m21 mais c'est pas encore trop ça! bref j'essaie d'associer l'id de la css à l'id de la page
Daddy Cool
Messages postés
68
Date d'inscription
samedi 29 mars 2008
Statut
Membre
Dernière intervention
24 octobre 2014
6
29 mars 2008 à 01:37
29 mars 2008 à 01:37
Resalut, je reçois pas d'avertissement de réponse... :(
bon, j'essaie encore de bien visualiser la chose. Déjà, voici quelque conseil pour optimiser ta page (car à mon avis, y'a bien trop de stock à l'intérieur et ça rend les conseils difficiles à donner).
Aussi, il faudraitr que tu me dises avec quoi est fait ta page, c'est du html pur ? ou c'est généré par du php ?
CSS, Cascading Style Sheet, tu t'y connaît bien ?
Bon, les conseils :
(moi, c'est comme ça que je ferais en tout cas..):
Ici, tu n'as pas besoin de <span>, tu n'as qu'à rajouter une class="off" à ta balise <a>. Ça allège...
Aussi, ton href, ne l'écris pas en href "absolu", mais plutôt en "relative", l'équivalent serait : href="/?page_id=24/" . (remarque le / au début, c'est la "racine" de ton adresse. Comme ça, le jour où tu change de nom de site, tu n'es pas dans la m** ;) ) Ce conseil vaut pour tous tes "href".
----
Maintenant, tes chemins CSS, prenons un exemple :
cela suppose que tu veux appliquer le style {...} à l'élément <li class="m1"></li> DANS LE CAS OÙ cet élément se trouve comme suit dans ta page :
Mais quand on regarde ton code html, on voit bien que ce chemin css ne mène nul part ! Donc, que ce style ne sera jamais appliqué.
à la place, faudrait utiliser ce chemin qui est valide :
(bien que je suspecte que tu veuilles appliquer ce style à la balise <li>, donc tu devrais mettre ce id="menu_home" à cette balise plutôt qu'à <a>. Enfin, après c'est une question d'ajustement. Mais faut vraiment que tu allèges tout ça.
D'ailleurs, où est l'élément aillant une id="m1".
a++
bon, j'essaie encore de bien visualiser la chose. Déjà, voici quelque conseil pour optimiser ta page (car à mon avis, y'a bien trop de stock à l'intérieur et ça rend les conseils difficiles à donner).
Aussi, il faudraitr que tu me dises avec quoi est fait ta page, c'est du html pur ? ou c'est généré par du php ?
CSS, Cascading Style Sheet, tu t'y connaît bien ?
Bon, les conseils :
(moi, c'est comme ça que je ferais en tout cas..):
<li class="m1"> <a title='home' id='menu_home' href="http://olivierbaudrydesign.free.fr/?page_id=24/"> <span class='off'>home</span> </a> </li>
Ici, tu n'as pas besoin de <span>, tu n'as qu'à rajouter une class="off" à ta balise <a>. Ça allège...
Aussi, ton href, ne l'écris pas en href "absolu", mais plutôt en "relative", l'équivalent serait : href="/?page_id=24/" . (remarque le / au début, c'est la "racine" de ton adresse. Comme ça, le jour où tu change de nom de site, tu n'es pas dans la m** ;) ) Ce conseil vaut pour tous tes "href".
----
Maintenant, tes chemins CSS, prenons un exemple :
#m1 a#menu_home li.m1, {...}
cela suppose que tu veux appliquer le style {...} à l'élément <li class="m1"></li> DANS LE CAS OÙ cet élément se trouve comme suit dans ta page :
<balise id="m1"> [plein d'autres balises si tu veux] <a id="menu_home"> [probablement une balise ul] <li class="m1">text</li> [fin des balises] </a> [fin des autres balises] </balise>
Mais quand on regarde ton code html, on voit bien que ce chemin css ne mène nul part ! Donc, que ce style ne sera jamais appliqué.
à la place, faudrait utiliser ce chemin qui est valide :
#m1 li.m1 a#menu_home{...}, ce qui mène à un élément existant. Encore que, comme ce style ne s'appliquerait qu'à a#menu_home et que celui-ci a un identifiant unique, tu n'as qu'à écrire #menu_home{...}. Ce qui allège vachement ton code!!
(bien que je suspecte que tu veuilles appliquer ce style à la balise <li>, donc tu devrais mettre ce id="menu_home" à cette balise plutôt qu'à <a>. Enfin, après c'est une question d'ajustement. Mais faut vraiment que tu allèges tout ça.
D'ailleurs, où est l'élément aillant une id="m1".
a++
Baudry
>
Daddy Cool
Messages postés
68
Date d'inscription
samedi 29 mars 2008
Statut
Membre
Dernière intervention
24 octobre 2014
29 mars 2008 à 09:34
29 mars 2008 à 09:34
bonjour,
Depuis suite à d'autre conseils j'ai modifié mon code de la sorte , mon menu ressemble à ceci :
Depuis suite à d'autre conseils j'ai modifié mon code de la sorte , mon menu ressemble à ceci :
<ul id='menu_oupocreanum'> <li class="m1"><a title='home' href="http://olivierbaudrydesign.free.fr/?page_id=24/"><span class='off'>home</span></a></li> <li class="m2"><a title='biography' href="http://olivierbaudrydesign.free.fr/?page_id=25/"><span class='off'>biography</span></a></li> <li class="m3"><a title='randomizer' href="http://olivierbaudrydesign.free.fr/?page_id=26/"><span class='off'>randomizer</span></a></li> <li class="m4"><a title='workingprogress' href="http://olivierbaudrydesign.free.fr/?page_id=27/"><span class='off'>workingprogress</span></a></li> <li class="m5"><a title='play' href="http://olivierbaudrydesign.free.fr/?page_id=28/"><span class='off'>play</span></a></li> <li class="m6"><a title='videos' href="http://olivierbaudrydesign.free.fr/?page_id=29/"><span class='off'>videos</span></a></li> <li class="m7"><a title='pictures' href="http://olivierbaudrydesign.free.fr/?page_id=30/"><span class='off'>pictures</span></a></li> <li class="m8"><a title='sounds' href="http://olivierbaudrydesign.free.fr/?page_id=31/"><span class='off'>sounds</span></a></li> <li class="m9"><a title='exhibition' href="http://olivierbaudrydesign.free.fr/?page_id=32/"><span class='off'>exhibition</span></a></li> <li class="m10"><a title='software' href="http://olivierbaudrydesign.free.fr/?page_id=33/"><span class='off'>logicielssoftware</span></a></li> <li class="m11"><a title='abstracts' href="http://olivierbaudrydesign.free.fr/?page_id=34/"><span class='off'>abstracts</span></a></li> <li class="m12"><a title='diagrams' href="http://olivierbaudrydesign.free.fr/?page_id=35/"><span class='off'>diagrams</span></a></li> <li class="m13"><a title='machines' href="http://olivierbaudrydesign.free.fr/?page_id=36/"><span class='off'>machines</span></a></li> <li class="m14"><a title='artists' href="http://olivierbaudrydesign.free.fr/?page_id=37/"><span class='off'>artists</span></a></li> <li class="m15"><a title='bibliography' href="http://olivierbaudrydesign.free.fr/?page_id=38/"><span class='off'>bibliography</span></a></li> <li class="m16"><a title='webography' href="http://olivierbaudrydesign.free.fr/?page_id=39/"><span class='off'>webography</span></a></li> <li class="m17"><a title='discography' href="http://olivierbaudrydesign.free.fr/?page_id=40/"><span class='off'>discography</span></a></li> <li class="m18"><a title='citations' href="http://olivierbaudrydesign.free.fr/?page_id=41/"><span class='off'>citations</span></a></li> <li class="m19"><a title='lexicon on interactivity' href="http://olivierbaudrydesign.free.fr/?page_id=42/"><span class='off'>lexique</span></a></li> <li class="m20"><a title='forum' href="http://olivierbaudrydesign.free.fr/?page_id=46/"><span class='off'>forum</span></a></li> <li class="m21"><a title='upload' href="http://olivierbaudrydesign.free.fr/?page_id=43/"><span class='off'>upload</span></a></li> <li class="m22"><a title='thanks' href="http://olivierbaudrydesign.free.fr/?page_id=44/"><span class='off'>thanks</span></a></li> <li class="m23"><a title='links' href="http://olivierbaudrydesign.free.fr/?page_id=45/"><span class='off'>links</span></a></li> </ul>et ma css à ceci :
/* Theme Name: Oupocreanum Theme URI: http://olivierbaudrydesign.free.fr Description: The default WordPress theme based on the famous Version: 2.6 Author: Olivier Baudry Author URI: olivierbaudrydesign.free.fr */ /* oupocreanum:menu */ #m1 a#menu_home li.m1, #m1 a#menu_home_on li.m1{ position: absolute; top: -30px; left: -1px; } #m2 a#menu_biography li.m2, #m2 a#menu_biography_on li.m2{ position: absolute; top: -30px; left: 28px; } #m3 a#menu_random li.m3, #m3 a#menu_random_on li.m3{ position: absolute; top: -30px; left: 57px; } #m4 a#menu_workingprogress li.m4, #m4 a#menu_workingprogress_on li.m4{ position: absolute; top: -30px; left: 86px; } #m5 a#menu_play li.m5, #m5 a#menu_play_on li.m5{ position: absolute; top: -30px; left: 115px; } #m6 a#menu_videos li.m6, #m6 a#menu_videos_on li.m6{ position: absolute; top: -30px; left: 144px; } #m7 a#menu_pictures li.m7, #m7 a#menu_pictures_on li.m7{ position: absolute; top: -30px; left: 173px; } #m8 a#menu_sounds li.m8, #m8 a#menu_sounds_on li.m8{ position: absolute; top: -30px; left: 202px; } #m9 a#menu_exhibition li.m9, #m9 a#menu_exhibition_on li.m9{ position: absolute; top: -30px; left: 260px; } #m10 a#menu_software li.m10, #m10 a#menu_software_on li.m10{ position: absolute; top: -30px; left: 231px; } #m11 a#menu_abstracts li.m11 , #m11 a#menu_abstracts_on li.m11{ position: absolute; top: -30px; left: 289px; } #m12 a#menu_diagrams li.m12,#m12 a#menu_diagrams_on li.m12{ position: absolute; top: -30px; left: 318px; } #m13 a#menu_machines li.m13,#m13 a#menu_machines_on li.m13 { position: absolute; top: -30px; left: 347px; } #m14 a#menu_artists li.m14 ,#m14 a#menu_artists_on li.m14{ position: absolute; top: -30px; left: 376px; } #m15 a#menu_bibliography li.m15, #m15 a#menu_bibliography_on li.m15{ position: absolute; top: -30px; left: 405px; } #m16 a#menu_webography li.m16, #m16 a#menu_webography_on li.m16{ position: absolute; top: -30px; left: 434px; } #m17 a#menu_discography li.m17, #m17 a#menu_discography_on li.m17{ position: absolute; top: -30px; left: 463px; } #m18 a#menu_citations li.m18, #m18 a#menu_citations_on li.m18{ position: absolute; top: -30px; left: 492px; background-image: url(/wp-content/themes/Oupocreanum/images/iconesmenu/citations_inactive.gif); } #m19 a#menu_lexique li.m19, #m19 a#menu_lexique_on li.m19{ position: absolute; top: -30px; left: 521px; } #m20 a#menu_forum li.m20, #m20 a#menu_forum_on li.m20 { position: absolute; top: -30px; left: 579px; } #m21 a#menu_upload li.m21, #m21 a#menu_upload_on li.m21{ position: absolute; top: -30px; left: 608px; } #m22 a#menu_thanks li.m22, #m22 a#menu_thanks_on li.m22{ position: absolute; top: -30px; left: 637px; } #m23 a#menu_links li.m23, #m23 a#menu_links_on li.m23 { position: absolute; top: -30px; left: 550px; } ul#menu_oupocreanum { list-style-type: none; } #m1 a#menu_home li.m1, #m1 a#menu_home_on li.m1, #m2 a#menu_biography li.m2, #m2 a#menu_biography_on li.m2, #m3 a#menu_random li.m3, #m3 a#menu_random_on li.m3, #m4 a#menu_workingprogress li.m4, #m4 a#menu_workingprogress_on li.m4, #m5 a#menu_play li.m5, #m5 a#menu_play_on li.m5, #m6 a#menu_videos li.m6, #m6 a#menu_videos_on li.m6, #m7 a#menu_pictures li.m7, #m7 a#menu_pictures_on li.m7, #m8 a#menu_sounds li.m8, #m8 a#menu_sounds_on li.m8, #m9 a#menu_exhibition li.m9, #m9 a#menu_exhibition_on li.m9,#m10 a#menu_software li.m10, #m10 a#menu_software_on li.m10, #m11 a#menu_abstracts li.m11, #m11 a#menu_abstracts_on li.m11, #m13 a#menu_machines li.m13,#m13 a#menu_machines_on li.m13, #m12 a#menu_diagrams li.m12,#m12 a#menu_diagrams_on li.m12, #m14 a#menu_artists li.m14,#m14 a#menu_artists_on li.m14, #m15 a#menu_bibliography li.m15, #m15 a#menu_bibliography_on li.m15, #m16 a#menu_webography li.m16, #m16 a#menu_webography_on li.m16, #m17 a#menu_discography li.m17, #m17 a#menu_discography_on li.m17, #m18 a#menu_citations li.m18, #m18 a#menu_citations_on li.m18, #m19 a#menu_lexique li.m19, #m19 a#menu_lexique_on li.m19, #m20 a#menu_forum li.m20, #m20 a#menu_forum_on li.m20 , #m21 a#menu_upload li.m21, #m21 a#menu_upload_on li.m21, #m22 a#menu_thanks li.m22, #m22 a#menu_thanks_on li.m22,#m23 a#menu_links li.m23, #m23 a#menu_links_on li.m23{ width: 28px; height: 28px; border-style: dotted; border-width: 1px; border-color: grey; border-bottom-width: 0px; background-color: white !important; } #m1 a#menu_home li.m1 :link, #m1 a#menu_home li.m1:visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/home_inactive.gif); } #m1 a#menu_home_on li.m1:link, #m1 a#menu_home_on li.m1:visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/home_active.gif); } #m1 a#menu_home li.m1:hover, #m1 a#menu_home_on li.m1:hover { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/home_hover.gif); } #m2 a#menu_biography li.m2:link, #m2 a#menu_biography li.m2:visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/biography_inactive.gif); } #m2 a#menu_biography_on li.m2:link, #m2 a#menu_biography_on li.m2:visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/biography_active.gif); } #m2 a#menu_biography li.m2 :hover, #m2 a#menu_biography_on li.m2:hover { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/biography_hover.gif); } #m3 a#menu_random li.m3:link, #m3 a#menu_random li.m3:visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/rand_inactive.gif); } #m3 a#menu_random_on li.m3:link, #m3 a#menu_random_on li.m3:visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/rand_active.gif); } #m3 a#menu_random li.m3:hover, #m3 a#menu_random_on li.m3:hover { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/rand_hover.gif); } #m4 a#menu_workingprogress li.m4 :link, #m4 a#menu_workingprogress li.m4:visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/workingprogress_inactive.gif); } #m4 a#menu_workingprogress_on li.m4 :link, #m4 a#menu_workingprogress_on li.m4:visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/workingprogress_active.gif); } #m4 a#menu_workingprogress li.m4 :hover, #m4 a#menu_workingprogress_on li.m4 :hover { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/workingprogress_hover.gif); } #m5 a#menu_play_on li.m5 :link, #m5 a#menu_play_on li.m5:visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/play_inactive.gif); } #m5 a#menu_play_on li.m5 :link, #m5 a#menu_play_on li.m5 :visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/play_active.gif); } #m5 a#menu_play_on li.m5 :hover, #m5 a#menu_play_on li.m5 :hover { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/play_hover.gif); } #m6 a#menu_videos_on li.m6 :link, #m6 a#menu_videos_on li.m6 :visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/videos_inactive.gif); } #m6 a#menu_videos_on li.m6 :link, #m6 a#menu_videos_on li.m6 :visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/videos_active.gif); } #m6 a#menu_videos_on li.m6 :hover, #m6 a#menu_videos_on li.m6 :hover { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/videos_hover.gif); } #m7 a#menu_pictures li.m7:link , #m7 a#menu_pictures li.m7 :visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/photos_inactive.gif); } #m7 a#menu_pictures_on li.m7:link , #m7 a#menu_pictures_on li.m7 :visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/photos_active.gif); } #m7 a#menu_pictures li.m7 :hover , #m7 a#menu_pictures_on li.m7 :hover { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/photos_hover.gif); } #m8 a#menu_sounds li.m8 :link ,#m8 a#menu_sounds li.m8 :visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/sounds_inactive.gif); } #m8 a#menu_sounds_on li.m8 :link, #m8 a#menu_sounds_on li.m8 :visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/sounds_active.gif); } #m8 a#menu_sounds li.m8 :hover, #m8 a#menu_sounds_on li.m8:hover { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/sounds_hover.gif); } #m9 a#menu_exhibition li.m9:link, #m9 a#menu_exhibition li.m9:visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/linearizer_inactive.gif); } #m9 a#menu_exhibition_on li.m9 :link, #m9 a#menu_exhibition_on li.m9:visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/linearizer_active.gif); } #m9 a#menu_exhibition li.m9 :hover, #m9 a#menu_exhibition_on li.m9:hover { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/linearizer_hover.gif); } #m10 a#menu_software li.m10 :link, #m10 a#menu_software li.m10 :visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/software_inactive.gif); } #m10 a#menu_software_on li.m10 :link, #m10 a#menu_software_on li.m10 :visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/software_active.gif); } #m10 a#menu_software li.m10 :hover, #m10 a#menu_software_on li.m10 :hover { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/software_hover.gif); } #m11 a#menu_abstracts li.m11:link, #m11 a#menu_abstracts li.m11 :visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/abstracts_inactive.gif); } #m11 a#menu_abstracts_on li.m11 :link, #m11 a#menu_abstracts_on li.m11:visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/abstracts_active.gif); } #m11 a#menu_abstracts li.m11 :hover, #m11 a#menu_abstracts_on li.m11 :hover { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/abstracts_hover.gif); } #m12 a#menu_diagrams li.m12 :link, #m12 a#menu_diagrams li.m12:visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/diagrams_inactive.gif); } #m12 a#menu_diagrams_on li.m12 :link, #m12 a#menu_diagrams_on li.m12:visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/diagrams_active.gif); } #m12 a#menu_diagrams li.m12:hover, #m12 a#menu_diagrams_on li.m12:hover { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/diagrams_hover.gif); } #m13 a#menu_machines li.m13:link, #m13 a#menu_machines li.m13:visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/machines_inactive.gif); } #m13 a#menu_machines_on li.m13 :link, #m13 a#menu_machines_on li.m13 :visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/machines_active.gif); } #m13 a#menu_machines li.m13:hover, #m13 a#menu_machines_on:hover { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/machines_hover.gif); } #m14 a#menu_artists li.m14 :link, #m14 a#menu_artists li.m14 :visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/artists_inactive.gif); } #m14 a#menu_artists_on li.m14 :link, #m14 a#menu_artists_on li.m14 :visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/artists_active.gif); } #m14 a#menu_artists li.m14 :hover, #m14 a#menu_artists_on li.m14 :hover { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/artists_hover.gif) } #m15 a#menu_bibliography li.m15 :link, #m15 a#menu_bibliography li.m15:visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/bibliography_inactive.gif); } #m15 a#menu_bibliography_on li.m15 :link, #m15 a#menu_bibliography_on li.m15 :visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/bibliography_active.gif); } #m15 a#menu_bibliography li.m15 :hover, #m15 a#menu_bibliography_on li.m15 :hover { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/bibliography_hover.gif); } #m16 a#menu_webography li.m16 :link, #m16 a#menu_webography li.m16 :visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/webography_inactive.gif); } #m16 a#menu_webography_on li.m16 :link, #m16 a#menu_webography_on li.m16 :visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/webography_active.gif); } #m16 a#menu_webography li.m16 :hover, #m16 a#menu_webography_on li.m16 :hover { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/webography_hover.gif); } #m17 a#menu_discography li.m17 :link, #m17 a#menu_discography li.m17 :visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/discography_inactive.gif); } #m17 a#menu_discography_on li.m17 :link, #m17 a#menu_discography_on li.m17 :visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/discography_active.gif); } #m17 a#menu_discography li.m17 :hover, #m17 a#menu_discography_on li.m17 :hover { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/discography_hover.gif); } #m18 a#menu_citations li.m18 :link, #m18 a#menu_citations li.m18 :visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/citations_inactive.gif); } #m18 a#menu_citations_on li.m18 :link, #m18 a#menu_citations_on li.m18 :visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/citations_active.gif); } #m18 a#menu_citations li.m18 :hover, #m18 a#menu_citations_on li.m18 :hover { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/citations_hover.gif); } #m19 a#menu_lexique li.m19 :link, #m19 a#menu_lexique li.m19 :visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/lexique_inactive.gif); } #m19 a#menu_lexique_on li.m19 :link, #m19 a#menu_lexique_on li.m19 :visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/lexique_active.gif); } #m19 a#menu_lexique li.m19 :hover, #m19 a#menu_lexique_on li.m19 :hover { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/lexique_hover.gif); } #m20 a#menu_forum li.m20 :link, #m20 a#menu_forum li.m20 :visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/forum_inactive.gif); } #m20 a#menu_forum_on li.m20 :link, #m20 a#menu_forum_on li.m20 :visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/forum_active.gif); } #m20 a#menu_forum li.m20 :hover, a#menu_forum_on li.m20 :hover { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/forum_hover.gif); } #m21 a#menu_upload li.m21 :link, #m21 a#menu_upload li.m21 :visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/upload_inactive.gif); } #m21 a#menu_upload_on li.m21 :link, #m21 a#menu_upload_on li.m21 :visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/upload_active.gif); } #m21 a#menu_upload li.m21 :hover, #m21 a#menu_upload_on li.m21 :hover { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/upload_hover.gif); } #m22 a#menu_thanks li.m22 :link, #m22 a#menu_thanks li.m22 :visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/thanks_inactive.gif); } #m22 a#menu_thanks_on li.m22 :link, #m22 a#menu_thanks_on li.m22 :visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/thanks_active.gif); } #m22 a#menu_thanks li.m22 :hover, #m22 a#menu_thanks_on li.m22 :hover { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/thanks_hover.gif); } #m23 a#menu_links_on li.m23 :link, #m23 a#menu_links_on li.m23 :visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/links_inactive.gif); } #m23 a#menu_links_on li.m23 :link , #m23 a#menu_links_on li.m23 :visited { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/links_active.gif); } #m23 a#menu_links li.m23 :hover, #m23 a#menu_links li.m23 :hover { background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/links_hover.gif); } /* english french deutsch language links */ ul#language { list-style-type: none; } a#menu_english_active, a#menu_english_inactive, a#menu_french_active, a#menu_french_inactive,a#menu_deutsch_active, a#menu_deutsch_inactive { width: 28px; height: 28px; border-style: dotted; border-width: 1px; border-color: grey; border-left-width: 0px; background-color: white !important; /* remove transparent holes in border */ z-index: 1; } a#menu_english_active { position: absolute; top: -1px; left: 792px; } a#menu_english_inactive { position: absolute; top: -1px; left: 792px; } a#menu_french_active { position: absolute; top: 28px; left: 792px; } a#menu_french_inactive { position: absolute; top: 28px; left: 792px; } a#menu_deutsch_active { position: absolute; top: 57px; left: 792px; } a#menu_deutsch_inactive { position: absolute; top: 57px; left: 792px; } a#menu_english_active:link, a#menu_english_active:visited { background-image: url(/wp-content/themes/Oupocreanum/images/iconesmenu/english_active.gif); } a#menu_english_inactive:link, a#menu_english_inactive:visited { background-image: url(/wp-content/themes/Oupocreanum/images/iconesmenu/english_inactive.gif); } a#menu_english_active:hover, a#menu_english_inactive:hover { background-image: url(/wp-content/themes/Oupocreanum/images/iconesmenu/english_hover.gif); } a#menu_french_active:link, a#menu_french_active:visited { background-image: url(/wp-content/themes/Oupocreanum/images/iconesmenu/french_active.gif); } a#menu_french_inactive:link, a#menu_french_inactive:visited { background-image: url(/wp-content/themes/Oupocreanum/images/iconesmenu/french_inactive.gif); } a#menu_french_active:hover, a#menu_french_inactive:hover { background-image: url(/wp-content/themes/Oupocreanum/images/iconesmenu/french_hover.gif); } a#menu_deutsch_active:link, a#menu_deutsch_active:visited { background-image: url(/wp-content/themes/Oupocreanum/images/iconesmenu/deutsch_active.gif); } a#menu_deutsch_inactive:link, a#menu_deutsch_inactive:visited { background-image: url(/wp-content/themes/Oupocreanum/images/iconesmenu/deutsch_inactive.gif); } a#menu_deutsch_active:hover, a#menu_deutsch_inactive:hover { background-image: url(/wp-content/themes/Oupocreanum/images/iconesmenu/deutsch_hover.gif); }voilà bon je tente de simplifier la bête mais si ça ne marche pas je reviendrais à mon ancienne version qui marche mais celle-ci m'obligeait à indiquer menu_hone ou menu home_on etc pour chaque page,bref pas très rapide.
Daddy Cool
Messages postés
68
Date d'inscription
samedi 29 mars 2008
Statut
Membre
Dernière intervention
24 octobre 2014
6
29 mars 2008 à 09:43
29 mars 2008 à 09:43
Tu sais, au lieu de faire des gros dump que personne ne va prendre le temps de lire, tu aurais mieux fait de décrire les changements apportés... là, c'est complètement illisible et je vais pas m'amuser à faire de l'ascenceur pour comprendre où sont tes modifications !
De plus, tu n'as répondu à aucune de mes questions, ce qui n'aide pas plus...
De plus, tu n'as répondu à aucune de mes questions, ce qui n'aide pas plus...
Bon j'ai tenté l'inversion #m1 li.m1 a#menu_home au lieu de #m1 a#menu_home li.m1 mais rien n'y fait , la page générée était en html et là je suis en train de voir pour faire en xhtml avec des includes php. Ensuite oui je veux appliquer le style à l'élément m1 du menu qu'il soit on ou off.
Voilà, là je crois que j'ai tout dit. Ensuite le a#menu_home {......} si je te comprends peut prendre les deux états on et off, c'est cela? Du coup plus besoin de a#menu_home et de a#menu_home_on dans ma css.
Voilà, là je crois que j'ai tout dit. Ensuite le a#menu_home {......} si je te comprends peut prendre les deux états on et off, c'est cela? Du coup plus besoin de a#menu_home et de a#menu_home_on dans ma css.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Daddy Cool
Messages postés
68
Date d'inscription
samedi 29 mars 2008
Statut
Membre
Dernière intervention
24 octobre 2014
6
29 mars 2008 à 11:11
29 mars 2008 à 11:11
ça ne sert à rien de passer au xhtml si tu ne comptes pas te servir du Xhtml (inclure du xml dans tes pages). Par contre le php, ça oui et tu peux l'utiliser dans du html.
Fais toi une page simple où tu n'as que 2 <li>, même chose avec ta css. Test ton code sur des bouts simple et vérifis qu'il fonctionne, ensuite, tu l'optimises avant de passer à plus gros.
Là, je ne sais pas trop pourquoi ça ne marche pas, le code que tu as dumpé ne contient aucun élément avec un id="m1".. Si c'est ça, c'est normal de ne rien avoir.
Pour ton élément "on", tu peux simplement le mettre dans une class du genre
et faire une class css exprès :
au lieu de faire tout le "chemin" pour te rendre à une certaine balise.
trop de spécificité tue la spécifité...
Fais toi une page simple où tu n'as que 2 <li>, même chose avec ta css. Test ton code sur des bouts simple et vérifis qu'il fonctionne, ensuite, tu l'optimises avant de passer à plus gros.
Là, je ne sais pas trop pourquoi ça ne marche pas, le code que tu as dumpé ne contient aucun élément avec un id="m1".. Si c'est ça, c'est normal de ne rien avoir.
Pour ton élément "on", tu peux simplement le mettre dans une class du genre
<li class="m1 on"></li> <li class="m2 off"></li>
et faire une class css exprès :
.on{...}
.off{...}
au lieu de faire tout le "chemin" pour te rendre à une certaine balise.
trop de spécificité tue la spécifité...
Tu me dit ne pas voir d'id="m1" pourtant dans le menu il est présent et dans le css il y'a #m1.J'avoue que j'ai un peu de mal à te suivre là, je vais reprendre le bon bouquin d'Andy Clarke sur le css histoire de trouver un truc !
Daddy Cool
Messages postés
68
Date d'inscription
samedi 29 mars 2008
Statut
Membre
Dernière intervention
24 octobre 2014
6
29 mars 2008 à 14:07
29 mars 2008 à 14:07
en tout cas, aucun élément avec un id="m1" n'est dans ton dump.. ou bien je ne le vois pas ..
Daddy Cool
Messages postés
68
Date d'inscription
samedi 29 mars 2008
Statut
Membre
Dernière intervention
24 octobre 2014
6
29 mars 2008 à 14:31
29 mars 2008 à 14:31
lol, là c'est sur que ça va te faire une grosse différence ;)
bon peut-être dois je expliquer en gros la structure de chaque pade mon site en fait son entête
par example pour workingprogress ça se passe ainsi
Bon je mets tout ça parce qu'a force d'être dedans je commence à ne plus avoir les idées claires, le besoin d'un regard neuf se fait sentir sans doute a la vue de ceci , l'erreur se révelera !
par example pour workingprogress ça se passe ainsi
<?php /* Template Name: Workingprogress */ ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <title><?php bloginfo('name'); ?><?php wp_title(); ?></title> <meta name="Description" content="<?php bloginfo('description'); ?>" /> <meta name="Keywords" content="code, art, algorithm, code|art, design, interactivity, generativity, hypermedia, dynamic media, programming, programs, computer code, robotics, interfaces, art schools, art theory, new media, epistemology, cybernetics, technê, Olivier Baudry" /> <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/workingprogress.css" type="text/css" media="screen" /> <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/menusite.css" type="text/css" media="screen" /> <style type="text/css" media="screen"> </style> <link rel="bookmark" title="<?php bloginfo('name'); ?>" href="<?php bloginfo('url'); ?>" /> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <?php wp_get_archives('type=monthly&format=link'); ?> </head> <body> <div id="workingprogress"><!-- begin workingprogress --> <div id="content">en gros il ya un truc qui se fait aussi parce qu'il y a une balise div id"workingprogress" pour la page home c'est div id="home" avant mon ancien menu marchait bien il prenait la forme suivante
<ul id="oupocreanum" <li><a title="home" id="menu_home_on" href="/wp-content/themes/oupocreanum/home.php"><span class="off">home</span></a></li> <li><a title="biography" id="menu_biography" href="/wp-content/themes/oupocreanum/biography.php"><span class="off">biography</span></a></li> <li><a title="randomizer" id="menu_random" href="/wp-content/themes/oupocreanum/randomizer.php"><span class="off">randomizer</span></a></li> <li><a title="workingprogress" id="menu_workingprogress" href="/wp-content/themes/oupocreanum/workingprogress.php"><span class="off">workingprogress</span></a></li> </ul>
Bon je mets tout ça parce qu'a force d'être dedans je commence à ne plus avoir les idées claires, le besoin d'un regard neuf se fait sentir sans doute a la vue de ceci , l'erreur se révelera !
En fait pour résumer pour n'avoir qu'un seul menu je pense qu'il faudrait de combiner quelque chose entre la balise div id= home de la page et l'id de la css quelque chose dans cet esprit là ! mais là je cale!
Daddy Cool
Messages postés
68
Date d'inscription
samedi 29 mars 2008
Statut
Membre
Dernière intervention
24 octobre 2014
6
31 mars 2008 à 18:50
31 mars 2008 à 18:50
resalut,
tu devrais mettre ici une copie "simplifiée" de ton menu dans sa forme "telle balise est on" et une autre dans sa forme "off". fais juste mettre un <ul>...1 ou 2 <li> max </ul>
Ainsi que le css associé à cette balise uniquement. épure ton code des adresses trop longues
A++
tu devrais mettre ici une copie "simplifiée" de ton menu dans sa forme "telle balise est on" et une autre dans sa forme "off". fais juste mettre un <ul>...1 ou 2 <li> max </ul>
Ainsi que le css associé à cette balise uniquement. épure ton code des adresses trop longues
A++
Voilà au début mon menu était ainsi les deux cas de figures possibles pour chaque page voilà pour te résumer la situation:
et le css était le suivant au
et donc je cherche à faire ceci pour résumer
<ul id="oupocreanum" <li><a title="home" id="menu_home_on" href="/home.php"><span class="off">home</span></a></li>ou <li><a title="home" id="menu_home" href="/home.php"><span class="off">home</span></a></li>ou
et le css était le suivant au
a#menu_home , a#menu_home_on {
position: absolute;
top: -30px;
left: -1px;
}
a#menu_home:link, a#menu_home :visited {
background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/home_inactive.gif);
}
a#menu_home_on :link, a#menu_home_on :visited {
background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/home_active.gif);
}
a#menu_home :hover, a#menu_home_on :hover {
background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/home_hover.gif);
}
}
et donc je cherche à faire ceci pour résumer
#m1 li.m1 a#menu_home , #m1 li.m1 a#menu_home_on {
position: absolute;
top: -30px;
left: -1px;
}
#m1 li.m1 a#menu_home:link, #m1 li.m1 a#menu_home :visited {
background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/home_inactive.gif);
}
#m1 li.m1 a#menu_home_on :link, #m1 li.m1 a#menu_home_on :visited {
background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/home_active.gif);
}
#m1 li.m1 a#menu_home :hover, #m1 li.m1 a#menu_home_on :hover {
background: url(/wp-content/themes/Oupocreanum/images/iconesmenu/home_hover.gif);
}
Afin de n'avoir que menu_home ou quelque chose comme ça dans mon menu et ne plus faire un menu en fonction des pages .
Daddy Cool
Messages postés
68
Date d'inscription
samedi 29 mars 2008
Statut
Membre
Dernière intervention
24 octobre 2014
6
1 avril 2008 à 22:33
1 avril 2008 à 22:33
ok,
enlève #m1 li.m1 partout où c'est juste menu_home
et enlève li.m1 partout tout court (pas besoin)
et ça devrait le faire
enlève #m1 li.m1 partout où c'est juste menu_home
et enlève li.m1 partout tout court (pas besoin)
et ça devrait le faire
Alors quelle est ton idée pour écrire un seul menu et en même temps prenant en compte le changement d'image
comment ferais -tu? car des mon cas il y a deux états possibles. c'est pour cela qu'au début dans le menu il y avait menu_home ou menu_home_on bref que ferais tu?
comment ferais -tu? car des mon cas il y a deux états possibles. c'est pour cela qu'au début dans le menu il y avait menu_home ou menu_home_on bref que ferais tu?
Daddy Cool
Messages postés
68
Date d'inscription
samedi 29 mars 2008
Statut
Membre
Dernière intervention
24 octobre 2014
6
2 avril 2008 à 08:45
2 avril 2008 à 08:45
dis moi plutôt ce qui se passe quand tu fais ça ;)
Hélas, il n'est pas possible d'envoyer les images, ici pour te donner une idée c'est faire quelque chose comme la page http://www.abstractmachine.net/blog/ regarde le menus et les pictos en haut. C'est ce que je recherche à faire. Vas sur chaque case du menu au survol il se passe quelque chose et grâce au css ensuite quand tu es sur la page désirée ou non la case (picto) du menu change. quand tu quitte et quand tu arrives sur une page correspondant au menu aussi .
Daddy Cool
Messages postés
68
Date d'inscription
samedi 29 mars 2008
Statut
Membre
Dernière intervention
24 octobre 2014
6
3 avril 2008 à 19:04
3 avril 2008 à 19:04
je comprends ce que tu veux faire, mais ce qui m'intéresse, c'est ce qui se passe (et ce qui se passe pas) dans ta page quand tu appliques les modifications proposées ?
Fais une liste de ce qui fonctionne comme tu le souhaites et une autre de ce qui ne le fais pas encore.
a+
Fais une liste de ce qui fonctionne comme tu le souhaites et une autre de ce qui ne le fais pas encore.
a+
Mortimer59
Messages postés
139
Date d'inscription
vendredi 27 juillet 2007
Statut
Membre
Dernière intervention
31 août 2018
12
22 juin 2008 à 12:29
22 juin 2008 à 12:29
bonjour
J'ai à peu près ce que je veux tout n'est pas encore au point mais ça prend forme.
J'ai à peu près ce que je veux tout n'est pas encore au point mais ça prend forme.
