[RESOLU] Menu déroulant qui dézingue un peu tout......

Bonsoir,

je suis en train d'installer sur mon site un menu déroulant (rubriques en horizontal et sous-rubriques en vertical)
j'ai repris le code (javascript et css) proposé sur css.alsacreations.com
et quelques pistes de spip-contrib.net

(j'ai trop de mal pour l'instant avec les boucles spip , du coup j'ai codé les liens en dur)

Mon problème : le menu marche très bien mais il dézingue le contenu de la page : selon le nombre de sous-rubriques ça descend ou ça remonte....

j'ai bien essayé de mettre des position:absolute dans les div du contenu mais c'est encore pire....

mon site pour vous rendre compte: http://alex.gaut.free.fr

merci de vos conseils !

Bonjour,

Effectivement, ces mouvements de pages ne sont pas du plus bel effet qu'il soit.

essayez de mettre un

Code:

div#contenu {
z-index=1;
}

dans votre feuille de style et dites-moi si ça fonctionne. Je ne suis pas non plus un grand spécialiste des feuilles de style alors il va certainement faloir tatonner. Je vais également chercher de mon côté.

bien cordialement,

Pour les boucles c'est cela :

à intégrer au début du fichier /squelettes/inc_meta.html :

Code:

   <BOUCLE_total_rubriques(RUBRIQUES){!par id_rubrique}{0,1}>
      <script type="text/javascript">
         <!--
         window.onload=montre;
         function montre(id) {
         var d = document.getElementById(id);
            for (var i = 1; i<=#ID_RUBRIQUE; i++) {
            if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
            }
         if (d) {d.style.display='block';}
         }
         //-->
      </script>
   </BOUCLE_total_rubriques>

Et pour le fichier inc_menu.html, le remplacer par :

Code:

<h1 id="header"><a href="#URL_SITE_SPIP" title="<:accueil_site:> #NOM_SITE_SPIP"><span>#NOM_SITE_SPIP</span></a></h1>


[(#REM) Menu de navigation avec sous-rubriques]
   <B_rubriques>
      <div id="menu">
            <dl>
   <BOUCLE_rubriques(RUBRIQUES){racine}{par num titre}>
      <dt onmouseover="javascript:montre('smenu#ID_RUBRIQUE');"><a class="lien#EXPOSE" href="#URL_RUBRIQUE" [title="(#DESCRIPTIF|textebrut|entites_html)"]>[(#TITRE|supprimer_numero)]</a></dt>
         <B_sous_rubriques>
            <dd  id="smenu#ID_RUBRIQUE">
               <ul>
         <BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par titre}>
                  <li><a class="lien#EXPOSE" href="#URL_RUBRIQUE" [title="(#DESCRIPTIF|textebrut|entites_html)"]>[(#TITRE|supprimer_numero)]</a></li>
         </BOUCLE_sous_rubriques>
               </ul>
            </dd>   
         </B_sous_rubriques>
   </BOUCLE_rubriques>
            </dl>
      </div>
   </B_rubriques>

Par contre, je n'arrive toujour pas à configurer les CSS. C'est que c'est vraiment tatillon ces petites bêtes là !

bien cordialement

déjà, un grand merci pour les boucles , c'est quand même beaucoup mieux !

pour les css, j'ai réussi (en local pour l'instant) à faire en sorte que les sous menu s'affichent par dessus le contenu de la page sans tout décaler:

- j'ai d'abord mis le div menu en position:absolute, avec les bonnes valeurs en top et en left

- après avoir fait ça, le form de recherche et le reste de la page remontent au niveau du menu, mais les sous-menus apparaissent au dessus du texte et ne le décalent plus

- enfin, pour que ça s'affiche bien, j'ai mis des balises <br> au dessus de mon form de recherche pour laisser la place au menu...

c'est du gros bidouillage pas très propre mais ça marche !! (je suis preneuse evidement d'une meilleure solution)

remarque: le z-index n'avait pas marché

Peut-être que vous éviter les

Code:

<br />

il suffirait de mettre le

Code:

div#contenu

en

Code:

position : absolute;

également et le faire démarrer juste en dessous du menu.

Ce n'est qu'une idée, mais de toute façon, même en reprenant vos squelettes je n'arrive pas à faire fonctionner ces menus. J'y parviens sans problème en vertical, mais en horizontal c'est la fête et à chaque modification de la CSS et je n'arrive pas à fixer la chose.

Il faut que j'arrive à trouver une solution reproductible sur ce squelette mais cela ne me semble pas très évident.

bien cordialement

Citation :

Peut-être que vous éviter les

Code:

<br />

il suffirait de mettre le

Code:

div#contenu

en

Code:

position : absolute;

j'ai essayé (cf mon premier post) mais ça fait tout péter (le cadre blanc est reduit, les liens credits, espace privé apparaissent en haut etc.....)

mon menu marche bien maintenant, mais au bout de 2 jours d'arrachage de cheveux intenses........ c'est sûr que ce n'est pas évident !!!

mais ça vaut le coup si on veut utiliser un BioSquelette alors qu'on a trop de rubriques

remarque : si ça vous interesse je peux vous envoyer les modifs exactes que j'ai faites dans les fichiers

Re-Bonjour,

Cela m'intéresse bien évidemment et cela évitera également à d'autre de perdre de nouveau 2 jours à s'arracher les cheveux ;-)

Vous pouvez poster ces modifications directement ici et je pense que je les intègrerai dans une prochaine version (peut-être pas la 4.1 car il faudrait que je sorte cette version (revue et corrigée) pour la semaine prochaine au plus tard : j'en ai besoin pour élaborer le site de mon lycée.

Bien cordialement

alors, voilà mes modifs :

dans design1.css, remplacer :

Code:

ul#menu
   {
   height: 35px ;
   margin: 0 ;
   padding: 0 ;
   background: url(../rep_pics/design1/bg_menu.gif) repeat-x 0 -25px ;
   list-style-type: none ;
   }
            
ul#menu li
   {
   float: left ;
   text-align: center ;
   }
   
      
ul#menu li a
   {
   width: 150px ;
   line-height: 25px ;
   font-size: 1.2em ;
   font-weight: bold ;
   letter-spacing: 2px ;
   color: #fff ;
   display: block ;
   text-decoration: none ;
   border-right: 2px solid #ab4 ;
   }
      
ul#menu li a:hover
   {
   background: url(../rep_pics/design1/bg_menu.gif) repeat-x 0 0 ;
   }

ul#menu li.current
   {
   background: url(../rep_pics/design1/bg_menu.gif) repeat-x 0 0 ;
   }

par :

Code:

/*--------------------------DEBUT DU STYLE MENU-------------------------*/      
dl, dt, dd, ul, li
{
margin: 0;
padding: 0;
list-style-type: none;
}
#menu
 {
position:absolute;
top:210px; /*A changer selon la hauteur du header*/
width:796px;
height:35px;
text-align: center;
background: url(../rep_pics/design1/bg_menu.gif) repeat-x 0 -25px ;
border: 2px solid #fff ;
}

#menu dl
{
float: left;
width: 160px;
text-align: center;
}

#menu dt
{
height: 35px ;
margin: 0 ;
padding: 0 ;
list-style-type: none ;
text-align: center;
}

#menu dd
{
display: none;
text-align: center;
border: solid 1px gray;
}

#menu li
{
text-align: center;
background: #fff;
}

#menu li a
{
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
text-align: center;
}

#menu dt a
{
height: 25px;
text-align: center;
font-size: 1.2em ;
font-weight: bold ;
letter-spacing: 2px ;
color: #fff ;
display: block ;
text-decoration: none ;
border-right: 2px solid #ab4;
}

#menu li a:hover
{
background: #dea ;
}

#menu dt a:hover
{
background: url(../rep_pics/design1/bg_menu.gif) repeat-x 0 0 ;
height: 25px;
}

/*-----------------FIN DU STYLE MENU-------------------------*/   

dans inc-recherche-google.html, ajouter en haut et en bas :

Code:

<br>

dans inc-menu.html, remplacer tout par :

Code:

<h1 id="header"><a href="#URL_SITE_SPIP" title="<:accueil_site:> #NOM_SITE_SPIP"><span>#NOM_SITE_SPIP</span></a></h1>

[(#REM) Menu de navigation avec sous-rubriques]
<B_rubriques>
<div id="menu">
   <BOUCLE_rubriques(RUBRIQUES){racine}{par num titre}>
      <dl>
         <dt onmouseover="javascript:montre('smenu#ID_RUBRIQUE');">
            <a class="lien#EXPOSE" href="#URL_RUBRIQUE" [title="(#DESCRIPTIF|textebrut|entites_html)"]>
            [(#TITRE|supprimer_numero)]
            </a>
         </dt>

         <B_sous_rubriques>
               <dd  id="smenu#ID_RUBRIQUE">
                  <ul>
                 <BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par titre}>
                     <li>
                  <a class="lien#EXPOSE" href="#URL_RUBRIQUE" [title="(#DESCRIPTIF|textebrut|entites_html)"]>
                  [(#TITRE|supprimer_numero)]
                  </a>
               </li>
               </BOUCLE_sous_rubriques>
                    </ul>
               </dd>             
              </B_sous_rubriques>

      </dl>
  </BOUCLE_rubriques>
</div>
</B_rubriques>

(par rapport à ce que vous proposiez dans votre 2nd post, j'ai déplacé le </dl> avant la fin de la boucle rubriques, sinon gros bug...! )

et enfin, inc-meta.html, ajouter tout en haut :

Code:

<BOUCLE_total_rubriques(RUBRIQUES){!par id_rubrique}{0,1}>
      <script type="text/javascript">
        <!--
        window.onload=montre;
        function montre(id) {
        var d = document.getElementById(id);
            for (var i = 1; i<=#ID_RUBRIQUE; i++) {
            if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
            }
        if (d) {d.style.display='block';}
        }
        //-->
      </script>
  </BOUCLE_total_rubriques>

et voilà !

Petite évolution pour que les sous-menus se masquent quand la souris les quitte (sinon ils restent dépliés):

dans inc-menu.html, remplacer :

Code:

<BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par titre}>
        <li>
              <a class="lien#EXPOSE" href="#URL_RUBRIQUE"
              [title="(#DESCRIPTIF|textebrut|entites_html)"]>
                [(#TITRE|supprimer_numero)]
                </a>
        </li>
</BOUCLE_sous_rubriques>

par :

Code:

<BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par titre}>
        <li >
            <a class="lien#EXPOSE" href="#URL_RUBRIQUE"
            [title="(#DESCRIPTIF|textebrut|entites_html)"] 
            onmouseover="javascript:montre('smenu#ID_PARENT');"
            onmouseout="javascript:montre();">
            [(#TITRE|supprimer_numero)]
            </a>
        </li>
</BOUCLE_sous_rubriques>

je commence à m'y retrouver dans les boucles spip !!

Edit du 17 Février :
la modif ci-dessus entraine un léger clignotement des sous-menus, ce qui peut finir par être enervant
pour éviter cela on peut faire simplement la correction suivante dans les pages .html :

Code:

<div id="contenu" onmouseout="javascript:montre();">

les sous menus ne se replient pas quand la souris les quitte mais quand elle passe dans le contenu de la page.
On peut aussi le faire au niveau du header dans inc_menu.html :

Code:

<h1 id="header" onmouseout="javascript:montre();"><a href="#URL_SITE_SPIP" title="<:accueil_site:> #NOM_SITE_SPIP"><span>#NOM_SITE_SPIP</span></a></h1>

Très bon travail ma foi.

Juste un petit problème qui pose un problème éthique par rapport à l'accessibilité.

Le principe de dl est de présenter une liste, donc une même liste ne peut pas être constituée de plusieurs dl. Or c'est ce que donne votre manipulation :

Code:

par rapport à ce que vous proposiez dans votre 2nd post, j'ai déplacé le </dl> avant la fin de la boucle rubriques, sinon gros bug...!

Vous avez d'ailleurs déplacé le <dl> et le </dl> à l'intérieur de la boucle rubrique ce qui fait qu'à chaque rubrique on recommence une dl qui ne contient qu'un seul dt.

Il convient également de remplacer le code <br> par son équivalent en XHTML :

Code:

<br />

dans inc-recherche-google.html.

Pour ma part, je n'ai pas eu à utiliser les br, j'ai modifier uniquement le padding de "contenu" :

Code:

div#contenu
      {
         padding: 25px 20px 0 100px ;
         background: url(../rep_pics/kaweni2/bordure_mosaique.jpg) no-repeat 15px 15px ;
      }

Mais bon ça fonctionne c'est déjà le principal.

Bien cordialement

Citation :

Très bon travail ma foi

merci ! je serais contente qu'il serve pour une prochaine version de Biospip

j'ai du mal à saisir cette phrase :

Citation :

qui pose un problème éthique par rapport à l'accessibilité.

est-ce que ça veut dire que quelqu'un qui regarderait mes sources ne comprendrait pas à quoi servent les dl, dt .....??

sinon, je vais reprendre votre idée du padding pour le div contenu, c'est mieux que les <br/>, car plus precis

bonne soirée et merci pour cette colaboration qui s'est avérée très fructueuse !!

Code:

j'ai du mal à saisir cette phrase :
Citation:
qui pose un problème éthique par rapport à l'accessibilité.

est-ce que ça veut dire que quelqu'un qui regarderait mes sources ne comprendrait pas à quoi servent les dl, dt .....??

Non, en fait le problème est le suivant : il existe des normes et des standards pour présenter l'information sur un site internet. Ainsi une liste doit être présentée avec les balises dl, dt, dd, ul et li. Mais l'ensemble d'une même liste doit être comprise entre les balises dl et /dl.

Le problème qui risque d'être rencontré et une incompréhension par les navigateurs internet évolués qui se basent sur les informations de balisage pour présenter le contenu du site (par exemple les lecteurs de site pour les mal-voyants...).

Normalement, s'il y a 5 rubriques, la liste dl doit contenir 5 item de rubriques et des sous-listes de rubriques, ce qui est logique dans la lecture. Avec cette présentation des informations, il y aura 5 listes correspondants à 5 rubriques et leurs sou-rubriques respectives. C'est un peu comme si dans un bouquin de 5 chapitres on avait 5 pages intitulées toutes "sommaire" au début du livre, une par chapitre. Ce n'est ni logique, ni pratique d'avoir un sommaire réparti sur plusieurs pages avec le même intitulé. De plus l'erreur est possible de ne se référer qu'à l'une de ces pages et de croire que le livre ne contient que les infos du second chapitre par exemple.

Voilà l'explication de ce problème, j'espère avoir été assez clair cette fois, mais il est vrai qu'on ne parle plus de design à ce niveau mais bien d'accessibilité et de lecture quel que soit le navigateur internet utilisé (graphique, textuel, vocal, braille...).

Bien cordialement

d'accord je comprends maintenant !
j'essayerais d'en tenir compte quand j'aurais le courage
( j'ai déjà du mal à faire en sorte que mon site soit potable avec les navigateurs conventionnels.....)

Bonjour,
pardon de relancer le débat mais j'ai un petit problème de mise en page en appliquant ce code.

D'abord, merci pour ce code, il correspond exactement à ce que je souhaitais faire.
J'ai signalé ailleurs sur le forum les problèmes rencontrés en tentant de l'insérer : il n'y avait plus du tout de code CSS appliqué. En fait, allez savoir pourquoi, en copiant par Fetch les fichiers un par un, le problème a disparu.

Reste cependant ceci : l'affichage dans Firefox n'est pas satisfaisant car, même après modification de l'argument "top" pour le menu, ce dernier recouvre les fenêtres "derniers articles" et "brèves" de la page de sommaire.
Dans Safari c'est impeccable, que je mette 4, 6 ou 8 items dans cette fenêtre.

Je vois bien que le div appelé est en2col (ainsi que sans doute "en3col holy fix") mais je ne sais pas ce qu'l faut faire pour récupérer l'affichage correcte dans Firefox Mac. Je joins deux captures, l'une pour safari :


et l'autre pour Firefox 1.5 Macintosh :


Je précise que sous Firefox pour windows XP l'affichage est parfait.

Là, je ne comprends pas. Je soupçonne que c'est en relation avec le "holly fix" de biospip.css, mais je cale...

Vous pouvez tester vous-même l'affichage sur la page www.age-classique.fr

Bien cordialement,
Fabinho

Bonjour,

mais avez-vous reparamétré le div#.contenu comme expliqué ci-avant.

Je pense que votre div#contenu devrait être quelque chose du genre :

div#contenu
{
padding: 25px 20px 0 20px ;
}


S'il y a toujours recouvrement vous pouvez augmenter la valeur du padding top :


div#contenu
{
padding: 45px 20px 0 20px ;
}

bien cordialement

J'ai opté pour les valeurs suivantes :

Code:

   div#contenu
      {
         padding: 85px 15px 0 80px ;
         background: url(../rep_pics/biospip/bandeau_gauche_biospip.png) no-repeat 0px -10px ;
      }

et ça marche. Je dois signaler que si l'on veut plus de 4 rubriques au menu, comme la longueur par défaut est de 796px et la taille de chaque cellule de 160px, il faut réduire "à la main" les tailles de cellule pour donner un multiple exact de la taille globale du menu. J'ai choisi 159*5=795px.

N'y a-t-il pas un moyen d'automatiser la taille des cellules du menu en fonction du nombre de rubriques à afficher?

Cordialement,

Fabinho

Citation :

N'y a-t-il pas un moyen d'automatiser la taille des cellules du menu en fonction du nombre de rubriques à afficher?

Il y a toujours moyen d'automatiser certaines tâches. En l'occurence j'ai choisi une option toute différente. J'ai mis, dans la version 4.1, des barrières : on n'affiche que les 5 première rubriques et on coupe les titres des rubriques à X caractères de long.

En effet, le fait d'automatiser la chose nous obligerais à automatiser la génération de la feuille de style et d'y intégrer des boucles et je m'y refuse car cela complique la lecture des fichiers de squelettes et la prise en main pour les néophytes.

Mais c'est effectivement faisable, il faut aller voir dans www.spip-contrib.net pour avoir un tutoriel là-dessus.

Bien cordialement