Discussion :

[sliderman]

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 :

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

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 :

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

1
2
3
4
5
 
Produits   A  
B
C
D

et non

Code :

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

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 :

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

1
2
3
 
Produits         A       B
                 C       D

[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>.

[sliderman]

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

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

[Auteur]

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

Code css :

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

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

Code html :

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

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>

[sliderman]

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

Code css :

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

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

Code html :

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

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

[sliderman]

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

Code css :

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

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

Code html :

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

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
(pas ce que je veux)

[Candygirl]

Bonjour,

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

Code xhtml :

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

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:

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

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

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 :

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

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

[Auteur]

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 :

ce que serais encore mieux c'est de faire

Code :

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

1
2
3
 
Produits        A       B
                C       D

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

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