Discussion :

[veevee]

Bonsoir,
je crée une page de traductions.
D'une part les mots et expressions anglaises, de l'autre les équivalents en français.
J'utilise

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<ul id="conteneur">
<li>expression anglaise  Expression française</li>
<li></li>
<li></li>
</ul>

Pour supprimer les puces j'utilise

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#conteneur li{
list-style:none;
}

Quel syntaxe employer pour que les expressions anglaises soient centrées à droite, les expressions française centrées à gauche à peu près comme ça :


Merci

[balu]

Bonsoir,

D'après ce que j'ai compris, tes données ont une représentation tabulaire.
Un tableau serait tout à fait approprié.

[veevee]

Bonjour,
et GRAND merci pour ta réponse

Non, avec un tableau j'arriverai à le faire, mais un tableau est IMPOSSIBLE à maintenir (ajouter un élément au milieu des autres) donc j'utilise CSS

La feuille HTML est ainsi

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<ul id="conteneur">
<li></li>
<li></li>
<li>Cancel overrides Annuler les priorités</li>
<li></li>
<li>Display  Affichage</li>
<li></li>
<li>Duration  Durée</li>
<li></li>
<li>End  Fin</li>
<li></li>
<li></li>
<li></li>
<li>Edit</li>
<li></li>
<li>Event  Evènement</li>
<li></li>
<li></li>
<li>File  Dossier</li>
<li></li>
<li></li>
<li>Genlock Interface avec MultiGen</li>
<li></li>
<li></li>
<li>Help Aide</li>
.....
</ul>

et la feuille CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
....
#conteneur li{
list-style:none;
}
....

pour supprimer les puces

Je voudrais une instruction CSS supplémentaire pour que la séparation entre texte anglais et français soit dans la même verticale , par exemple :

dans la feuille HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
....
<li></li>
<li>Event appel CSS Evènement</li>
<li></li>
<li></li>
<li>File appel CSS Dossier</li>
<li></li>
<li></li>
....

mais je suis incapable d'imaginer
- quel est la syntaxe de l'appel
- quelle ligne CSS il faut rajouter dans la feuille CSS


simple... et pas simple du tout pour moi !

Merci de t'intéresser à mon cas

@+

[12monkeys]

Bonjour

Tu devrais mettre tes textes anglais et français dans 2 li différents avec dans l'un text-align:right et dans l'autre text-align:left.

[FremyCompany]

Ce n'est pas possible.
Cela le sera en CSS 2.1 (implémenté par IE8, FF2, OP9, SF2) mais c'est peu intéressant car il te faut obligatoirement un controle "parent" par ligne (TR-like) et un controle "TABLE" si tu veux que tes lignes soient synchronisée.

Donc ca revient à une TABLE>TD>TD sauf que ce serait un DIV
>UL>LI. Et que tu ne bénéficie pas des avantages DOM des tableaux.

Donc mieux vaut passer par un tableau

[veevee]

Bonjour

Tu devrais mettre tes textes anglais et français dans 2 li différents avec dans l'un text-align:right et dans l'autre text-align:left.

merci, mais "ça marche pas" les li "passent à la ligne" et anglais-français sont l'un au-dessus de l'autre

Je vais tenter d'autres astuces avec des conteneurs, des float...
comme je suis nul de chez nul en CSS, p't'être je vais apprendre des trucs

Merci et @+

[12monkeys]

merci, mais "ça marche pas" les li "passent à la ligne" et anglais-français sont l'un au-dessus de l'autre

Je vais tenter d'autres astuces avec des conteneurs, des float...
comme je suis nul de chez nul en CSS, p't'être je vais apprendre des trucs

Merci et @+

Ah oui j'avais oublié de te préciser de mettre un float:left sur les li et de mettre une largeur au conteneur adapté pour que deux <li> puissent se mettre cote à cote.