28221 sujets

CSS et mise en forme, CSS3

Positionnement horizontal d'une liste de définitions

Pages :
Bonjour bonjour, j'ai un petit problème de positionnement.
Voici mon code html :
<dl>
  <dt>Nom 1</dt>
    <dd>Info 1.1</dd>
    <dd>Info 1.2</dd>
    <dd>Info 1.3</dd>
  <dt>Nom 2</dt>
    <dd>Info 2.1</dd>
    <dd>Info 2.2</dd>
    <dd>Info 2.3</dd>
  <dt>Nom 3</dt>
    <dd>Info 3.1</dd>
    <dd>Info 3.2</dd>
    <dd>Info 3.3</dd>
  <dt>Nom 4</dt>
    <dd>Info 4.1</dd>
    <dd>Info 4.2</dd>
    <dd>Info 4.3</dd>
</dl>


Avec cela, je voudrais afficher les dt côte à côte. Et sous chaque dt, je voudrais les infos correspondantes. Je connais la largeur de chaque bloc, mais pas sa hauteur ce qui m'empêche de faire un positionnement absolu.

Une idée ?
Merci. Je connais déjà ce lien et il ne m'a pas renseigné pour mon cas précis (sauf si j'ai mal lu évidemment).
En fait, je voudrais faire comme l'avant dernier exemple (Styler une liste de définitions pour en faire une galerie d'images) mais avec une seule dl. Parce qu'avec 3-4 dl, c'est "facile".
À mon avis, le plus simple serait ceci :

<dl style="float: left;>
  <dt>Nom 1</dt>
    <dd>Info 1.1</dd>
    <dd>Info 1.2</dd>
    <dd>Info 1.3</dd>
</dl>
<dl style="float: left;>
  <dt>Nom 2</dt>
    <dd>Info 2.1</dd>
    <dd>Info 2.2</dd>
    <dd>Info 2.3</dd>
</dl>
<dl style="float: left;>
  <dt>Nom 3</dt>
    <dd>Info 3.1</dd>
    <dd>Info 3.2</dd>
    <dd>Info 3.3</dd>
</dl>
<dl style="float: left;>
  <dt>Nom 4</dt>
    <dd>Info 4.1</dd>
    <dd>Info 4.2</dd>
    <dd>Info 4.3</dd>
</dl>

Oups ! Ça a été dit ! Smiley confused
Modifié le 06 Jan 2005 - 16:04
Evidemment, ce serait plus facile Smiley cligne .
Mais, point de vue sémantique, je perd du sens, puisque les quatre "parties" correspondent à des articles(leur titre, leur résumé, leur type, etc).

Donc, j'aimerais garder ce code (en pouvant rajouter des class évidemment).
Modifié le 06 Jan 2005 - 16:10
Ehh oui, ajouter du code à des fins de mise en page n'est pas des plus conseillé en effet Smiley cligne Je rejoins donc rik24d sur ce point Smiley lol

Pour la solution, je sais pas trop par contre :s
Je dois partir alors je pitch ceci :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr-ca" xml:lang="fr-ca" xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title></title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta http-equiv="content-style-type" content="text/css" />
  <style type="text/css" media="all">
* {padding: 0; margin: 0;}
dt, dd { 
   position: absolute;
}
.L0 {left: 0;}
.L1 {left: 100px;}
.L2 {left: 200px;}
.L3 {left: 300px;}
.T0 {top: 0;}
.T1 {top: 100px;}
.T2 {top: 200px;}
.T3 {top: 300px;}
  </style>
 </head>
 <body>
<dl>
  <dt class="L0 T0">Nom 1</dt>
    <dd class="L0 T1">Info 1.1</dd>
    <dd class="L0 T2">Info 1.2</dd>
    <dd class="L0 T3">Info 1.3</dd>
  <dt class="L1 T0">Nom 2</dt>
    <dd class="L1 T1">Info 2.1</dd>
    <dd class="L1 T2">Info 2.2</dd>
    <dd class="L1 T3">Info 2.3</dd>
  <dt class="L2 T0">Nom 3</dt>
    <dd class="L2 T1">Info 3.1</dd>
    <dd class="L2 T2">Info 3.2</dd>
    <dd class="L2 T3">Info 3.3</dd>
  <dt class="L3 T0">Nom 4</dt>
    <dd class="L3 T1">Info 4.1</dd>
    <dd class="L3 T2">Info 4.2</dd>
    <dd class="L3 T3">Info 4.3</dd>
</dl>
 </body>
</html>
Evidemment, c'est une solution convenable, mais pas dans mon cas.
J'ai précisé que je ne connaissais pas la hauteur (si le texte est plus ou moins long, ça varie).

Arf, c'est vraiment pas facile ce truc.
On peut faire avec des floats, donc float left pour le groupe de gauche, float right pour le groupe de droite, et margin 0px auto pour le milieu. Malheureusement comme vous le savez tous, le groupe de droite devra se trouver avant le groupe du milieu, ce qui est gênant...
FlorentG a écrit :
On peut faire avec des floats, donc float left pour le groupe de gauche, float right pour le groupe de droite, et margin 0px auto pour le milieu. Malheureusement comme vous le savez tous, le groupe de droite devra se trouver avant le groupe du milieu, ce qui est gênant...


Bonjour FlorentG et bienvenue à toi sur ce forum.

Est-ce une réponse à la question de ce sujet : Positionnement horizontal d'une liste de définitions ? Smiley biggol

N'hésites pas si le cœur t'en dit à venir te présenter au bar du Forum.
Smiley cligne
rik24d a écrit :

Mais, point de vue sémantique, je perd du sens...

Je ne vois pas en quoi un <dl> aurait plus de sens que 4 <dl>.
Il ne faut pas voir de la "sémantique" là où il n'y en a pas.
AMHA, un <dl> n'est qu'un conteneur à <dt> et <dd>.
Si tu veux positionner tes <dt> et <dd> côte à côte, le mieux est de les placer dans un conteneur, en l'occurence un <dl>.
Modérateur
Bien que je n'ailles pas encore pris position sur le sujet, j'aimerais donner l'opinion que j'ai pour le moment. Ce qui me dérange un peu quant à l'utilisation de plusieurs DL, une DL pour chaque image, c'est que si on se base sur le nom de la balise, Definition List - Liste de définition, je crois que normalement, cette balise devrait être utilisée pour présenter une liste d'éléments, et non pas pour servir uniquement de conteneur pour un élément.

Dans le même ordre d'idée, ce serait comme utiliser une liste OL ou UL pour n'afficher qu'un seul élément.

Ca me semble pas très sain tout ca. Smiley smile N'y a-t-il pas déjà eu une discussion à ce propos sur les forums ?
Oui, les dl ont été le sujet de nombreux débats. Dans notre cas, 4 dl ne sont pas sémantiquement exacts. On a une liste de définitions (au pluriel définitions Smiley cligne ), donc un seul dl, avec plusieurs termes dedans Smiley smile
Je suis d'accord avec Merkel. Mes 4 articles étant des... articles, ils doivent être présentés dans le même conteneur. Et comme on explique ce qu'ils contiennent, on en fait une définition. D'où la liste de définition.

Edit : Arf, grillé.
Modifié le 06 Jan 2005 - 23:08
Modérateur
J'ai surement confondu le présent sujet avec un autre. Je pensais que c'était pour une gallerie photo. Ceci dit, ca ne change rien à mes précédents propos.

Pour ce qui est de la présentation de plusieurs articles, je ne suis pas certain que l'utilisation d'une DL soit correcte. Non pas que ce soit mauvais, étant donné que la description d'une liste de définition est très large et elle peut être facilement interprétée n'importe comment. J'ai quand même certaines réserves pour ca. Comme je l'avais déjà mentionné dans un autre sujet, si on utilise une DL aussitôt que notre présentation entre dans ses critères d'utilisation, ca risque d'amener les gens vers certains abus. J'ai l'impression qu'aussitôt qu'une partie du document aura un Titre et un Contenu, ou va vouloir mettre ca dans une liste de définition. Je ne sais pas pour vous, mais cette balise je l'utiliserais uniquement pour la définition de mots, de fichiers, de termes etc, comme un dictionnaire par exemple, et non pas à tout vent pour tout et n'importe quoi.

Je sais bien que dans ce cas-ci, c'est une liste d'articles, ayant un titre, une date et le texte de l'article. Ca semblerait idéal d'utiliser une DL, mais permettez-moi de ne pas en être convaincu. Si je me trompe, dites-le moi, mais je crois que les DD servent à décrire ce qui se trouve dans le DT. Si on parle d'un article, est-ce qu'on décrit vraiment le titre ? Est-ce qu'on explique le titre, ce qu'il est ou ce qu'il signifie ? Bof... pas sûr sûr... Dans le cas des articles, le titre sert plutôt de résumé au texte. Vous ne croyez pas ?

Concrètement, qu'apporte comme avantage, que ce soit au niveau machine ou niveau du l'utilisateur non-voyant ou handicapé, l'utilisation d'une liste de définitions pour présenter les 4 articles, versus l'utilisation de divs et de hn ?
Ah oui oui oui...

C'est vrai que ça se défend. Comme quoi la sémantique est très loin d'être une science exacte.

Alors plutôt utiliser une liste non-ordonnée avec des hn ?
<ul>
  <li>
    <h3>Titre</h3>
    <p>Date</p>
    <p>Résumé</p>
  </li>
</ul>
Modérateur
Personnellement, j'utiliserais quelque chose se rapprochant de ceci :


<div class="article">
   <h3>Titre</h3>
   <p>Date</p>
   <p>Résumé</p>
</div>


Ensuite, tu peux mettre les div en float left pour qu'ils soient en ligne. Simple suggestion, mais il y a peut-être mieux.
Pages :
Sujet clos
Aller à