alignement de droite à gauche et de gauche à droite dans une liste de choix

15 juil. 2008, 19:44

j'ai une liste de choix qui contient tous les pays, cette liste contient la liste des pays en anglais et arabe , alors j'ai une probléme d'alignement.
les pays présenté avec la langue anglaise sont bien presenté (car l'alignement par défaut est du gauche vers droite) alors que les pays présenté avec la langue arabe sont mal presenté car il doivent s'aligner de doite vers gauche

Code : Tout sélectionner

<select name="count" class="BOUT" id="countr">
        <option value="0">Select Country of Origin</option>
        <?php 
	  $i=0;
do {$i++;  
?>
        <option value="<?php echo $row_ooo['ID']?>" class="<?php echo "t". $i%2; ?>" > <?php echo $row_ooo['NAME_EN']; ?>&nbsp;&nbsp;&nbsp;<?php echo $row_ooo['NAME_AR']?></option>
        <?php
} while ($row_ooo = mysql_fetch_assoc($ooo));
  $rows = mysql_num_rows($ooo);
  if($rows > 0) {
      mysql_data_seek($ooo, 0);
	  $row_ooo = mysql_fetch_assoc($ooo);
  }
?>
    </select>

j'ai essayé de faire

Code : Tout sélectionner

<p align="right"> <?php echo $row_ooo['NAME_AR']?> </P>

mais elle n'a pas marché toute information sera le bien venue et merci d'avance

15 juil. 2008, 20:55

Tu devrais t'intéresser à l'attribut html dir dont la valeur peut être "ltr" (left to right = de gauche à droite) ou "rtl" (right to left = de droite à gauche) qui serait dans ce cas approprié à l'écriture arabe.

Essaye ceci :

Code : Tout sélectionner

<select dir="ltr">
  <option value="-1">--------------------</option>
  <option value="France">France</option>
  <option value="Algérie">Algérie</option>
  <option value="Maroc">Maroc</option>
  <option value="Tunisie">Tunisie</option>
</select>

Et maintenant ceci :

Code : Tout sélectionner

<select dir="rtl">
  <option value="-1">--------------------</option>
  <option value="France">France</option>
  <option value="Algérie">Algérie</option>
  <option value="Maroc">Maroc</option>
  <option value="Tunisie">Tunisie</option>
</select>

15 juil. 2008, 23:24

Le problème c'est que dir="rtl" ne marche que si on le met dans la balise <select>, si on le met dans la balise <option> ça ne marche pas.... afin, sous IE

16 juil. 2008, 08:27

On mélange rarement plusieurs langues dans une même liste. Le cas échéant, on devra procéder autrement avec, par exemple, une liste à puce assortie de boutons radio et un style CSS pour limiter la largeur de chaque item.

16 juil. 2008, 23:23

On mélange rarement plusieurs langues dans une même liste. Le cas échéant, on devra procéder autrement avec, par exemple, une liste à puce assortie de boutons radio et un style CSS pour limiter la largeur de chaque item.

Ce qui revient à s'inspirer de la page d'accueil du site support de Spip.

Code : Tout sélectionner

<form method="post" action="formulaire-bidirectionnel.html">
  <fieldset>
    <legend>Please choose a country</legend>
    <ul>
      <li><input id="uk" name="country" type="radio" value="uk" /> <label for="uk">United Kingdom</label></li>
      <li><input id="ie" name="country" type="radio" value="ie" /> <label for="ie">Ireland</label></li>
      <li dir="rtl" xml:lang="ar" lang="ar"><label for="ma">Morocco in Arabic</label> <input id="ma" name="country" type="radio" value="ma" /></li>
      <li dir="rtl" xml:lang="ar" lang="ar"><label for="dz">Algeria in Arabic</label> <input id="dz" name="country" type="radio" value="dz" /></li>
      <li dir="rtl" xml:lang="ar" lang="ar"><label for="tn">Tunisia in Arabic</label> <input id="tn" name="country" type="radio" value="tn" /></li>
    </ul>
  </fieldset>
</form

Et en CSS, quelque chose de ce genre :

Code : Tout sélectionner

ul {
  width: 10em;
  height: 2em;
  overflow: auto;
  border: 1px solid;
  list-style: none;
}

alignement de droite à gauche et de gauche à droite dans une liste de choix

Qui est en ligne