Liste à puces "complexe"

[v4np13]

Bonjour à tous,

j'essaye de faire truc un peu compliqué et je n'y arrive pas. Mon objectif est une belle présentation et au final une validité w3c.

Voici ce que je veux faire:

# Titre
   Adresse
   Téléphone
   URL
* Titre
   Adresse
   Téléphone
   URL

Donc une liste à puce qui comprendrait une puce au titre, que ce soit aligné mais sans puces pour le reste. Il y a deux types de puces qui sont choisis en fonction des tests PHP.

Comment pourrais-je coder celà? J'ai essayé avec des paragraphes mais list-style n'est pas pris en compte, j'ai essayé avec <ul><li>...</li></ul>, problème de validité. Et enfin, j'ai essayé aussi avec dl, dt, dd, là encore une fois le list-style n'est pas pris en compte par le <dt>.

Merci d'avance

[Sebastien]

List-style ne concerne que les listes.

Le mieux, si je t'ai bien compris est :

-Faire une pseudo-puce pour tes titres <hn> en jouant avec la padding et l'image de fond (tu décales vers la droite le texte dans le bloc afin de libérer de la place pour ta puce qui est en fait une image en background)

-Desactiver l'affichage des puces des listes non-ordonnées, en jouant seulement sur l'indentation.

[TheRec]

Bonjour,

j'ai essayé avec <ul><li>...</li></ul>, problème de validité

<{POST_SNAPBACK}>

Le(s)quel(s) ? Peux-tu donner les messages d'erreur fourni par le validateur W3C ?

Pour rappel, un liste à plusieurs niveau a cette syntaxe :

<ul>
  <li>Titre 1
    <ul>
      <li>Adresse 1</li>
      <li>Téléphone 1</li>
      <li>URL 1</li>
    </ul>
  </li>
  <li>Titre 2
    <ul>
      <li>Adresse 2</li>
      <li>Téléphone 2</li>
      <li>URL 2</li>
    </ul>
  </li>
</ul>

Et non "<ul><li>Tittre</li><ul><li>Adresse1</li></ul></ul>" comme on le voit si souvent...

À noter que certain navigateur prennent en compte les retour à la ligne entre les éléments <li>...donc l'idéal est de tout mettre sur une ligne s'il y a des soucis d'alignement...

Pour varier les puces tu peux utiliser deux méthode :

• background-image avec ta puce personnalisée et list-style-type:none;
  
• list-style-image: url('chemin/image.gif')
  

Pour l'aterner défini plusieurs classes en CSS et alterne la classe utilisée en fonction de tes besoins, dans le style :

<li class="<?php echo $cssclass; ?>">Titre</li>

[captain_torche]

En jouant sur les listes imbriquées, ça devrait passer correctement :

<ul>
	<li>1
		<ul>
			<li>1.1</li>
			<li>1.2</li>
		</ul>
	</li>
	<li>2</li>
	<li>3</li>
</ul>

Edit : Grillé

Modifié 10 Avril 2006 par captain_torche

[v4np13]

Merci beaucoup pour vos réponses, je pense que je vais utiliser la méthode avec les listes à puces imbriquées. Le plus simple à mes yeux.