28172 sujets

CSS et mise en forme, CSS3

Aligner <dt> et <dd> horizontalement.

Bonjour à tous,

Je souhaite aligner des <dt></dt> et des <dd></dd> de manière horizontale. J'ai développé ceci en CSS pour obtenir un résultat satisfaisant - le code vient en partie de Openweb.eu, mais ça fait super longtemps -.

<html>
	<head>
		<style>
dl {
	width: 500px;
	margin: 5px
}
dl dt {
	width: 250px;
	background-color: #ececec;
	color: #666666;
	margin-bottom: 5px;
	padding: 2px;
	float: left;
	clear: both
}
dl dd {
	color: #666666;
	margin: 0 0 5px 255px;
	padding: 2px
}
		</style>
	</head>
	<body>
		<dl>
			<dt>Test :</dt>
			<dd>Ceci est un test Ceci est un test Ceci est un test Ceci est un test Ceci est un test</dd>
			<dt>Ceci est un test Ceci est un test Ceci est un test Ceci est un test Ceci est un test :</dt>
			<dd>Test</dd>
			<dt>Test :</dt>
			<dd>Ceci est un test Ceci est un test Ceci est un test Ceci est un test Ceci est un test</dd>
		</dl>
	</body>
</html>


Le problème est que lorsque le contenu du <dt> est trop grand, le <dd> suivant se retrouve décalé, comme vous pouvez le voir sur l'image jointe.

Smiley smile upload/502-bug.png

Savez-vous comment résoudre ce problème ?
Merci d'avance
Administrateur
Bonjour,

faute de pouvoir rajouter un conteneur autour des dt et dd, en faisant flotter la partie droite on arrive au résultat : http://jsfiddle.net/PhilippeVay/Y2MnS/


<html>
	<head>
		<style>
dl {
    width: 500px;
    margin: 5px;
    outline: 1px dotted red;
}
dl dt {
    width: 250px;
    background-color: #aaa;
    color: #666666;
    margin-bottom: 5px;
    padding: 2px;
    float: left;
    clear: both;
}
dl dd {
    color: #666666;
    background: yellow;
    margin: 0 0 5px 0;
    padding: 2px;
    float: left;
    width: 242px;
}
		</style>
	</head>
	<body>
		<dl>
			<dt>Test :</dt>
			<dd>Ceci est un test Ceci est un test Ceci est un test Ceci est un test Ceci est un test</dd>
			<dt>Ceci est un test Ceci est un test Ceci est un test Ceci est un test Ceci est un test :</dt>
			<dd>Test</dd>
			<dt>Test :</dt>
			<dd>Ceci est un test Ceci est un test Ceci est un test Ceci est un test Ceci est un test</dd>
		</dl>
	</body>
</html>


Rajouter un width à droite n'est pas un souci puisqu'il y en avait déjà sur le conteneur et à gauche ...
Sinon tu es vraiment en train d'utiliser une liste de définition dans un usage pour lequel elle a été prévue ? HTML5 peut-être ? Perso je crois que ça ne m'est jamais arrivé ...
Salut et merci d'avoir répondu,

En fait c'est surtout pour des données de ce type :
Nombre de clients : X clients
Nombre de factures : X factures

Les listes <dt> me semblent donc approprié, mais je n'en suis pas tout à fait certain.
En plus de ça, j'ai volontairement mis un "width" à la DIV, mais dans le code original il n'y en a pas. Smiley sweatdrop
Pourquoi tu ne fais pas une simple liste ?


<!doctype html>
<html>
	<head>
		<style>
ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

li {
	margin: 0 0 5px 0;
	padding: 0;
	zoom: 1;
}

li:before, li:after {
  content: "";
  display: table;
}

li:after {
  clear: both;
}

h2 {
	width: 250px;
	margin: 0;
	padding: 0;
	float: left;
	background-color: #ececec;
	color: #666666;
	font-size: 1em;
}

p {
	margin: 0 0 0 5px;
	padding: 0;
	float: left;
	color: #666666;
}
		</style>
	</head>
	<body>
		<ul>

			<li>
				<h2>Test :</h2>
				<p>Ceci est un test Ceci est un test Ceci est un test Ceci est un test Ceci est un test</p>
			</li>

			<li>
				<h2>Test :</h2>
				<p>Ceci est un test Ceci est un test Ceci est un test Ceci est un test Ceci est un test</p>
			</li>

			<li>
				<h2>Test :</h2>
				<p>Ceci est un test Ceci est un test Ceci est un test Ceci est un test Ceci est un test</p>
			</li>

			<li>
				<h2>Test :</h2>
				<p>Ceci est un test Ceci est un test Ceci est un test Ceci est un test Ceci est un test</p>
			</li>

			<li>
				<h2>Test :</h2>
				<p>Ceci est un test Ceci est un test Ceci est un test Ceci est un test Ceci est un test</p>
			</li>

		</ul>
	</body>
</html>
Et bien en fait j'ai toujours cru que les listes de définitions étaient à privilégier pour ce type de données Smiley ohwell
Gaylord.P a écrit :
Les listes <dt> me semblent donc approprié, mais je n'en suis pas tout à fait certain.

Non, ici il te faut des titres HN.
Après il faudrait voir avec un contenu un peu plus précis. Mais à partir du moment où tu as un titre qui décrit un contenu, plutôt qu'un contenu qui explique un terme, c'est du HN et pas du DL.

jb_gfx a écrit :
Pourquoi tu ne fais pas une simple liste ?

À partir du moment où tu as des titres HN, imbriquer chaque section implicite (le HN et le contenu qui le suit jusqu'à l'apparition d'un nouveau HN de même niveau ou de niveau supérieur) dans un LI est redondant.
Sujet clos
Aller à