[Résolu] Listes - Aligner le texte en retrait sur plusieurs lignes

Bonjour,

Je n'ai trouvé sur le Forum qu'un sujet qui traitait de cette question mais aucuns exemples.

Sur cette page, certaines listes ont du texte sur plusieurs lignes. Comment faire pour mettre le texte au niveau des deux : à la fin de la liste.

Exemple, Ouest-France février 2006 et les autres le retour à la ligne se met au niveau du début de liste.
HTML

<p class="medias">Ouest-France :</p>
    	<ul>
        	<li><a href="medias/ouestfrance/ouest_france_13_12_2005_lebot_800.pdf">13 décembre 2005 :</a> Mururoa a-t-il contaminé le marin Brestois ?</li>
            <li><a href="medias/ouestfrance/scan_18_02_2006.pdf">18 février 2006 :</a> Et les vétérans des essais nucléaires ?</li>
    		<li><a href="http://www.ouest-france.fr/2006/02/27/brest/Des-reactions-les-victimes-des-essais-nucleaires-et-Fortune-Pellicano--47893809.html">27 février 2006 :</a> Pierre Marhic, Président de l'Association Nationale des Vétérans Victimes des Essais Nucléaires (Anvven) s'intéresse de près au communiqué de Claudine Péron, élue UMP...</li>

CSS

/*Listes Début*/
p.medias
{
font-weight:bold;
margin-left:20px;
}
li
{
margin-left:40px;
list-style-type:circle;
}

Modifié par Auguste (15 Apr 2009 - 16:46)

Salut,

euh... rien compris !

Bonjour,

Désolé mais je ne savais pas trop comment m'expliquer.

Une p'tite image

Ah OK.

Eh bien puisque ton conteneur a une largeur fixe tu aurais pu :

1) rajouter des paragraphes dans les LI après les liens

<li><a href="monlien.html">Ma date :</a> <p>Mon texte</p></li>

2) Utiliser le code suivant (en adaptant les largeurs)

ul li a {
	float: left;
	width: 140px;
}

ul li p {
	width: 600px;
	margin-left: 145px;
}

Merci de ta réponse.

C'est bien ce que je pensais, la balise "P" fait sauter une ligne et les valeurs CSS me décalent certains liens dont le texte est long.

Je cherche peut être la "petite bête" tout en me cassant la tête pour pas grand chose. J'ai mis des "span" avec une valeur, voilà ce que ça donne :


Le problème est que mes liens ne sont pas tous de la même longueur et je me vois mal faire un tas de "span" avec des valeurs différentes, c'est peut être pas très orthodoxe, qu'en penses-tu ? Mais ça passe bien à la validation HTML et CSS.

Je teste sur cette page pour appliquer sur une prochaine qui aura un tas de liens en listes.

Ben avec le P il suffit de jouer sur le padding / margin...

Sinon personnellement je me serais arrangé pour que les dates fassent la même largeur :

01 déc 2008

15 jan 2005

etc.

Merci. Ne m'en sortant pas, j'ai aéré avec quelques "span"

Je ne suis pas du tout encore au point avec les margin et padding

Plus j'en lis plus je suis embrouillé mais je suis pris au jeu
Modifié par Auguste (15 Apr 2009 - 16:46)