Mon menu déroulant décale au lieu de recouvrir le texte de ma page

[mara]

je planche depuis trop longtemps sur ce problème et je me decide à demander de l'aide car je tourne en rond.
J'ai construit sur un site web un menu dynamique à plusieurs niveaux ... tout ça fonctionne bien.

Mais le menu quand il se deroule, il ne recouvre pas ce qu'il y a en dessous, il décale tout le reste d'un espace de quelques 100 px de hauteur, sur lequel se place le déroulement. je voudrais que le menu recouvre comme on le voit partout. Vous avez du me comprendre car il y a des tas de gens qui posent ce problème sur l'internet mais je n'ai toujours pas trouvé comment faire.

merci.

J'ai mis l'essai en ligne, ça va aider à comprendre (NB: c'est pas moi en photo).
http://yogarama.free.fr/index4essai.html

On parle de position absolute ... mais j'ai bien mis mon menu en position absolute, regardez ... mon css


#menuDeroulant
{
background: #6A6458;
width: 644px;
height: 21px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
position: absolute;
top: 0;
left: 0;
}
#menuDeroulant li
{
float: left;
width: 150px;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
height: 1%;
color: #FFF;
background: #3B4E77;
margin: 0;
padding: 4px 8px;
border-right: 1px solid #fff;
text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }

#menuDeroulant .sousMenu
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant .sousMenu li
{
float: none;
margin: 0;
padding: 0;
border: 0;
width: 149px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
background: transparent url("fondTR.png") repeat;
}
#menuDeroulant .sousMenu li a:hover
{
background-image: none;
background-color: #F2462E;
}

#menuDeroulant li:hover > .sousMenu { display: block; }

[Jaypee]

Salut Mara,

Je crois que le CSS n'est pas le problème, mais ton HTML. Essaie sans l'iFrame, parce qu'il n'y a aucune raison qu'un menu deborde de sa page, et tu as choisi d'utiliser une page distincte avec cet iframe.

J-P

[yponomeute]

Salut

Comme le fait remarquer Jaypee, c'est le iframe qui te décale tout sans aucun doute. J'ai compris l'utilisation de ton iframe, c'est pour ne pas répéter ton menu sur chaque page, mais ce n'est pas la bonne solution.
Même si tu ne connais rien à php tu peux renommer tous tes fichiers html en leur donnant l’extension .php au lieu de .html et ensuite remplacer le iframe par une simple instruction php:

Code

<?php include('menunav.php'); ?>

Cela devrait résoudre ton problème.

Ce message a été modifié par yponomeute - 10 Dec 2011, 16:46.

[mara]

Salut
Comme le fait remarquer Jaypee, c'est le iframe qui te décale tout sans aucun doute. J'ai compris l'utilisation de ton iframe, c'est pour ne pas répéter ton menu sur chaque page, mais ce n'est pas la bonne solution.
Même si tu ne connais rien à php tu peux renommer tous tes fichiers html en leur donnant l’extension .php au lieu de .html et ensuite remplacer le iframe par une simple instruction php:

Code

<?php include('menunav.php'); ?>

Cela devrait résoudre ton problème.

Je vous remercie tous les deux; depuis ce matin je ne fais que plancher, et ... je n'y arrive toujours pas.
D'abord, je pense que vous avez raison, que c'est l'appel de l'iframe qui me fait décaler le menu, et je vous l'avais signalé que c'était un iframe parce que moi aussi j'avais des doutes à ce sujet, je sais qu'il est conseillé de ne pas utiliser les iframe.

Mettre le menu sur chaque page c'est impensable parce qu'il change souvent en cours d'année, et j'en ai eu marre de corriger X fois la menu plusieurs fois sur chaque page, d'où mon intrusion de l'iframe.

L'include, je connaissais, mais je n'y arrive pas, et j'aimerais bien y arriver, pouvez vous m'aider dans ce sens ?

Le code include, je l'ai ecrit dans ma page d'appel :

<div>
<?php include('menunav.php'); ?>
</div>

tout est au même niveau à la racine, c'est juste pour travailler dessus pour l'instant.


J'ai simplement renommé ma page menunav.html en menunav.php
voir http://yogarama.free.fr/menunav.php
Vous pouvez faire apparaître la source.


Mais ça ne marche pas l'appel ! voir la page, le menu n'apparaît pas mais si vous regardez le code source, j'ai bien écrit le code include. C'est juste après le header.

http://yogarama.free.fr/index4essai.html

<body>
<base target="_parent" />
<div id="global" >

<div id="bande">
<div align="right"> Cours et stages de Yoga</div>
</div>

<div id="header"> </div>

<div>
<?php include('menunav.php'); ?>
</div>

<div id="milieu">

ETC ETC


Faut il (excusez je suis très novice en code php) que j'inscrive quelque chose au sein du code html de ma page menunav2.php ?
pour transformer le code html ?

je sais qu'à mes débuts en html j'ai autant galéré, alors je sais que je peux y arriver .. il suffit souvent d'un détail mal compris.
merci encore.

[mara]

Salut

Comme le fait remarquer Jaypee, c'est le iframe qui te décale tout sans aucun doute. J'ai compris l'utilisation de ton iframe, c'est pour ne pas répéter ton menu sur chaque page, mais ce n'est pas la bonne solution.
Même si tu ne connais rien à php tu peux renommer tous tes fichiers html en leur donnant l’extension .php au lieu de .html et ensuite remplacer le iframe par une simple instruction php:

Code

<?php include('menunav.php'); ?>

Cela devrait résoudre ton problème.

je viens d'essayer un truc. J'ai appeler ma pag .php aussi

et là ça marche l'appel, MAIS ça ne me prend pas en compte le css de mon menu.
voir : ICI
le menu ne se place pas à sa place ...

Bon, s'il faut mettre le css sur la pge du menunav, ce n'est pas encore trop le soucis.

mais s'il faut que j'appelle toutes les pages de mon site en .php rien que pour appeler un menu, moi, ça m'embête.
Parce que la page index, je dois la convertir aussi en index.php ???

[Jaypee]

menunav n'a pas besoin d'être autonome, càd un HTML bien formé, tu peux ne garder que le contenu de body, mais tu dois alors faire le lien avec le css du menu dans la page principale.

Si tu recherches une modularité et ne faire q'une seule inclusion, tu dois pouvoir inclure le css dans menunav entre des balises <style/>

J-P

[mara]

mais tu dois alors faire le lien avec le css du menu dans la page principale.

Si tu recherches une modularité et ne faire qu'une seule inclusion, tu dois pouvoir inclure le css dans menunav entre des balises <style/>

J-P

c'est pas trop l'appel du css qui me gêne.
je l'appelle sur ma page http://yogarama.free.fr/menunav.php
il me reprend tout ce que j'ai mis dans le css menuderoulant.css

je l'ai mis aussi en haut le lien css pour voir, sur la page index5essai.php ... ça n'a changé du tout.

sur la page http://yogarama.free.fr/index5essai.php
il est bien arrivé mon include, mais il est tout en haut, regarde la bande verte, il n'est pas à l’endroit où j'ai fait appel à la fonction include après le header !

et en + nettement la taille des caracteres des menus n'est pas celle que je leur ai attribuée.

bon, je reprendrai ça demain, parce que je retourne et je retourne .....

sur la page http://yogarama.free.fr/index5essai.php
il est bien arrivé mon include, mais il est tout en haut, regarde la bande verte, il n'est pas à l’endroit où j'ai fait appel à la fonction include après le header !

Mais est ce normal que je vois sur la source de ma page, là où j'ai appelé include ce type de code :

<!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>
<title>menunav</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="robots" content="all" />

<link href="css/menuderoulant.css" rel="stylesheet" type="text/css" media="screen" />

</head>

<body>

<ul id="menuDeroulant">

ETC ETC

se terminant par

</body>
</html>


et ça en plein milieu de ma page à moi !
Ok je comprends que l'include est allé recopier ce qu'il y avait sur menunav.php, qu'il a appelé le code qui y était,
mais ça ne met pas le foutoir sur ma page première de réécrire en plein milieu un head, un body ??

[Jaypee]

Tu dois pouvoir t'inspirer des gabarits d'Alsacreations, c'est quasiment la référence en CSS en français, notamment le modèle n°8 avec menu horizontal

http://www.alsacreations.com/static/gabarits/

J-P

[mara]

Tu dois pouvoir t'inspirer des gabarits d'Alsacreations, c'est quasiment la référence en CSS en français, notamment le modèle n°8 avec menu horizontal

http://www.alsacreations.com/static/gabarits/

J-P

Mais je m'inspire, mais je m'inspire !! Alsace création, le site du zero ... et tout ce que je trouve sur l'internet. mon menu est un menu inspiré. le hic, c'est que lorsque l'on adapte à "son" site ça ne marche comme on veut.

Ce menu que j'ai il est pas mal, à côte des mille autres que j'ai essayé avant, j'ai désormais un problème d'include, plus que de menu, je crois...
parce que sur la page du menu seul, ça fonctionne bien.

Je cherche quelqu'un qui regarde attentivement mon code source et me dise où est l'erreur.

[mara]

Jaypee, je crois que je suis arrivée !!!!
regarde : http://yogarama.free.fr/index5essai.php

et même avec ma page en html :

http://yogarama.free.fr/index5essai.html

d'après moi cela venait du css que j'ai copié sur une proposition d'un site internet bien sûr, mais c'est en planchant sur le code css par defaut que j'ai trouvé :
au #menuDeroulant
il y avait une position absolute et marqué en dessous deux fois 0.
je comprends, le menu se mettait en haut et à gauche (0,0)

je suis en bonne voie ... il ne me reste plus qu'à travailler sur les couleurs.

Donc je peux laisser toutes mes pages en html et juste ecrire un include de php dans chaque page ?

merci. je suis trop contente ... si je sais faire ça, qu'est ce que ça va me simplifier la vie sur TOUS ms sites.

[mara]

En fait je suis en train de travailler sur une nouvelle mouture du site, et voilà le début, il marche mon menu appelé en php.

http://yogarama.free.fr/yogarama2/index.php

Ma question est : est ce qu'il faut que je renomme TOUTES mes pages en php pour que l'inclusion fonctionne (le menu) sur toutes mes pages ?
que je nomme index : index.php
page1.php
page2.php

???

pour l'instant je travaille en brouillon, donc je ne sais pas ce que ça va donner "exactement" en remplaçant index par index.php à la racine du site.

[Jaypee]

Bravo Mara,

On peut dire que chaque fois que tu viens dans ce forum tu arrives avec des questions intéressantes, et tu repars avec tes propres solutions... Que demander de plus ?
A propos du .php, tu vois que ce n'est nécessaire que pour bénéficier de l'include, qui est un bénéfice pour toi, pas pour l'utilisateur final. Donc la décision te revient, l'alternative est le copíer-coller, avec ses inconvénients mais c'est le lot du développeur d'assumer ce genre d'effort.

J-P

[mara]

Bravo Mara,
On peut dire que chaque fois que tu viens dans ce forum tu arrives avec des questions intéressantes, et tu repars avec tes propres solutions... Que demander de plus ?
J-P

Je ne viens plus souvent sur le mac bidouille, parce que depuis mes débuts avec l'OS 9, (j'ai débuté à zéro en achetant un ordi à 52 ans et ne sachant même pas comment l'éteindre !), j'ai énormément progressé.
Je me débrouille seule, en m'aidant de recherches sur google, des forums. Parce que les "copains" ils en savent moins que moi !
Je suis retraitée, et maintenant, j'aide les autres dans la mesure où je sais "plus" qu'eux, eh oui ! parce que je me suis passionnée, pour le développement web, et j'ai aussi acquis une bonne réflexion face aux problèmes de quelque ordinateur que ce soit.

Et je remercie tous ceux qui m'ont permis d'être "indépendante". C'est ça le but. Je viens sur le forum quand je n'arrive pas à faire quelque chose, et je cherche d'abord. Mais souvent chaque cas est particulier.

Je suis très contente d'être arrivée à comprendre, surtout "comprendre", ce qui était mauvais sur le code du menu.
Hier soir j'ai appliqué à un autre site que j'ai, et j'ai su le faire, le corriger (ce n'était pas du tout le même code de menu déroulant là, disons le même css, car tout change par là.

Pour moi, accéder au php, c'est du nouveau. j'ai un bouquin de php, j'ai un site tutorial, j'ai même eu une journée de formation. Mais je ne comprends rien. Et puis mon formateur m'avait dit 1) que si je n'avais jamais fait de programmation ... dur dur ... et que 2) vu ce que je fais comme type de sites web, je n'ai pas besoin de savoir le php. Je n'utilise pas de banques de données, de paiement en ligne, alors ...

Eh voilà que quand même, j'en ai eu besoin.

Je signale quand même, que, dans la solution include, il a fallu que j'écrive le code css dans les head de la plage menunav.php, car l'appel; même double appel; de menuderoulant.css ne fonctionnait pas. Mais ce n'est pas gênant, puisque la page menunav.php n'est pas longue, et qu'il faut l'écrire qu'une seule fois.

Par contre quand on n'est pas en php, mais en situation de page html, et pas d'include, mais le menu écrit, l'appel de la page css par un lien se fait très bien.

A propos du .php, tu vois que ce n'est nécessaire que pour bénéficier de l'include, qui est un bénéfice pour toi, pas pour l'utilisateur final. Donc la décision te revient, l'alternative est le copíer-coller, avec ses inconvénients mais c'est le lot du développeur d'assumer ce genre d'effort.

Donc si je comprends bien, il faut mettre TOUTES pages nommées php.
C'est chiant ça, parce que si on veut simplement appeler seulement un menu, il faut avoir toutes ses pages nommées .php !!!

ça ne me plait pas trop, peut être par inquiétude parce que je n'y suis pas habituée, mais dans le site de yogarama, c'est qu'il y a beaucoup de thématiques, donc de pages différentes, et beaucoup d'actualité (les cours qui changent de lieux, d'horaires, les conférences, les ateliers exceptionnels, les stages d'été qui apparaissent ... je fais ce site pour une amie), et je dois transformer TOUS les menus, une galère. (copié collé, oui !)

Donc je vais quand même tenter de nommer php. Je vais voir.


Question :

Nommer l'index php, ça ne pose de problème ?
les gens trouveront toujours le site sous le nom de yogarama.free.fr
??

Pour l'instant c'est encore l'ancien site qui est en ligne. On doit travailler sur le nouveau site à Noël.

[Jaypee]

Quel que soit le serveur, il y a généralement une directive indiquant que le fichier d'accueil par défaut est index.html, ou index.php.

J-P

Ce message a été modifié par Jaypee - 13 Dec 2011, 14:04.

[mara]

Quel que soit le serveur, il y a généralement une directive indiquant que le fichier d'accueil par défaut est index.html, ou index.php.

J-P

OK merci pour tout. à la prochaine.

[docte]

Bonjour,
j'ai le même problème initial : recouvrir le texte par un menu déroulant.
Quelle est donc l'astuce, c'est dans le CSS?

A bientôt, merci.

[scoch]

Il suffit de positionner l'élément en absolute, relative ou fixed, de lui attribuer un z-index ou de le sortir du flux en l'affichant en flottant ou en inline-block.
Exemple :

Code

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Positionnement relatif ou absolu, z-index ou flottant</title>
        <style>
            nav { background-color:cyan; height:40px;}
            a.lien_anim { display:inline-block; position:relative; top:0; left:0; background-color:magenta; height:40px;}
            a.lien_anim:hover { background-color:yellow; height:400px;}
        </style>
    </head>
    <body>
        <nav>
            <a href="#" class="lien_anim">Survolez-moi</a>
        </nav>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis velit purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec scelerisque nulla enim. Donec iaculis pulvinar bibendum. In velit orci, mollis non consequat in, ullamcorper quis mi. Cras rhoncus scelerisque metus, ut aliquet sem accumsan sit amet. Aenean volutpat tempus erat, in ullamcorper est tincidunt sed.</p>
    </body>
</html>