problème avec menu css Fermé

Question

Bonjour,

Je viens de terminer un site web mais un problème apparait avec le menu horizontal. http://www.ebev.ca J'ai 5 item dans mon menu et quand on passe avec la souris devant les trois premiers items, un petit menu déroule en dessous.

Sous Internet Explorer 7 (ce que presque tous mes visiteurs utilisent), le menu déroule toujours sous le premier item. Par exemple, si on passe la souris par-dessus le troisième item, le menu devrait dérouler sous le troisième item mais non, il apparait sous le premier.

En fouillant un peu sur internet, j'ai appris que la propriété "position" du css n'était pas bien prise en charge par tous les navigateurs. Est-ce qu'il y a quelques chose que je peux faire ??

Merci

tsunamichups · Answer

nous poster ton code dans un premier temps histoire qu'on puisse voir un peu ce que tu as fait 

sinon ca risque d'etre dure de te repondre

Sabrina · Answer

Voici mon code CSS (fait avec dreamweaver) :

@charset "UTF-8";

/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
	margin: 0;
	padding: 0;
	font-size: 11px;
	cursor: default;
	width: 67%;
	position: relative;
	left: 160px;
	top: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
	z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 11px;
	position: relative;
	text-align: left;
	cursor: pointer;
	width: 125px;
	float: left;
	visibility: visible;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	left: 0px;
	vertical-align: middle;
}


	
	
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 11px;
	cursor: default;
	width: 100%;
	position: absolute;
	left: -1000em;
	z-index: 1020;
	border: 1px solid #000;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
	left: -12px;
	width: 150px;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
	width: 150px;
	background-image: url(../../images/degrade_bleu_3.jpg);
	vertical-align: middle;
	text-align: left;
	margin: 0;
	border: 1px solid #ffffff;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
	position: absolute;
	margin: 0 0 0 105%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
	left: auto;
	top: 0px;
}

/*******************************************************************************

 DESIGN INFORMATION: describes color scheme, borders, fonts

 *******************************************************************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
	border: 0px solid #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
	display: block;
	cursor: pointer;
	padding: 0.5em 0.75em;
	text-decoration: none;
	text-align: center;
	color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	border: 0px solid #fff;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
	color: #000000;
	background-color: #0033cc;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
	color: #FFFFFF;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
	height: 20px;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
	
/*******************************************************************************

 BROWSER HACKS: the hacks below should not be changed unless you are an expert

 *******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
	position: absolute;
	z-index: 1010;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
	ul.MenuBarHorizontal li.MenuBarItemIE
	{
	display: inline;
	f\loat: left;
	}
}
ul.MenuBarHorizontal ul li ul li {
	width: 200px;
	border: 1px solid #fff;
	background-image: url(../../images/degrade_bleu_3.jpg);
	vertical-align: middle;
	left: -10px;
}

Sabrina · Answer

Et le code HTML si vous en avez besoin: (j'ai mis en gras la section où se trouve le menu) EBEV.CA

Église baptiste Évangélique de Victoriaville

101 Saint-Paul Victoriaville, Qc G6P 8G9 Tel: 819.752.4455

sabrina_foisy@hotmail.com

Merci beaucoup d'avance !

Brachior · Answer

Waou Oo
j'vais pas lire si ça te dérange pas ^^

Juste pour dire que les compatibilités entre navigateurs sont vraiment nulles ...
t'arrivera jamais ( ou très difficilement ^^ ) a faire une css valide sur tous les navigateurs

(car je rappelle qu'il y a FireFox / Opera / Chrome / Safari / IE <= 6 / IE 7 / IE 8
pour ne citer que les principaux ... et tous interprète a leur façon la css ... )

moi pour arreter de m'enerver avec ca, j'ai fait une petite fonction js
qui trouve le navigateur et change la css en fonction
( j'utilise une partie d'une librairie js trouvée sur un site de la MIT ^^ )

bon certes j'ai 7 css dans mon dossier ... mais ça m'évite pas mal de prise de tête ^^

Sabrina · Answer

Ok. Est-ce que cette petite fonction js que tu as crées pourrait s'employer sur mon site ?

Je m'essayes ;)

Brachior · Answer

bien sur ^^ il te suffira de faire une css pour IE et une pour FireFox ...
ma fonction n'est pas compliquée ^^
en fait je recupere l'user agent ( navigator.userAgent )
qui me donne une chaine du type :
Mozilla/5.0 (Windows; U; Windows NT 6.1; fr; rv:1.9.0.10) Gecko/2009042316 Firefox/3.0.10 (.NET CLR 3.5.30729)
sous Firefox
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; Creative AutoUpdate v1.10.10)
sous IE
comme tu peux le voir, on retrouve "Firefox" et "MSIE" (pour MicroSoft Internet Explorer)
donc je recherche ces mot pour definir sur quel navigateur je suis

ensuite je modifie le chemin de ma css en fonction de ca :
$A($$('link[rel=stylesheet]')).first().setAttribute('href','CSSie.css');}

first() etant un prototype pris sur la lib du MIT ^^

Sabrina · Answer

Je comprend quand tu me parles du user agent, mais tu me perds un peu plus loin... Qu'est-ce que tu veux dire par : "je modifie le chemin de ma css en fonction de ca: $A($$('link[rel=stylesheet]')).first().setAttribute('href','CSSie.css');} " Je ne connais pas le js. Je connais seulement le css et le html. Quand j'ai créé le css pour mon menu avec Dreamweaver, il m'a automatiquement créé un js pour ce menu. Je te le copie ci-bas. Dois-je coller la fonction que tu m'as donnée dans ce js? /* SpryMenuBar.js - Revision: Spry Preview Release 1.4 */ var Spry; if(!Spry) { Spry = {}; } if(!Spry.Widget) { Spry.Widget = {}; } // Constructor for Menu Bar // element should be an ID of an unordered list (

0) { layers[0].parentNode.removeChild(layers[0]); } }; // clearMenus for Menu Bar // root is the top level unordered list (

0 ? submenus[0] : null); var hasSubMenu = false; if(menu) { this.addClassName(link, "MenuBarItemSubmenu"); hasSubMenu = true; } if(!isie) { // define a simple function that comes standard in IE to determine // if a node is within another node listitem.contains = function(testNode) { // this refers to the list item if(testNode == null) { return false; } if(testNode == this) { return true; } else { return this.contains(testNode.parentNode); } }; } // need to save this for scope further down var self = this; this.addEventListener(listitem, 'mouseover', function(e) { if(self.bubbledTextEvent()) { // ignore bubbled text events return; } clearTimeout(closetime); if(self.currMenu == listitem) { self.currMenu = null; } // show menu highlighting self.addClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover"); if(menu && !self.hasClassName(menu, "MenuBarSubmenuVisible")) { opentime = window.setTimeout(function(){self.showSubmenu(menu);}, 250); } }, false); this.addEventListener(listitem, 'mouseout', function(e) { if(self.bubbledTextEvent()) { // ignore bubbled text events return; } var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement); if(!listitem.contains(related)) { clearTimeout(opentime); self.currMenu = listitem; // remove menu highlighting self.removeClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover"); if(menu) { closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, 600); } } }, false); };

Brachior · Answer

bouarf Oo tout ca pour un simple menu Oo une manipulation de css aurait simplifier l'histoire Oo il existe des attributs en css tres utilie par exemple 'hover' quoi dit "quand la souris est sur" donc par exemple #plop .hover // quand la souris passe sur le div 'plop' de la tu peux changer la couleur ou l'image de fond ca evite de demander ca a js Oo apres une simple petite fonction js d'affichage/masquage de div suffit a faire le reste ( manipulation de css ) tu fais une fonction style : function show_hide(id){ for(i=0;i ";

"; plip
"; plap
"; plop";

"; ( la syntaxe dt / dd est un exemple ^^ tu peux le faire avec tout et n'importe quoi ^^ dans ton css les menu1 ... etc ... seront en display='none' pour etre caché au debut le seul truc obligatoire c'est de nommer tous tes menu en nom+val (menu1 menu2 menu3 ... ) )

Brachior · Answer

désolé de te sortir ça comme ça ...
mais les logiciels 'clickodrome' style DreamWeaver j'evite de m'en servir
car on peut pas facilement modifier à sa guise le code =/

je travaille en dur avec notepad++ ou geany ^^

Sabrina · Answer

Lol, non ça va. En faite, je suis entrain d'apprendre la programmation. Je commence alors Dreamweaver m'est bien utile, mais je sais que ce n'est pas l'idéal pour ceux qui s'y connaisse vraiment. 

J'essai ce que tu viens de m'écrire et je te donne des nouvelles ;)

Merci !

Sabrina · Answer

Bon ok, je fais de mon mieux mais j'y arrive pas. Qu'est-ce qui marche pas avec mon html de mon menu:

Brachior · Answer

arf ^^ c'est l'inverse :) c'est ton "MenuBarItemSubmenu" qui doit comporter un numero ^^ bon il etait tard hier ^^ j'vais t'expliquer en detail ce que ca fait ^^ function show_hide(id){ for(i=0;iMenu // t'as un menu deroulant, si tu passes dessus, tu cache tout et tu l'affiche

// idem si tu passes sur les element du menu deroulant lien1.1 lien1.2 lien1.3 lien1.4

Menu

lien2.1 lien2.2 lien2.3 lien2.4

et ta css doit ressembler a ca : #sousmenu1,#sousmenu2{ display : none; // on cache les sousmenu } #sousmenu1 a,#sousmenu2 a{ // les lien des sous menu ont une image particuliere background-image : url("image.png"); background-repeat : repeat-x; } #sousmenu1 a:hover,#sousmenu2 a:hover{ // cette image change quand on passe dessus background-image : url("image_appuyee.png"); background-repeat : repeat-x; }

Sabrina · Answer

Ok, non, je catch pas le premier script. J'ai fais une page de test juste pour essayer de bien maitriser cette fonction mais sans résultat. Peux-tu me dire qu'est-ce qui ne marche pas dans mon code svp ? Oublions le css pour l'instant ;) Page de Test

Menu1

// t'as un menu deroulant, si tu passes dessus, tu cache tout et tu l'affiche

// idem si tu passes sur les element du menu deroulant lien1.1 lien1.2 lien1.3 lien1.4

Menu2

lien2.1 lien2.2 lien2.3 lien2.4

Brachior · Answer

Salut ^^ et dsl j'etais au taf ^^ bon la fonction j'l'avais pas testée et j'avais oublié un bout =X il manquait un test ^^ car sinon js plante et fais pas le reste il manque la partie css donc je te l'ai integrée au code ;) voila le code qui marche ( testé ;) ) te reste plus qu'a faire une css .. et la ce sera bcp plus simple pour la compatibilité entre les navigateurs ;) Page de Test

Menu1

Menu2

Sabrina · Answer

Merci énormément !!!  Ça peut difficilement être plus clair que ça ! haha
Je travaille là-dessus et je te tiens au courant si j'ai un problème ;)

Merci encore :)

Problème avec menu css

15 réponses

Discussions similaires