28173 sujets

CSS et mise en forme, CSS3

[résolu] Listes alignées

Bonjour,

Je cherche à mettre en page un liste avec une sous liste alignée à côté.

Le but est d'obtenir cet effet, c'est à dire la liste de titre qui s'aligne, a côté de la date

upload/9629-Image1.png

J'ai donc des listes imbriquées, mais n'ai pas trouvé le truc ni avec des display in-line ni avec des float.

Le code, visible à http://winckelmuller.com/test.php:

(Edit :Corrigé selon remarque de Mikachu)
<html>
<body>
<style type="text/css">
ul{
background-color:green;
}
ul li{
background-color:purple;
}

ul ul{
background-color:red;
display: list-item;
}
ul ul li{
background-color:blue;
}

</style>
<ul>
	<li>1998
		<ul>
			<li>titre1</li>
			<li>titre1</li>
			<li>titre1</li>

			
		</ul></li>
		
	<li>1999
		<ul>
			<li>titre1</li>
			<li>titre1</li>
			<li>titre1</li>
		</ul>
</li>
	</ul>	
	
	</body>
	</html>


Merci si vous voyez le truc
Modifié par acaton (23 Nov 2006 - 19:30)
Tu as donc d'un côté une date et de l'autre son contenu.
Moi , je te proposerai de te diriger vers ces balises:


<dl>
<dt>date</dt><dd>Contenu du titre</dd>
<dt>date</dt><dd>Contenu du titre</dd>
<dt>date</dt><dd>Contenu du titre</dd>
<dt>date</dt><dd>Contenu du titre</dd>
<div class="clear"></div>
</dl>

Ces balises sont de types block et ont des margin et padding par defaut.

Pour ta balise dt et dd, mets les en float left et donne leur une largeur.
Ca devrait aller ainsi.
Ces balises sont utiles pour ce genre de contenu :
donc <dt> pour la date et la balise <dd>pour le contenu.

A+ Smiley cligne
Modifié par Oryo (23 Nov 2006 - 12:06)
Salut,

Merci d'éditer ton précédent message (bouton en haut à droite du message "éditer") pour corriger l'adresse de ton lien.

Juste pour info le code que tu présente comporte des erreurs car tu as fermé les balises dans le mauvais ordre (il faut refermer dans l'exact ordre inverse d'ouverture). Il faut donc inverser les </li> et </ul> en gras dans la portion de code suivante :
a écrit :
<ul>
<li>1998
<ul>
<li>titre1</li>
<li>titre1</li>
<li>titre1</li>
</li>
</ul>
<li>1999
<ul>
<li>titre1</li>
<li>titre1</li>
<li>titre1</li>
</li>
</ul>
</ul>


Sinon pour ta question, je ne suis pas sur que la liste soit l'élément idéal pour réaliser ce que tu souhaite. La liste de définition serait adéquate.

Regarde le lien ci-dessous :
http://pompage.net/pompe/listesdefinitions/

En bas de page il y'a "Présenter une liste comme un calendrier d'événements"
Cela correspond au style de présentation que tu souhaite faire.

Edit : Pfff grillé Smiley murf
Modifié par Mikachu (23 Nov 2006 - 12:19)
Oui bon enfin il faudrait arrêter la parano vis-à-vis des tableaux car c'est tout à fait indiqué dans ton cas : tu as ici tout simplement un tableau d'événements, avec une colonne "date" et une colonne "description".

Un tableau sera donc tout à fait indiqué sémantiquement, parfaitement accessible, et en prime aucune bidouille CSS à faire pour aligner tout ça.

Ralala... Smiley langue
Oui également surtout que le tableau ne serait pas bien compliqué à réaliser.

EDIT>> regarde la partie de code corrigée par mickachu. Ca ne marche pas ainsi?
Modifié par Oryo (23 Nov 2006 - 13:45)
Super vos réponses, merci. Très efficaces le "calendrier d'événements".

Mais mes listes sont générées par un spip, donc les <dl><dt> ne sont pas générés (je regarde s'il n'y a pas un moyen)

Je voudrais éviter le tableau à cause d'un export en pdf mal adapté à ça.

Je cherche donc si je peux générer les dl dt avec le spip, mais si quelqu'un avait une solution avec des ul li ce serait l'idéal
Pour ceux qui auraient besoin d'une conclusion à ce problème de mise en page couplé à Spip, j'opte finalement pour des tableaux.

Le problème des lignes multiples, qui se posaient dans l'ancienne contribution de génération de pdf de spip, est résolu avec la 1.9 et la mise à jour de la librairie fpdf.

Merci à tous pour votre temps de réfléxion et d'aide.

A+
A.
Sujet clos
Aller à