Tabulation négative, possible ?

Bonjour,

J'ai un petit soucis en XHTML/CSS.
J'ai une liste de produit. Je veux afficher cette liste avec un nom pour la liste en entier (non pas pour un élément en particulier).
Le problème est que le <label> ne se met que pour un élément (la liste) mais pas chaque éléments.
Un exemple concret :
J'ai mes produits (A, B, C, et D <= liste dynamique).
Si je fais un
Code:

1 2 3 4 5 6 7 8 9 <p> <label for="list">Produits</label> <ul name="list"> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ul> </p>
cela me donne
Code:

1 2 3 4 5 Produits A B C D
et non
Code:

1 2 3 4 5 Produits A B C D
comme je le voudrais. Y a t'il un moyen même détourné de faire ce que je veux ?

ce que serais encore mieux c'est de faire
Code:

1 2 3 Produits A B C D

Ca vient du reste de ton code, car ce que tu écris est censé donner :

Produit

A
B
C
D

Tu peux après jouer sur le margin pour le postionner comme tu le souhaite.

Pour ta position 3, c'est à mon avis impossible avec <ul>.

non, ça donne bien cela (premier aperçu) mais ça n'est pas ce que je veux
enfait mes produits sont chacun un élément de la liste, liste que j'ai tout betement nommé list (attribut name) ce qui ma permi de lui donner un <label>.
Don j'ai donner un intitulé à la liste, pas à chaque élément

Citation:

Envoyé par Er3van

Ca vient du reste de ton code, car ce que tu écris est censé donner :

Produit

A
B
C
D

Tu peux après jouer sur le margin pour le postionner comme tu le souhaite.

Pour ta position 3, c'est à mon avis impossible avec <ul>.

ce que je voudrais c'est un truc bien (je m'entend configurable q<ui puisse etre affichés aussi bien sur un écran wide 30" que sur un 13" standard

voici une solution (testée sous IE 7 et FF) :

Code:

1
2
3
4
5
6
7
 
.items{
  display: inline; 
  white-space: nowrap; 
  list-style-position: inside; 
  margin-left: 20px;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<div style="width: 200px; border: 1px solid #000000;">
   <label for="list">Produits&nbsp;:</label>
   <ul name="list">
      <li class="items">A</li>
      <li class="items">BBB</li>
      <li class="items">CCC CCC</li>
      <li class="items">DDD</li>
      <li class="items">EEE</li>
      <li class="items">FF</li>      
   </ul>
</div>

Citation:

Envoyé par Auteur

voici une solution (testée sous IE 7 et FF) :

Code:

1
2
3
4
5
6
7
 
.items{
  display: inline; 
  white-space: nowrap; 
  list-style-position: inside; 
  margin-left: 20px;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<div style="width: 200px; border: 1px solid #000000;">
   <label for="list">Produits&nbsp;:</label>
   <ul name="list">
      <li class="items">A</li>
      <li class="items">BBB</li>
      <li class="items">CCC CCC</li>
      <li class="items">DDD</li>
      <li class="items">EEE</li>
      <li class="items">FF</li>      
   </ul>
</div>

merci pour ces indications, je ne connaissait pas ces CSS.
mais http://img116.imageshack.us/img116/9...itrexz7.th.png

Citation:

Envoyé par Auteur

voici une solution (testée sous IE 7 et FF) :

Code:

1
2
3
4
5
6
7
 
.items{
  display: inline; 
  white-space: nowrap; 
  list-style-position: inside; 
  margin-left: 20px;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<div style="width: 200px; border: 1px solid #000000;">
   <label for="list">Produits&nbsp;:</label>
   <ul name="list">
      <li class="items">A</li>
      <li class="items">BBB</li>
      <li class="items">CCC CCC</li>
      <li class="items">DDD</li>
      <li class="items">EEE</li>
      <li class="items">FF</li>      
   </ul>
</div>

merci pour ces indications, je ne connaissait pas ces CSS.
mais voila ce que ton code me donne http://img116.imageshack.us/img116/9...itrexz7.th.png
(pas ce que je veux)

Bonjour,

Je pense qu'une structure (x)html du gerre serait plus adaptée:
Code:

1 2 3 4 5 6 7 <fieldset> <legend>Produits:</legend> <ul> <li><input id="master" type="checkbox" /><label for="master">Entreprise master server</label></li> <li><input id="secondary" type="checkbox" /><label for="secondary">Entreprise secondary serveur</label></li> </ul> </fieldset>
En effet , selon les recommandations w3c:

Citation:

Chaque élément LABEL est associé à exactement une commande de formulaire

L'élément fieldset quant à lui permet de

Citation:

regrouper thématiquement les commandes et les labels apparentés

Pour obtenir l'effet que tu souhaites, il suffirait alors de faire floter le legend (en virant les différents margin et padding):
Code:

1 2 3 4 5 * {margin:0;padding:0;} ul {list-style:none;} fieldset {border:none;} legend {float:left;margin-right:20px;} ul {overflow:auto;}
Là, si tu regardes sous opera ou safari voir même IE8 béta, on obtient quelque chose qui ressemble à ce que tu souhaites. Le problème est que FF et IE6-7 n'acceptent pas de faire flotter l'élément legend :(

On pourrait imaginer remplacer le legend par un h2, ou h3 selon ton code, ce qui met tous les navigateurs sur le même pied (en donnant encore le layout pour IE6).

même avec un H4, ça revient à la ligne (pas ce que je veux)
et en plus ça me foire ma mis en page

je reverrais ça à l'occasion

Citation:

Envoyé par sliderman

merci pour ces indications, je ne connaissait pas ces CSS.
mais voila ce que ton code me donne
(pas ce que je veux)

je croyais que tu voulais ce genre de structure :
Citation:
ce que serais encore mieux c'est de faire
Code:

1 2 3 Produits A B C D
:question:

Sinon il existe les balises <pre> </pre>...

Citation:

Envoyé par sliderman

même avec un H4, ça revient à la ligne (pas ce que je veux)

Je croyais que tu voulais quelque chose comme ça:

http://i48.servimg.com/u/f48/11/68/76/46/form11.png
C'est quoi qui ne correspond pas à part que c'est pas des checkbox mais des input de type text (j'avais pas fait attention mais ça ne change rien) ?

Avec des inputs de type text:
http://i48.servimg.com/u/f48/11/68/76/46/form10.png

Citation:

Envoyé par Candygirl

Avec des inputs de type text:
http://i48.servimg.com/u/f48/11/68/76/46/form10.png

oui oui c'est bien cela que je veux, mais avec ta CSS la mise en page que j'ai fais foire

Citation:

Envoyé par Er3van

Ca vient du reste de ton code.

J'suis donc toujours d'accord avec moi-même ( ^^ ) pour dire que ça vient du reste de ton code, et non pas de cette partie là, puisqu'aucun affichage ne fonctionne chez toi. ( Et n'importe laquelle des façons citées ci-dessus fonctionne )