[XHTML] ul et data interdit avec xhtml1-strict.dtd

**SpaceFrog** · 11/12/2007, 14h39

Code :

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

1
2
3
4
5
6
<ul> titre 
      <li>rubrique 1 </li>
      <li>rubrique 1 </li>
      <li>rubrique 1 </li>
      <li>rubrique 1 </li>
</ul>

il existe un titre pour des li ?
ça me bloque je ne suis plus w3c valide

**Bisûnûrs** · 11/12/2007, 14h47

Non, tu ne peux pas mettre de "titre" comme tu l'entends au sens propre du terme, étant donné que les seuls éléments enfants de la balise ul sont la balise li. La balise ul ne peut d'ailleurs pas contenir de #PCDATA.

**SpaceFrog** · 11/12/2007, 14h53

il n'y a pas comme pour les fieldset un legend ou un truc du genre
graphiquement ça donnait un joli résultat ...

**Bisûnûrs** · 11/12/2007, 14h59

Non, rien dans ce goût-là pour les listes.

Tu peux peut-être essayer de créer un nouveau li pour ton titre auquel tu mets une classe spécifique, genre :

Code :

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

1
2
3
4
5
6
7
<ul>
      <li class="titre">titre</li>
      <li>rubrique 1 </li>
      <li>rubrique 1 </li>
      <li>rubrique 1 </li>
      <li>rubrique 1 </li>
</ul>

**SpaceFrog** · 11/12/2007, 15h13

cela est fort regrettable l'effet graphique était sympa:

cf image

**SpaceFrog** · 11/12/2007, 15h31

au mieux j'arrive à ça

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
28
29
30
31
32
33
34
35
36
37
38
39
<style type='text/css'>
ul { 	list-style-position: inside;
		font-family: arial;
		font-weight:normal;
		font-size:11px;
		line-height:15px;
		margin:0;
		padding: 0 0 0 8px;
		width:145px;
		text-align:left;
		border: solid 1px #001C49;
		border-collapse: collapse;
		background-color:#832D61;
		}
 
li { 	list-style-position: inside;
		font-family:  arial;
		font-weight:normal;
		font-size:11px;
		line-height:15px;
		cursor: pointer;
		padding: 0 0 0 10px;
		margin:0;
		border:0;
		}
.litop {list-style-type: none;
        list-style-position: outside;
		}
 
	</style>
</head>
 
<body>
<ul style="background-color:#E85050;" >
		<li style="background-color:#E85050;" class="litop">Cuisine</a></li>
		<li style="background-color:#E89071;">Cuisine</li>
		<li style="background-color:#E89071;">Laverie</li>
	</ul>
</body>

mais j'aurais aimé que le "titre" soit plus à gauche ...

**SpaceFrog** · 11/12/2007, 15h34

bon en rajoutant juste un padding:0 au liTop ça colle ...

Merci mon fillot

**Bisûnûrs** · 11/12/2007, 15h35

Rajoute un margin-left:-7px; sur ton litop.

**Bisûnûrs** · 11/12/2007, 15h36

Envoyé par SpaceFrog

bon en rajoutant juste un padding:0 au liTop ça colle ...

Merci mon fillot

Ah oui, c'est encore mieux.

**MasterOfChakhaL** · 11/12/2007, 16h05

Salut,

Si la question se posait aussi au niveau de la structure HTML, pour ce genre de cas, j'ai l'habitude d'utiliser un code du style:

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
 
<dl>
  <dt><h1>xxx</h1></dt>
  <dd>
    <ul>
      <li>xxx</li>
      <li>xxx</li>
      <li>xxx</li>
    </ul>
  </dd>
  <dt><h1>xxx</h1></dt>
  <dd>
    <ul>
      <li>xxx</li>
      <li>xxx</li>
      <li>xxx</li>
    </ul>
  </dd>
</dl>

Une liste de définition avec son titre et sa définition (remplie par une liste)

**Candygirl** · 11/12/2007, 16h40

Envoyé par Bisûnûrs

Code :

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

1
2
3
4
5
6
7
<ul>
      <li class="titre">titre</li>
      <li>rubrique 1 </li>
      <li>rubrique 1 </li>
      <li>rubrique 1 </li>
      <li>rubrique 1 </li>
</ul>

Perso je ne suis pas convaincue par ce genre de pratique niveau sémantique. Un ul, comme son nom l'indique, est une liste non ordonnée, soit une énumération de points sans ordre quelconque et donc tous au même niveau.

Placer un titre au même rang que les objets énumérés n'a donc pas vraiment de sens.

[XHTML] ul et data interdit avec xhtml1-strict.dtd

HTML

Discussions similaires

Partager

Partager