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

29 juin 2005, 15:07

bonjour tt le monde

Voila mon prb : j'ai intégré un menu déroulant dans une ligne d'un tableau, le prb c'est quand je clique sur le bouton pour faire dérouler mon menu, il me cree un decalage sur tte la page. Est -il possible de demander au menu qd il se deroule de ne pas modifier la hauteur de ma ligne ? J'espere avoir été clair
Je pense que cela doit se parametrer en javasript !

29 juin 2005, 15:22

Et surtout, ça se résout dans le code !

29 juin 2005, 15:28

voila l'adresse de mon site ou tu pourras visionner mon probleme:

http://www.dbc-marketing.fr/visualisation.html

j'ai voulu intégré un menu déroulant à droite sur mon dernier bouton, en fait il est présent mais me décalle totalement ma page. y aurait-il une solution pour que le menu se deroule sans créé de decallage ?

29 juin 2005, 15:58

J'ai vu ton problème. Et aussi ton code !

Tu n'utilises pas de calques ???

29 juin 2005, 16:16

non aucun calque que en tableau ; ca pose un probleme d'utiliser que des tableaux ?

29 juin 2005, 16:34

L'utilisation de tableaux provoque ce décalage.

Pour l'éviter, il faut que ton menu soit affiché par-dessus les autres éléments de ta page.
Le moyen de gérer ça, c'est l'utilisation des calques <div> (et de la propriété z-index).

Notre ami

t'en dira plus...

22 juil. 2005, 23:06

Je me permet de faire un petit up, car j'ai le meme problème.

Mon menu déroulant est dans une case d'un tableau et cela dans le but qu'il reste le plus possible à sa place même si on redimensionne la fenètre du navigateur.

J'ai donc inserer le menu dans une case du tableau, avec un attribut position:absolute et un positionnement en hauteur. Et j'ai laissé le positionnement horizontal libre de manière a ce que le menu reste toujours centré dans la case du tableau. Je pensais que le fait de passer le menu en position:absolute reglerait le problème, mais ce n'est pas le cas

Je sais qu'il existe une solution à ce problème sans passer par des balises div (j'ai peur de ne pouvoir obtenir le résultat que je souhaite avec ce type de balise) car tout fonctionnait jusqu'à ce que je fasse quelques modifications (je ne pensais pas que mes modifications affecteraient l'affichage de la page, et le problème est que je n'ai pas de sauvegarde du fichier avant ces modifications).

Est-il possible de fixer radicalement la hauteur d'une ligne d'un tableau?

Merci d'avance pour vos réponses qui permettront sans doute de résoudre le problème du créateur du topic.

22 juil. 2005, 23:33

Je poste à nouveau car je me suis rendu compte que ce topic était dans le forum Javascript, et je crois pas que ce soit l'endroit ou il devrait se trouver.

Si un modo passe par la...

Merci encore.

22 juil. 2005, 23:36

Mouais, ton problème se règlerait avec un style CSS, mais il faudrait voir un bout de code pour ça. Mon conseil: ouvre un post dans le forum HTML & CSS en détaillant ton problème avec des bouts de code qu'on sache d'où partir.

23 juil. 2005, 00:07

Je préfère ne pas recréer de topic, je préfèrerais qu'un modo le déplace, car il me semble inutile de multiplier les posts.

Voila donc le code (avec surement de grosses énormités mais je débute, alors soyez indulgent

) :

dans la page en question :

Code : Tout sélectionner

<td align="center" class="tableau"><?php include ("menu2.php"); ?>

le menu :

Code : Tout sélectionner

<ul class="menu">
  <li>
    <a>blabla</a>
       <ul class="sousmenu">
            <li><a>blabla</a></li>
       </ul>
  </li>
</ul>

et le plus important, le css (avec surement beaucoup de choses redondantes, mais je veux que tout soit personnalisable par la suite):

Code : Tout sélectionner

.menu {
	position: absolute;
	display: block;
	top: 110px;
	float: left;
	width: 955px;
	height: 22px
	list-style-type: none;
	line-height: 22px;
	text-align: center;
	margin: 0;
	padding: 0;
	border: 0;
}
.menu li {
	width: 120px;
	float: left;
	text-align: center;
	list-style-type: none;
	border-right: 1px solid #CCCCCC;
	border-left: 1px solid #CCCCCC;
	margin: 0;
	padding: 0;
}
.sousmenu {
	display: none;
	float: left;
	text-align: center;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
}
.sousmenu li {
	float: none;
	text-align: center;
	margin: 0;
	padding: 0;
	border: 0;
}
.menu li a:link, .menu li a:visited {
	display: block;
	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: 2;
	padding-bottom: 2;
	margin: 0;
	border: 0;
}
.menu li a:hover {
	background-image: none; 
	background-color: #CCCCCC;
}
.menu li a:active {
	background-image: none; 
	background-color: #BBBBBB;
}
.sousmenu li a:link, .sousmenu li a:visited {
	display: block;
	color: #090060;
	background-image: none;
	background-color: #BBBBBB;
	font-family: Tahoma, Arial, Helvetica, sans-serif;	
	font-size: 12px;
	font-weight: normal;
	padding-top: 2;
	padding-bottom: 2;
	margin: 0;
	border: 0;
}
.sousmenu li a:hover {
	background-image: none;
	background-color: #CCCCCC;
}
.sousmenu li a:active {
	background-image: none;
	background-color: #BBBBBB;
}
.menu li:hover > .sousmenu { 
	display: block;
}

.tableau {
	width: 955px;
	background-image: url(echantillon.jpg);
}

Je sais aussi que ce menu ne marche pas sous IE, mais j'en ai un autre de secours.

Merci pour votre aide.

23 juil. 2005, 08:11

Tu aurais grand avantage à faire une visite ICI, tu trouveras pas mal de réponses à tes questions et même plus.

24 juil. 2005, 18:42

Je n'ai pas pu résoudre mon problème à l'aide de ton lien. J'ai surement du rater quelquechose. Quelqu'un aurait une idée de l'attribut CSS qui manque ?

Après m'être renseigné je me suis effectivement apercu que les div étaient plus pratiques. Mais je n'ai pas trop le temps de refaire à nouveau une page seulement avec des div, sachant qu'il doit simplement manquer une petite corection pour que mon système fonctionne.

Voila donc pourquoi je fais appel à votre aide, d'autant plus que j'ai fait énormément d'essais pendant deux jours sans succès.

26 juil. 2005, 14:48

Après deux jours de galère, j'ai décidé de tout refaire sans tableau, uniquement avec des balises div. Et la, ça commence sérieusement à me prendre la tête. J'ai deux fois plus de problèmes qu'avant, rien ne se met a la bonne place, et le problème du menu qui déborde persiste, meme en utilisant l'attribut z-index.

Je crois que je vais laisser en plan mon travail car j'ai vraiment l'impression de perdre mon temps. Mais j'aimerais tout de meme mettre en ligne une version fonctionnelle de ma page avec le système de tableau.

L'attribut manquant est-il si difficile à trouver? Car comme je l'ai déjà dis, la page s'est déjà affichée correctement. La solution existe donc bel et bien!

26 juil. 2005, 14:50

Tu as quelque chose en ligne qu'on puisse inspecter ?

26 juil. 2005, 14:56

Oui je revenais justement mettre en ligne les deux pages sur lesquelles je travaille. Merci de m'aider, car je crois que je ne pourrais plus me débloquer tout seul, après tout ce que j'ai essayé.

Voila la première page, avec des tableaux et uniquement le problème du menu qui déborde (ne pas tenir compte des couleurs).
http://cybertests.free.fr/index2.php

Voila la nouvelle page, cette fois ci avec des balises div, et de nombreux problèmes (les couleurs sont les meme, mais le css est différent!).
http://cybertests.free.fr/index3.php

Merci encore pour votre aide.

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

Qui est en ligne