28220 sujets

CSS et mise en forme, CSS3

Probléme de Menu

Bonjour !
Je suis nouveau sur le forum , je vient souvent ici faire un tour quand j'ai besoin d'infos pour résoudre un probléme.

Je suis encore un débutant ( moyen ) en css.
Il faudrait d'ailleurs que je pense à acheter un livre pour me perfectionner...

Bon voila mon probléme. ( il concerne IE, comme 80 % des problémes de css que j'ai ! Smiley biggrin ) J'ai mis en place un menu css déroulant à partir d'un exemple du net, mais voila j'obtient des cligniotement au survol de l'image ( rollover )

Voici une page web resumant l'erreur ( a tester sous IE):

http://vds-381119.amen-pro.com/css/index.php

alors que le menu seul marche bien :

http://vds-381119.amen-pro.com/css/index2.php

tenez pas compte du site, c'est juste un test pour un ami ...
voila merci d'avance pour votre aide.
je reste a votre disposition pour des questions


Smiley cligne
Bah c'est sur le site ... (Du lien que j'ai donné)
Je ne voualis pas allourdir le forum Smiley ravi
Bon bah voila le code :

Le code javascript : (le plus répandu pour les menu déroulant)
a écrit :


sfHover = function() {
var sfEls = document.getElementById("menu1").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}



}
if (window.attachEvent) window.attachEvent("onload", sfHover);


Le code css du menu

Menu.css
a écrit :


#blocMenu1{
position: absolute;
align: left;
top:98px;
left:15px;
margin: 0;
padding: 0;
z-index: 2;
}




#menu1,#menu1 ul {
float: left;
width: 700px;
list-style: none;
line-height: 1;
font-weight: bold;
padding: 0;
margin: 0 0 0em 0;
z-index: 3;
}


#menu1 a {
display: block;
background: url(img/bouton1.jpg) top left no-repeat;
text-decoration: none;
width:130px;
height:23px;


}



#menu1 li {
float: left;
list-style: none;
margin-left: 0.5px;
}


#menu1 li a {
padding-top: 0.50em;
padding-left: 2em;
width:130px;
color: #FFAE00;
}



#menu1 li a:hover{
display: block;
background: url(img/bouton2.jpg) top left no-repeat;
}




#menu1 li ul {
position: absolute;
left: -999em;
height: auto;
width: 14.4em;
width: 13.9em;
font-weight: normal;
border-width: 0.25em;
margin: 0;
}




#menu1 li ul a {
z-index: 1;
padding: 0.25em 1em;
border-top: 0em;
font-weight: bold;
color: #FFF;
width: 15em;
width: 10em;
border-top: 0.10em;
border-bottom: 0.20em ;
background-color: #340201;
filter:alpha(opacity=85);
-moz-opacity:0.85;
opacity: 0.85;
}


#menu1 li li a:hover {
border-top: 0.10em solid #FFF;
border-bottom: 0.20em solid #FFF;
}



#menu1 li:hover ul ul, #menu1 li:hover ul ul ul, #menu1 li.sfhover ul ul, #menu1 li.sfhover ul ul ul {
left: -999em;
}

#menu1 li:hover ul, #menu1 li li:hover ul, #menu1 li li li:hover ul, #menu1 li.sfhover ul, #menu1 li li.sfhover ul, #menu1 li li li.sfhover ul {
left: auto;
}
/*
#menu1 li li:hover, #menu1 li li.sfhover {
background: #fff;
}
*/

[/i]
Sinon voici le codes des autres feuille de style : ( le menu seul marchant bien, cela vient peut être de là )

layout.css 


#document {
	position: relative;
	width: 700px;
	/*background: #C4EC25 ;*/
	margin: 0 0 0 -350px;
	z-index: 1;
}

#header {
	width: 700px;
	height: 145px;
	background: url(img/header.gif) no-repeat top;
}
/*
#right{
	position: absolute;
	text-align: left;
	left: 500px;
	top: 120px;
	width: 180px;
	background: #98BD05;
	padding: 10px 10px 10px 10px;
	z-index: 1;
	display: none;
	}
*/


	
#left{
	position: absolute;
	text-align: left;
	left: 0px;
	top: 145px;
	width: 240px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 20px;
	z-index: 0;
}


#contenu{
	width: 400px;
	background: #fff;
	padding-left: 270px;
	padding-right: 22px;
	padding-top: 20px;
	border-right: 4px solid #FF0208;
	border-left: 4px solid #FF0208;
	z-index: -1;
}
		
	

	


#footer{
	left:-250px;
	width: 670px;
	height: 83px;
	padding-top: 45px;
	padding-left: 30px;
	background: url(img/bas.gif) no-repeat top;
	color: #000;
	z-index: 1;
}


Style.css


body {
	background: url(img/fond.jpg) repeat;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px; 
	color: #000;
	margin: 10px 0px 0px 50%;
}

Modifié par tich62 (28 Oct 2005 - 23:20)
Je suis en train de faire un menu XHTML/CSS/JS pouvant fonctionner sans JS, la seule différence sera que les sous-menus s'effaceront si le JS est désactivé. Malheureusement je me heurte à un problème de syntaxe CSS
ici
Je pense que j'aurais la solution d'ici demain alors si tu peux attendre.
Sujet clos
Aller à