avoir en CSS le même affichage qu'un tableau HTML

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:

---

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:

---

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 :
http://mistervideo.free.fr/TEST/css.jpg

Merci

Bonsoir,

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

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:

---

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:

---

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:

---

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

@+

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.

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 ;)

Citation:

---

Envoyé par 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.

---

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 @+

Citation:

---

Envoyé par veevee

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é :oops: 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.

et :

Code:

---

<li>File <label>Dossier</label></li>

---

Code:

---

1 2 3 4 5 6 7 8 9

#conteneur li{ list-style:none; width:100px; } #conteneur li label { float:right; width:50px; min-width:50px; }

---

par contre ça implique de rajouter pas mal de trucs à la main si la liste est grande, mais avec un un Ctrl+H pour remplacer ça devrait aller vite... et surtout tu n'as besoin que d'une liste, comme au départ, pour chaque mot français / anglais.

et sinon les listes vides (<li></li>...), quel intérêt?

Personnellement, si j'avais du l'écrire avec des listes, j'aurais fait comme ceci :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

ul, li { list-style: none; } li.left { float: left; } li.right { float: right; } li.spacer { clear: both; }

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<ul> <li class="left">Anglais</li> <li class="right">Français</li> <li class="spacer">&nbsp;</li>   <li class="left">Anglais</li> <li class="right">Français</li> <li class="spacer">&nbsp;</li>   <li class="left">Anglais</li> <li class="right">Français</li> <li class="spacer">&nbsp;</li>   <li class="left">Anglais</li> <li class="right">Français</li> <li class="spacer">&nbsp;</li>   <li class="left">Anglais</li> <li class="right">Français</li> <li class="spacer">&nbsp;</li> </ul>

---

Mais vu qu'il s'agit d'un terme et de sa définition, une liste de type <dt></dt> serait plus appropriée (surtout d'un point de vu accessibilité).

comme ceci :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

dt { float: left; } dd { float: right; } .spacer { clear: both; line-height: 0; font-size: 0; }

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<dl> <dt>Anglais</dt> <dd>Français</dd> <p class="spacer">&nbsp;</p>   <dt>Anglais</dt> <dd>Français</dd> <p class="spacer">&nbsp;</p>   <dt>Anglais</dt> <dd>Français</dd> <p class="spacer">&nbsp;</p>   <dt>Anglais</dt> <dd>Français</dd> <p class="spacer">&nbsp;</p> </dl>

---

Citation:

---

Envoyé par Halleck

et :

Je me suis RUE sur tes conseils pour les mettre en a
par contre ça implique de rajouter pas mal de trucs à la main si la liste est grande, mais avec un un Ctrl+H pour remplacer ça devrait aller vite... et surtout tu n'as besoin que d'une liste, comme au départ, pour chaque mot français / anglais.

et sinon les listes vides (<li></li>...), quel intérêt?

---

Bonjour,
il pleut sur Santiago.... et sur Manosque

Je me suis RUE sur tes conseils pour les mettre en application... à premiere vue "ça marche pas", mais il faut compter avec ma nullité
Donc je tourne autour, et ça donne des trucs tellement surprenants, qu'à la fin du compte, ça devrait fonctionner

Citation:

---

par contre ça implique de rajouter pas mal de trucs à la main si la liste est grande, mais avec un un Ctrl+H pour remplacer ça devrait aller vite... et surtout tu n'as besoin que d'une liste, comme au départ, pour chaque mot français / anglais.

---

ça, c'est vraiment pas un pb

Citation:

---

et sinon les listes vides (<li></li>...), quel intérêt?

---

c'est un fichier ou des lignes sont prêtes... donc vides
Mais je me demande si ces lignes vides ne me foutent pas le chochmoulou

Je tape dans la butte et je reviens (sans doute avant ce soir)

En tout cas, un vigoureux merci

en effet, c'était juste une piste à explorer.

Je viens de tester ça :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

#conteneur { width:400px; background:#CCCCCC; } #conteneur li{ list-style:none;   } #conteneur li label.ang { min-width:200; width:200px; float:right; background:#00CC00; } #conteneur li label.fr { min-width:200; width:200px; float:left; background:#CC00CC; }

---

(J'ai mis des couleurs pour bien séparer)

Code:

---

1 2 3 4 5 6

<div id="conteneur"> <li><label class="fr">File1</label> <label class="ang">Dossierqsd1</label></li> <li><label class="fr">File2</label> <label class="ang">Dossierqsd2</label></li> <li><label class="fr">File3</label> <label class="ang">Dossierqqqqqq</label></li> <li><label class="fr">File4</label> <label class="ang">Dossierqqs</label></li> </div>

---

Chez moi, sur IE7, c'est bon... je ne sais pas si c'est ça que tu voulais, mais c'est ce que j'en ai compris ;)

Après :
Il suffit de faire un remplacer sur ton code, mais : label > je ne sais pas du tout ce que ça vaut niveau accessibilité, etc. C'est pour ça que la solution de darkstar123456 me semble mieux...

Re'

et merci pour toute votre compréhension, le résultat de la dernière prescription de Halleck est bien, bien que ce ne soit pas exactement ce que je souhaite qui réussirait un affichage genre "tabulation"

http://mistervideo.free.fr/TEST/nirvana.jpg

tout cela me dépasse trop techniquement pour que je ne sois pas sensible à vos efforts
Mais CSS n'est pas omnipotent, nous avons sans doute atteint les limites de ce qu'on peut obtenir

Grazie mille

Tu devrais peu-être regarder du côté des listes de définition et faire quelque chose du genre:

Code:

---

1 2 3 4 5 6 7 8

<dl> <dt lang="en">Cancel overrides</dt> <dd>Annuler les priorités</dd> <dt lang="en">Display</dt> <dd>Affichage</dd> <dt lang="en">Duration</dt> <dd>Durée</dd> </dl>

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

* {margin:0;padding:0;}   dt { float:left; clear:both; width:48%; text-align:right; margin-bottom:1em; }   dd { float:right; width:48%; margin-bottom:1em; }

---

(attention à IE qui risque de perdre le vis à vis en cas de multiligne d'un côté)

Re-bonjour à tous,

vraiment, votre gentillesse me touche...ça c'est vrai

Comme je suis rouge de confusion (mais ça ne se voit pas trop sous ma barbe blanche) :oops: je vais faire un peu d'humour (ça sera peut-être ma dernière fois :D :

J'ai l'impression d'être un grand brûlé, on se presse à mon chevet, on guette mes réactions, peut-être mon dernier soupir, on ne sait quoi faire pour m'être agréable, et je me dis :
Ont-ils de la compassion ou guettent-il le moment où je vais la glisser pour vider mes tiroirs tranquillement, enfin débarrassés du schnock ?:king:


Merci

Citation:

---

Envoyé par veevee

Re'

et merci pour toute votre compréhension, le résultat de la dernière prescription de Halleck est bien, bien que ce ne soit pas exactement ce que je souhaite qui réussirait un affichage genre "tabulation"

---

Autant pour la solution de Halleck que celle de darkstar123456 met un text-align:right sur le texte anglais pour qu'il s'aligne à droite.

Même si la solution de darkstar123456 me semble meilleure car il me semble que label sert plus dans le cadre d'un formulaire (http://www.la-grange.net/w3c/html4.0...tml#edef-LABEL)

Yep normalement <label> n'est à utiliser qu'avec les formulaires afin d'aide à donner le focus à l'input (et pour des raisons d'accessibilités).

Utilise les listes de définitions comme j'ai mis plus haut. Pour avoir un affichage comme tu le souhaites il te suffit de modifier légèrement le code comme ceci :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

dt, dd { float: left; display: block; width: 150px; } /* Retirer le commentaire si on veut un style différent pour les définitions dd { float: left; display: block; width: 150px; } */ .spacer { clear: both; line-height: 0; font-size: 0; }

---

(le code HTML reste inchangé par rapport au précédent que j'ai donné... et oui, c'est ça les joies du CSS :))

@darkstar123456
Oups, j'avais zapé le bas de ta réponse et pas vu que tu proposais déjà la liste de définition; toutes mes excuses ;)

Citation:

---

Envoyé par Candygirl

@darkstar123456
Oups, j'avais zapé le bas de ta réponse et pas vu que tu proposais déjà la liste de définition; toutes mes excuses ;)

---

Les grands esprits se rencontrent :)

Mais c'est bien de le mettre deux fois, j'ai l'impression que les <dl> sont trop souvent oubliés alors qu'on est clairement dans ce cas (d'un point de vue logique, il s'agit bien d'un terme et de sa définition et non pas d'une liste de mots :))

expression anglaise (terme) : expression française (définition)
expression française (terme) : expression anglaise (définition)

Citation:

---

Envoyé par darkstar123456

...il s'agit bien d'un terme et de sa définition...

---

Au sens large du terme. C'est vrai que c'est plus logique qu'une simple liste. À mon sens, un tableau était aussi approprié dans le cas présent. L'important est d'avoir une solution satisfaisante. ;)