Affichage menu deroulant PHP decalé sous IE

Fermé
gloubiboulga - 3 avril 2008 à 11:31
Ozareff Messages postés 12 Date d'inscription dimanche 23 mars 2008 Statut Membre Dernière intervention 18 novembre 2009 - 13 avril 2008 à 11:29
Bonjour,
J'ai un souci dans la réalisation de mon site web. (entpaquet.free.fr)
J'ai un menu déroulant php qui s'affiche parfaitement sous Mozilla, mais le probléme est sous IE. En effet la zone qui doit se dérouler(derouleX) se trouve "décalé" de la zone du bouton supérieur(MENU X), un peu comme ça :

MENU 1____MENU 2____MENU 3____MENU 4
_|deroule1|________________|deroule2|________________|deroule3|________________|deroule4|
_|deroule1|________________|deroule2|________________|deroule3|________________|deroule4|
_|deroule1|________________|deroule2|________________|deroule3|________________|deroule4|
_|deroule1|________________|deroule2|________________|deroule3|________________|deroule4|

je voudrait que MENU 1et déroule 1 soit aligné avec deroule 1 comme suit :
-MENU 1____MENU 2____MENU 3____MENU 4
|deroule1|__|deroule2|__|deroule3|__|deroule4|
|deroule1|__|deroule2|__|deroule3|__|deroule4|
|deroule1|__|deroule2|__|deroule3|__|deroule4|

je vous donne les codes que j'utilise :

PHP (dans le fichier html) :
<!-- Modifier l'id suivant la hierarchie de votre site-->
	<BOUCLE_rubHousing(RUBRIQUES){racine}{lang}{0,1}{tout}{par titre}{inverse}>
	<li><a onmouseover="ypSlideOutMenu.showMenu('menu1')" onmouseout="ypSlideOutMenu.hideMenu('menu1')" href="#URL_RUBRIQUE">[(#TITRE|supprimer_numero)]</a><div id="menu1Container"><div class="submenu" id="menu1Content">
	<?php 
	if (ereg("MSIE", $_SERVER["HTTP_USER_AGENT"])) {
		echo('<script type="text/javascript"> new ypSlideOutMenu("menu1","down",500,33,120,20)</script>');
	} else {
		echo('<script type="text/javascript"> new ypSlideOutMenu("menu1","down",540,33,120,20)</script>');
	} ?>
	
	<B_artHousing>
		<ul class="forie-pulldownmenu">
		<BOUCLE_artHousing(ARTICLES){id_rubrique}{par num titre}>
		<li><a href="#URL_ARTICLE">[(#TITRE|supprimer_numero)]</a></li>
		</BOUCLE_artHousing>
		</ul>
	</B_artHousing>
	</div>
	</div>
	</li>

(répété pour chaque MENU X) soit 5 fois

Le CSS correspondant au menu :

iv#rollupmenu {
	width: 920px;	
	height: 10px;
	margin-left: auto;
	margin-right: 10px;
	/*position: relative;*/
	z-index: +1 !important;	
}

ul.pulldownmenu {
	position: absolute;	
	line-height: 1em;
	width: 620px;
	margin: 0px;
	display: inline;
	top: 95px;
	right: 50px;	
}

ul.pulldownmenu>li {
	width: 120px; 
	font-size: 10px;
	text-transform: uppercase;
	font-family: Verdana, "Bitstream Vera Sans", Sans-Serif;
	text-align: left !important;
 	/*display: block;*/
	float: right !important;
	/position: relative;
	/right: 215px;
	
	/*position: absolute; top:0;right:0;
	/*margin: 0px;*/
}

ul.pulldownmenu a {
	color: white;
	font-weight: bold;
	display: block;
	text-decoration: none;
	margin: 0px;
	padding: 0px 5px 18px 5px;
	border-left: 1px dotted white;
}

ul.pulldownmenu a:hover {
	border-left: 4px solid #B56B45;
	padding: 0px 5px 12px 2px;
	color: #8C0000;
}

ul.pulldownmenu ul a {
	padding: 4px 8px 4px 8px;
	border: 0px;
}

ul.pulldownmenu ul a:hover {
	padding: 4px;
	border-left: 4px solid #C4896C;
	border-right: 4px solid #C4896C;	
	color: #832701;
}

div.submenu {
	width: 120px; 
	left: 0px;
	position: relative;
	text-align: left;
	padding: 0px;
	opacity: 0.7;
	background-color: #C0A77D;
	text-transform: none;
	color: #8C0000;
	overflow: visible;
	z-index: +1;
}

div.submenu ul {
	margin: 0px;
	padding: 0px;
	border-left: 1px dotted white;	
}

div.submenu li {
	list-style-type: none;
	list-style-image: none;
}

div.submenu a {
	display:block;
	padding: 4px;
}

div.submenu a:hover {
	background-image: none;
	background-color: #C0A77D;
	color: white;
}

div#menu1Container, 
div#menu2Container, 
div#menu3Container,
div#menu4Container, 
div#menu5Container,
div#menu6Container,
div#menu7Container,    {
	visibility: hidden; /* kdyz neumi/je vyplej javascript */
}


je pense que ces infos doivent suffir... !
Merci de votre réponse !
A voir également:

1 réponse

Ozareff Messages postés 12 Date d'inscription dimanche 23 mars 2008 Statut Membre Dernière intervention 18 novembre 2009 1
13 avril 2008 à 11:29
Je n'ai malheureusement pas le temps de trouver le problème dans ton code mais je peux par contre te conseiller un très bon site qui propose différents menus en CSS.

http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal

C'est surement le "menu horizontal" qui t'interessera le plus.
J'espère que cette "solution" t'aidera.
0