A voir également:
- Différence d'affichage du menu css
- Menu déroulant excel - Guide
- Menu contextuel windows 11 retrouver l'affichage classique - Guide
- Windows 11 menu démarrer classique - Guide
- Difference tcp udp - Guide
- Affichage double ecran - Guide
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
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 ?
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
16 déc. 2009 à 14:57
ok.
Mais il nous en faudrait un peu plus pour comprendre : est-il en ligne ce site ?
Mais il nous en faudrait un peu plus pour comprendre : est-il en ligne ce site ?
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
@+
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
@+
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
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.
Pas sûr que ça fonctionne et que ce soit suffisant : à tester.
16 déc. 2009 à 14:55
oui certain de mes pages est en arabe donc je doit avoir un menu en rtl