Menu horizontal avec du texte arabe?

Bonjour,

j'ai un probleme avec mon menu horizontal lorsque je place du texte occidental dans mon menu (<li></li>) tout est bien mais lorsque je place du texte arabe la du coup ce n'ai plus pareil ya pas d'espace entre les mot comme sur l'image :
http://img119.imageshack.us/img119/402/menuincorecttf1.gif


et la ont a le menu correct
http://img253.imageshack.us/img253/9956/menucorectuq2.gif


la c'est mon css:

#slantedmenu{
   font-weight: bold;
   font-size: 90%;
   margin-bottom: 4px;
   text-align:center;
}

   #slantedmenu:after{ /*Add margin between menu and rest of content in Firefox*/
   content: "."; 
   display: block; 
   height: 0; 
   clear: both; 
   visibility: hidden;
}

   #slantedmenu ul{
   text-indent: 10px;
   padding: 3px 0;
   margin: 0;
   background: url("images/imgdefond.gif") repeat-x 20px;
   border: 1px solid #505F7D;
   text-align: left; /*set value to "center" for example to center items*/
}

   #slantedmenu ul li{
   display: inline;
}

   #slantedmenu ul li a{
   color: #FFFFFF;
   padding: 3px 0;
   padding-right: 25px;
   margin: 0;
   text-decoration: none;
   border-left: 1px solid #505F7D;
}

   #slantedmenu ul li a:visited{
   color: #FFFFFF;
} 

   #slantedmenu ul li a:hover{
   background: url("images/imghover.gif") repeat-x 20px;
}

et la html

<div id="slantedmenu">
  <ul>
<li><a href="#" title="Page d'accueil"><span>&#1575;&#1604;&#1600;&#1600;&#1576;&#1583;&#1575;&#1610;&#1600;&#1600;&#1577;</span></a></li>
    <li><a href="#" title="Styles"><span>&#1575;&#1610;&#1600;&#1600;&#1602;&#1575;&#1593;&#1600;&#1600;&#1575;&#1578;</span></a></li>
    <li><a href="#" title="Samples"><span>&#1587;&#1600;&#1600;&#1600;&#1575;&#1605;&#1576;&#1600;&#1604;&#1585;</span></a></li>
    <li><a href="#" title="Logiciels"><span>&#1576;&#1600;&#1600;&#1585;&#1575;&#1605;&#1600;&#1600;&#1580;</span></a></li>
    <li><a href="#" title="Claviers">&#1575;&#1604;&#1575;&#1608;&#1585;&#1594;&#1600;&#1600;&#1575;&#1578;</span></a></li>
    <li><a href="#" title="Démos Vidéos"><span>&#1601;&#1600;&#1600;&#1610;&#1583;&#1610;&#1600;&#1600;&#1608;</span></a></li>
    <li><a href="#" title="Démos Audio"><span>&#1575;&#1594;&#1600;&#1600;&#1575;&#1606;&#1600;&#1610;</span></a></li>
	<li><a href="#" title="Gammes"><span>&#1575;&#1604;&#1600;&#1600;&#1605;&#1602;&#1600;&#1575;&#1605;&#1600;&#1600;&#1575;&#1578;</span></a></li>
	<li><a href="#" title="Midi"><span>&#1575;&#1594;&#1600;&#1575;&#1606;&#1600;&#1610; &#1605;&#1600;&#1610;&#1583;&#1610;</span></a></li>
	<li><a href="#<span>&#1575;&#1604;&#1600;&#1600;&#1605;&#1606;&#1600;&#1600;&#1578;&#1583;&#1609;</span></a></li>
</ul>
</div>

Merci de bien vouloir m'aider et si vous avez un autre menu horizontal plus simplifié je suis preneur
Modifié par Abdellah (23 Jun 2007 - 18:01)

Bonjour,

Est-ce qu'on pourrait voir la page (ou une copie de la page) en ligne ? Ça serait plus simple pour visualiser et tester les propriétés appliquées aux différents éléments.

Je connais mal les spécificités de la gestion du texte de droite à gauche. Une idée cependant : tu as un text-indent: 10px;, or la propriété text-indent est héritée. Pour du texte de gauche à droite, ça créera un écart à gauche. Pour du texte de droite à gauche (et déclaré comme tel), ça créera un écart à droite de 10px. D'où le fait que ça soit collé à la bordure de gauche, mais pas à celle de droite ?

Par contre, je ne sais pas pourquoi le padding-right: 25px; ne s'applique pas.

Bonjour,

merci

voici le lien vers la page avec le menu en Arabe -->ici

voici le lien vers la page avec le menu en Français -->ici

note: j'ai supprimer text-indent mais aucun changement


Modifié par Abdellah (24 Jun 2007 - 11:33)

Bon,

Les padding n'ont pas l'air de prendre avec le texte en arabe.
De même, si j'ajoute une bordure, le texte s'affiche par dessus...

Je pense qu'il faudrait commencer par potasser ceci :
http://www.la-grange.net/w3c/html4.01/struct/dirlang.html

Mais j'ai tenté de rajouter les indications de langue et de direction du texte, sans succès.

Il n'y aurait pas des forums en arabe pour les webmasters ? Ils doivent être bien au courant de ce genre de problèmes.

Salut Florent finalement j'ai reussi a le faire comme ceci :

ul#menu {
list-style-type: none;
width: 100%; /* précision pour Opera */
}

ul#menu li {
float: left;
}

ul#menu a {
float: left;
margin: 0 0px;
padding: 0px 15px;
text-align: center;
border: 1px solid gray;
text-decoration: none;
color: #FFFFFF;
background: url("images/cellpic.gif") repeat-x 20px;
}

ul#menu a:hover {
background: url("images/pied.gif") repeat-x 20px;
border: 1px solid #505F7D; 
}

mais voila le menu n'ai plus aligner et il n'ya plus le petit espace entre le header et le bas. en image ca donne ceci
http://img525.imageshack.us/img525/5900/pasbonmz4.gif

j'aimerai avoir ceci
http://img525.imageshack.us/img525/3726/bonao1.gif

et pour les forums arabe c'est une bonne aider j'avais completement oublier merci encore.

voici le lien vers le menuici
Modifié par Abdellah (24 Jun 2007 - 14:39)