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

Version imprimable

11/12/2007, 14h39
SpaceFrog

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

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 :(
11/12/2007, 14h47
Bisûnûrs

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.
11/12/2007, 14h53
SpaceFrog

il n'y a pas comme pour les fieldset un legend ou un truc du genre
graphiquement ça donnait un joli résultat ...
11/12/2007, 14h59
Bisûnûrs
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:

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>
11/12/2007, 15h13
SpaceFrog

1 pièce(s) jointe(s)

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

cf image

au mieux j'arrive à ça

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

11/12/2007, 15h34
SpaceFrog

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

Merci mon fillot ;)
11/12/2007, 15h35
Bisûnûrs

Rajoute un margin-left:-7px; sur ton litop.
11/12/2007, 15h36
Bisûnûrs

Citation:

Envoyé par SpaceFrog

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

Merci mon fillot ;)

Ah oui, c'est encore mieux. :mrgreen:

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:

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)

11/12/2007, 16h40
Candygirl
Citation:
Envoyé par Bisûnûrs

Code:

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.