probleme d'integration d'un menu deroulant dans un tableau

Mammouth du PHP | 19672 Messages

26 juil. 2005, 15:03

Ok, dans un cas comme dans l'autre, si tu ne passes pas par un JavaScript, tu ne pourras pas faire ce que tu veux, ça ne fonctionnera pas sous tous les navigateurs sinon, IE en particulier.

Pour le z-index, c'est parfois capricieux. Je vais ramasser les deux codes et voir ce que j'arrive à faire avec, je ne peux pas te répondre en quelques minutes.
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

Mammouth du PHP | 19672 Messages

26 juil. 2005, 16:17

Bon, j'ai un peu de mal avec ton code, avec ou sans tableau, il y a déjà pas mal d'erreurs dans le html.

Si tu veux avancer aussi en attendant, regarde ici, ça correspond assez à ce que tu veux faire.
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

Mammouth du PHP | 19672 Messages

26 juil. 2005, 19:55

BOn, voilà de quoi t'occuper quelques minutes: On remplace quelques éléments, on en rajoute un aussi:

Ton menu doit devenir ça :
<div id="barremenu">
  <div id="menu">
  	<dl>
  		<dt onmouseover="javascript:montrer();"><a href="index.php" title="Retour à l'accueil">Accueil</a></dt>
  	</dl>
  	<dl>			
  		<dt onmouseover="javascript:montrer('smenu1');"><a href="forum/viewforum.php?f=10" title="Les news de Cybertests">News</a></dt>
  	</dl>
  	<dl>			
  		<dt onmouseover="javascript:montrer('smenu2');"><a href="#" title="Les tests de jeux">Jeux</a></dt>
  			<dd id="smenu2">
  				<ul>
            <li><a href="index.php?centre=tests&droite=fiche_tests_accueil">Tous les jeux</a></li>
            <li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=FPS">FPS</a></li>
            <li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=RPG">RPG</a></li>
            <li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=RTS">RTS</a></li>
            <li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Action">Action</a></li>
            <li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Aventure">Aventure</a></li>
            <li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=MMORPG">MMORPG</a></li>
            <li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Arcade">Arcade</a></li>
            <li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Sport">Sport</a></li>
            <li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Simulation">Simulation</a></li>
            <li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Course">Course</a></li>
            <li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Shoot">Shoot</a></li>
            <li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Plate-Forme">Plate-Forme</a></li>
            <li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Autre">Autres</a></li>
            <li><a href="index.php?centre=jeux/ajouter_jeu&droite=fiche_tests_accueil">Ajouter un jeu</a></li>
  				</ul>
  			</dd>
  	</dl>
  	<dl>			
  		<dt onmouseover="javascript:montrer('smenu3');"><a href="#" title="Disponible prochainement">Films</a></dt>
  	</dl>
  	<dl>			
  		<dt onmouseover="javascript:montrer('smenu4');"><a href="#">Liens</a></dt>
  			<dd id="smenu4">
  				<ul>
            <li><a href="index.php?centre=liens/liens">Tous les liens</a></li>
            <li><a href="index.php?centre=liens/liens&categorie=Jeux">Jeux Vidéos</a></li>
            <li><a href="index.php?centre=liens/liens&categorie=cinema">Cinéma</a></li>
            <li><a href="index.php?centre=liens/liens&categorie=BD">BD</a></li>
            <li><a href="index.php?centre=liens/liens&categorie=Musique">Musique</a></li>
            <li><a href="index.php?centre=liens/liens&categorie=Informatique">Informatique</a></li>
            <li><a href="index.php?centre=liens/liens&categorie=Wallpapers">Wallpapers</a></li>
            <li><a href="index.php?centre=liens/liens&categorie=Humour">Humour</a></li>
            <li><a href="index.php?centre=liens/liens&categorie=Autre">Autres</a></li>
            <li><a href="index.php?centre=liens/ajouter_lien">Ajouter un lien</a></li>
  				</ul>
  			</dd>
  	</dl>
  	<dl>			
  		<dt onmouseover="javascript:montrer('smenu5');"><a href="#">Communauté</a></dt>
  			<dd id="smenu5">
  				<ul>
            <li><a href="forum/index.php">Forum</a></li>
            <li><a href="index.php?centre=contact">Nous contacter</a></li>
  				</ul>
  			</dd>
  	</dl>
  </div>
</div>
Pour le JavaScript, mets ceci dans l'en-tête de ta page:
<script type="text/javascript">
<!--
function montrer(id)
{
    var d = document.getElementById(id);
    for (var i = 1; i<=10; i++)
    {
        if (document.getElementById('smenu'+i))
        {
            document.getElementById('smenu'+i).style.display='none';
        }
    }
    if (d)
    {
        d.style.display='block';
    }
}
//-->
</script>
Et enfin remplace toute la partie qui concerne le menu/sous-menu dans la feuille de style par ça :

Code : Tout sélectionner

#barremenu { position: relative; top: -20px; } #menu { position: absolute; top: 0; left: 0; z-index:100; width: 100%; /* précision pour Opera */ } dl, dt, dd, ul, li { margin: 0; padding: 0; list-style-type: none; } #menu dl { float: left; width: 8em; } #menu dt { cursor: pointer; text-align: center; background: #ccc; border: 1px solid gray; margin: 1px; color: #090060; background-image: url(echantillon.jpg); font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; text-decoration: none; padding-top: 2px; padding-bottom: 2px; } #menu dd { display: none; list-style-type: none; text-align: center; margin: 0; padding: 0; border: 0; } #menu li { text-align: center; background: #fff; } #menu li a, #menu dt a { color: #000; text-decoration: none; display: block; height: 100%; border: none; padding: 0; margin: 0; } #menu li a { color: #090060; background-image: none; background-color: #BBBBBB; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; padding-top: 2px; padding-bottom: 2px; } #menu li a:hover, #menu dt a:hover { background: #eee; margin: 0; }
Avec ça, tu auras le bon affichage tant sous Firefox que sous IE.

Bon code.
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

Mat
Invité n'ayant pas de compte PHPfrance

26 juil. 2005, 20:18

J'ai un peu l'impression d'être seul sur ce topic, mais je poste quand même car ce qui suit pourrait être utile à d'autres personnes (et notamment au créateur du topic).

Pour résoudre mon problème j'ai donc donné à mon menu un attribut de position absolute, ce que je ne voulais pas faire au début, mais qui est la seule solution que j'ai trouvé.

Seulement j'ai de nouveau un problème -et c'est le dernier normalement- concernant la bordure de ma page index.

Voila un bout du CSS:

Code : Tout sélectionner

body { width: 965px; margin: auto; margin-top: 10px; margin-bottom: 10px; background-color: #FFFFFF; border: 8px solid #090060; }
Dans ma page, le dernier div avant la balise </body> est celui comprenant le bas de la page (car j'ai appris qu'il fallait que les éléments div soient dans l'ordre de haut en bas car div est une balise de type block), seulement la bordure de la page semble s'arreter en dessous de l'élément de droite.

Si quelqu'un pouvait apporter la dernière pierre pour que ma page s'affiche correctement...

Mat
Invité n'ayant pas de compte PHPfrance

26 juil. 2005, 20:20

Oups j'ai posté sans avoir lu tous les derniers messages, je suis désolé, j'avais ouvert la page de réponse avant que les messages précédents soient arrivés.

Mat
Invité n'ayant pas de compte PHPfrance

26 juil. 2005, 20:33

Merci beaucoup pour tout ce que tu as fais, c'est vraiment sympa d'avoir passé autant de temps pour m'aider.

J'avais déjà reperé ce menu sur alsacréation mais le problème est qu'il bug parfois lorsqu'on sort la souris d'un sous-menu, celui-ci ne dispait pas tout le temps.

C'est pour cela que j'avais refais un menu sans Javascript qui à l'avantage d'être très réactif, en sachant qu'il ne marcherait pas sous IE.

Grace à ton code, je pense que je vais faire une détection de navigateur dans ma page d'index afin d'inclure l'un ou l'autre des menus, pour avoir une meilleure compatibilité.

Pour finir il reste cependant un dernier bug sur ma page index, que j'ai décris dans mon post ci-dessus.
Voila d'ailleurs la page en question, avec la correction du problème du menu qui déborde mais avec pour l'instant le menu qui ne fonctionnera que sous firefox : http://cybertests.free.fr/index3.php.

Mammouth du PHP | 19672 Messages

26 juil. 2005, 20:58

Le problème du JavaScript du menu est que si on met une méthode onmouseout, ton sous-menu ne restera pas affiché en quittant le "menu-titre", donc il faut soit cliquer sur un des liens du sous-menu soit passer la souris sur un des menus-titre n'ayant pas de sous-menu, [Accueil] par exemple.
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

Phobos
Invité n'ayant pas de compte PHPfrance

26 juil. 2005, 21:26

t'est sur que ton cadre du bas est le div qui se charge en dernier ? je pense que la bordure se mettra sous le div qui est le dernier dans ton code

Mat
Invité n'ayant pas de compte PHPfrance

26 juil. 2005, 22:07

Merci pour ta réponse, Phobos, mais j'ai respecté l'ordre des div et c'est bien le cadre du bas qui se charge en dernier.

Je ne vois vraiment pas d'ou l'erreur peut provenir.