Salut,
en fait, j'ai un bug avec IE..
J'ai créé un roll over, et une liste à puce apparait lorsqu'on passe la souris sur le roll over. Or, il existe un décalage entre les différents éléments à cet endroit : là où était la liste sans en changer la position(par un top&left), il existe un blanc de même dimension que les élément de ma liste. Et j'aimerais que ça disparaisse !
Des screens parce que je suis pas clair
: http://img391.imageshack.us/my.php?image=treseeessgoorrrrrreeeee1ao.jpg
C'est ce truc bleu qui aparait et m'énerve.. :X
Pour le JS qui s'occupe du roll over :
<SCRIPT LANGUAGE="JavaScript">
/*1ere image à charger dans le cache !! Sinon welcome les chargements de 2 heures..*/
image1=new Image;
image1.src="surligne1.png";
function hover(obj)
{
/*Pour IE only. Mozilla est dans le CSS.*/
if(document.all){
LI = obj.getElementsByTagName('li');
if(LI.length > 0){
nLI = LI.length;
for(i=0;i<nLI;i++)
{
sousMenu = LI.style;
if(sousMenu .display == 'none' || sousMenu.display == ''){
sousMenu.display = 'block';
}else{
sousMenu.display = 'none';
}
}
}}
}
/*Fonction qui applique l'affichage du menu pour chaque élément(ul,li). Only IE*/
function setHover(){
UL = document.getElementById('menu').getElementsByTagName('ul');
nUL = UL.length;
for(i=0; i < nUL; i++){
UL[i].onmouseover = function(){
hover(this);
}
UL[i].onmouseout = function(){
hover(this);
}
}
}
</script>
Pour le html :
<div id="menu">
<a href="http://www.holonomie.com"><img src="logo.png"></a><img src="partie_haute_menu.png"><ul><a
href="#" onMouseOver="menu1.src=image1.src" onMouseOut="menu1.src='nonsurligne1.png'"><img
name="menu1" src="nonsurligne1.png"></a><li><a href="#">Truc1</a></li><li><a
href="#">Truc2</a></li></ul><img src="bas_provisoire.png"></div>
Et le css.. :
div#menu img{
border:none;
padding: 0px 0px;
margin: 0px 0px;
}
div#menu ul{
padding: 0;
height: 39px;
background-color: Aqua;
margin: 0;
list-style: none outside none;
float:none;clear:both;
}
div#menu ul li{
display: none;
list-style: none;
left: 150px;
top: -36px;
position: relative;
padding: 4px 10px;
background-color: #9CBBF3;
width:80px;
margin:0px 0px 0px 0px;
}
div#menu ul:hover> li{
display: block;
}
div#menu ul li a{
text-decoration:none;
display:block;
color: blue;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
}
div#menu ul li a:hover{
color: orange;
}
Voilà merci d'avance à ceux qui m'aideront
Bye[/i][/i]
en fait, j'ai un bug avec IE..
J'ai créé un roll over, et une liste à puce apparait lorsqu'on passe la souris sur le roll over. Or, il existe un décalage entre les différents éléments à cet endroit : là où était la liste sans en changer la position(par un top&left), il existe un blanc de même dimension que les élément de ma liste. Et j'aimerais que ça disparaisse !
Des screens parce que je suis pas clair

C'est ce truc bleu qui aparait et m'énerve.. :X
Pour le JS qui s'occupe du roll over :
<SCRIPT LANGUAGE="JavaScript">
/*1ere image à charger dans le cache !! Sinon welcome les chargements de 2 heures..*/
image1=new Image;
image1.src="surligne1.png";
function hover(obj)
{
/*Pour IE only. Mozilla est dans le CSS.*/
if(document.all){
LI = obj.getElementsByTagName('li');
if(LI.length > 0){
nLI = LI.length;
for(i=0;i<nLI;i++)
{
sousMenu = LI.style;
if(sousMenu .display == 'none' || sousMenu.display == ''){
sousMenu.display = 'block';
}else{
sousMenu.display = 'none';
}
}
}}
}
/*Fonction qui applique l'affichage du menu pour chaque élément(ul,li). Only IE*/
function setHover(){
UL = document.getElementById('menu').getElementsByTagName('ul');
nUL = UL.length;
for(i=0; i < nUL; i++){
UL[i].onmouseover = function(){
hover(this);
}
UL[i].onmouseout = function(){
hover(this);
}
}
}
</script>
Pour le html :
<div id="menu">
<a href="http://www.holonomie.com"><img src="logo.png"></a><img src="partie_haute_menu.png"><ul><a
href="#" onMouseOver="menu1.src=image1.src" onMouseOut="menu1.src='nonsurligne1.png'"><img
name="menu1" src="nonsurligne1.png"></a><li><a href="#">Truc1</a></li><li><a
href="#">Truc2</a></li></ul><img src="bas_provisoire.png"></div>
Et le css.. :
div#menu img{
border:none;
padding: 0px 0px;
margin: 0px 0px;
}
div#menu ul{
padding: 0;
height: 39px;
background-color: Aqua;
margin: 0;
list-style: none outside none;
float:none;clear:both;
}
div#menu ul li{
display: none;
list-style: none;
left: 150px;
top: -36px;
position: relative;
padding: 4px 10px;
background-color: #9CBBF3;
width:80px;
margin:0px 0px 0px 0px;
}
div#menu ul:hover> li{
display: block;
}
div#menu ul li a{
text-decoration:none;
display:block;
color: blue;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
}
div#menu ul li a:hover{
color: orange;
}
Voilà merci d'avance à ceux qui m'aideront

Bye[/i][/i]