Différence d'affichage du menu css

Fermé
funproa - 16 déc. 2009 à 12:31
 funproa - 16 déc. 2009 à 16:15
Bonjour,
mon problème est que j'ai un menu css dans template joomla en direction:ltr le menu est opérationnelle dans toutes les navigateur mais en rtl le menu fait des décalages :)' sous ie7 et opéra et meme google chrome
merci de m'informer si possible de trouver une solution ??????

3 réponses

notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
16 déc. 2009 à 14:52
Il y a une raison particulière à le mettre en rtl ? C'est un site avec certaines pages en arabe ?
0
bjr;
oui certain de mes pages est en arabe donc je doit avoir un menu en rtl
0
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
16 déc. 2009 à 14:57
ok.
Mais il nous en faudrait un peu plus pour comprendre : est-il en ligne ce site ?
0
non il est sur mon ordi;
mais je vous donne le css
#cssmenu {
margin: 0; /* all lists */
padding: 0;

}

#cssmenu ul {
margin: 0; /* all lists */
padding: 0;

}

#cssmenu li {
float: right;
display: block;
padding-right: 0;
margin: 0;
background: none;
direction:rtl !important;
}

#cssmenu li ul {
width: 16.4em;
position: absolute; /* second-level lists */
position: absolute!important; /* second-level lists */
z-index: 99;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
height: auto;
w\idth: 15.9em;
direction:rtl;
float:right;
margin:0;

}

#cssmenu li ul ul {


margin-top: -20px;

margin-right: 170px;

margin-bottom: 0;

margin-left: 15px !important ;/* third-and-above-level lists */


}

#cssmenu li li {
padding: 0 1em 0 0;
margin: 0;
width: 14.9em;
}

#cssmenu ul a {
width: 14.9em;
w\idth: 10.8em;
direction:rtl;
}

#cssmenu li:hover ul ul, #cssmenu li:hover ul ul ul,
#cssmenu li.sfhover ul ul, #cssmenu li.havechildsfhover ul ul, #cssmenu li.havechild-activesfhover ul ul, #cssmenu li.activesfhover ul ul,
#cssmenu li.sfhover ul ul ul, #cssmenu li.havechildsfhover ul ul ul, #cssmenu li.havechild-activesfhover ul ul ul, #cssmenu li.activesfhover ul ul ul {
left: -999em;

}

/* This "unhides" the sub-menus (left: -999em is what hides them) */
#cssmenu li:hover ul, #cssmenu li li:hover ul, #cssmenu li li li:hover ul,
#cssmenu li.sfhover ul, #cssmenu li.havechildsfhover ul, #cssmenu li.havechild-activesfhover ul, #cssmenu li.activesfhover ul,
#cssmenu li li.sfhover ul, #cssmenu li li.havesubchildsfhover ul, #cssmenu li li.havesubchild-activesfhover ul, #ja-cssmenu li li.activesfhover ul,
#cssmenu li li li.sfhover ul, #cssmenu li li li.havesubchildsfhover ul, #cssmenu li li li.havesubchild-activesfhover ul, #ja-cssmenu li li li.activesfhover ul {
left: auto;

}

/* STYLING THE MENU
-----------------------------------*/
/* 1st level */
#cssmenu li a {
border-right: 1px solid #666666;
display: block;
text-decoration: none;
font-size: 100%;
color: #999999;
padding: 5px 10px;
text-transform: uppercase;
direction:rtl;
text-align:right;
margin: 0px !important ;/* third-and-above-level lists */
}

#cssmenu li a:hover,
#cssmenu li a:active,
#cssmenu li a:focus {
color: #FFFFFF;

}

#cssmenu li:hover a,
#cssmenu li.sfhover a,
#cssmenu li.havechildsfhover a,
#cssmenu li.havechild-activesfhover a {
color: #FFFFFF;
}

#cssmenu li.active {
background: none;
}

#cssmenu li.active a {
background: none;
color: #FFFFFF;
}

#cssmenu li a.active:hover,
#cssmenu li a.active:active,
#cssmenu li a.active:focus {
color: #FFFFFF;
direction: rtl;

}

/* 2nd level and above */
#cssmenu li ul {
border: 1px solid #202020;
margin-top: -3px;
background: url(../../images/trans-bg.png);
direction: rtl;

}

#cssmenu li ul ul {
border: 1px solid #202020;
direction: rtl;

}

#cssmenu li ul li {
border-bottom: 1px solid #202020;
border-top: 1px solid #999;
border-right: none;
background: none;
direction: rtl;
}

#cssmenu li ul a {
border-right: none;
margin: 0;
padding: 7px 15px 7px;
background: none !important;
text-transform: none;
font-weight: normal;
font-size: 92%;
white-space: nowrap;
color: #CCCCCC !important;
direction: rtl;
}

#cssmenu li.havesubchild,
#cssmenu li.havesubchild-active {
background: url(img/arrow-1.gif) no-repeat 94% 50% ;



}

#cssmenu li ul a:hover,
#cssmenu li ul a:active,
#cssmenu li ul a:focus,
#cssmenu ul li:hover,
#cssmenu ul li.sfhover,
#cssmenu ul li.havesubchildsfhover,
#cssmenu ul li.havesubchild-activesfhover,
#cssmenu ul ul li:hover,
#cssmenu ul ul li.sfhover,
#cssmenu ul ul li.havesubchildsfhover,
#cssmenu ul ul li.havesubchild-activesfhover {
background: #202020;
color: #FFFFFF !important;
direction: rtl;
}

#cssmenu ul li a.active {
background: none !important;
color: #FFFFFF !important;
font-weight: bold !important;
}

#cssmenu ul li a.active:hover,
#cssmenu ul li a.active:active,
#cssmenu ul li a.active:focus {
color: #FFFFFF !important;

}



bon ce code est pour rtl de menu si je mais sous FF est impécable sous ie la oooooooooooooooof
j'ai fais un hack et j'ai mis une condition mais n'est pas satisfaisant pour corriger juste il ma fait un petit décalage
merci de m'informer ou l'erreur que j'ai fait
@+
0
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
16 déc. 2009 à 16:11
Pas forcément facile... mais j'essaierais de mettre les float:right en float:left pour voir (dans l'idée que tout est en "miroir")
Pas sûr que ça fonctionne et que ce soit suffisant : à tester.
0
bonjour;
en changent le float right vers float left tu vas avoir le mod ltr par défaut et tu va avoir un menu qui fonctionne sur tous les navigateur
0