Problème de mise en page d'une liste

Bonjour,

J'ai un problème de mise en page d'une liste.
Voici ce que j'aimerai faire :



Et voici ce que je n'aimerai pas qu'il se passe :



J'ai entouré l'élément qui pose problème en rouge. Il ne devrait pas passer la ligne verte que j'ai dessiné sur l'image !

Voici le code html :

<div id="oeuvres">
  <dl>
    <dt><strong>Décembre 2006</strong></dt>
    <dd style="float:left; margin-left:0; margin-right:10px;">
      <p><a href="#">Wolfgang Amadeus Mozart</a><br />Kyrie en ré mineur K 341 - Litaniae Lauretanae K 195</p>
    </dd>
    <dd>
      <a href="#"><img src="img/small_plume.png" alt="petite plume" title="Revue de presse" /></a>
    </dd>
  </dl>
  <dl>
    <dt><strong>Février 2006</strong></dt>
    <dd style="float:left; margin-left:0; margin-right:10px;">
      <p><a href="#">Giacchino Rossini - Messe solennelle</a></p>
    </dd>
    <dd>
      <a href="#"><img src="img/small_plume.png" alt="petite plume" title="Revue de presse" /></a>
    </dd>
  </dl>
</div>

Et le code CSS :

#oeuvres {
	margin: 2em 0;
}
#oeuvres dl {
	clear: left;
	margin-bottom: 1em;
}
#oeuvres dt {
	float: left;
	display: block;
	margin: 2px 1em 0 0;
	width: 9em;
	text-align: right;
}
#oeuvres dd {
	margin: 0 0 1em 10em;
}
#oeuvres p {
	margin: 0;
	padding: 0;
}

Quelqu'un aurait-il l'aimabilité de jeter un de ces yeux sur mon code, se serait vraiment sympa !

Merci,

Nicolas
Modifié par Niouk18 (28 Aug 2007 - 11:02)

Hello,

Commence déjà par remettre toutes tes mises en forme CSS dans la feuille de style, là t'en a une partie dans le style="" et une autre partie dans le .css, ça aide pas à la lecture.

Ensuite pour ton problème, essaie de définir une largeur à tes <dd>, ça devrait les laisser sur la même ligne. Là ils s'allongent autant que possible et s'ils n'ont pas la place de tenir à droite, ils se décalent pour tenir en dessous. Si tu les bloque dans une certaine largeur, il ne la dépasseront pas, et iront à la ligne dans cette largeur.


*relis le code*

Ah oui, non, ok tu mets deux <dd>, et seulement l'un des deux est en float:left...
A ta place je mettrais les deux en float:left, en précisant une classe pour chacun (histoire de préciser des largeurs différentes), mais je vois plus trop l'intéret d'utiliser un <dd> pour mettre juste une plume, hmm? Elle sert à quoi cette plume?

Salut,

Merci pour ta réponse !

Oui, exactement, j'ai mis un deuxième <dd> pour la plume. C'est un lien cliquable permettant d'accèder à la revue de presse associée à l'oeuvre. Il n'y a donc pas forcément une plume pour chaque oeuvre.

Le problème de spécifier une largeur au texte c'est que ma plume ne serra plus "collée" à celui-ci.
Un peu plus clairement : si je spécifie une largeur au texte (aux oeuvres), je vais me retrouver avec 3 colonnes. La première étant la date, ça c'est ok. La deuxième le texte (ou l'oeuvre), ça c'est aussi ok. Et finalement la troisième colonne serait la ou les plumes ! C'est là que ça pause problème car je ne voudrais pas une colonne de plume, mais qu'elles restent contre le texte sur leur gauche.

Heu... j'espère que je suis clair... !

Mais je crois que j'ai trouvé une méthode... Désolé j'ai pas le temps de la poster maintenant, je le ferai demain, promis !