Comment obtenir cette mise en forme de mon texte ?

Bonjour.

Merci d'avoir cliqué sur mon sujet. Voici ce que j'aimerais faire...
[URL=http://www.casimages.com/img.php?i=120218011351226485.png] http://nsa21.casimages.com/img/2012/02/18/120218011351226485.png [/URL]

A l'intérieur d'une div rectangulaire (représentée en turquoise), j'aimerais créer un petit conteneur comprenant :
- un cadre avec le titre (beige) de largeur fixe,
- un cadre avec le descriptif (gris) de largeur fixe mais de hauteur automatique car le texte fera de quelques mots à quelques lignes.

Ce petit conteneur serait utilisé plusieurs fois de suite, comme dans l'exemple.

J'ai réussi à obtenir le résultat escompté en faisant 3 class : une pour le conteneur, une pour le cadre beige et une pour le cadre gris.

Je suis moyennement satisfait car mon code est déjà plein de <div> imbriqués et cette petite mise en forme en ajoute encore. C'est presque aussi lourd que si j'avais fait un bon vieux tableau.

Est-ce que ça vous choque ? Auriez-vous une solution plus simple pour mettre cela en forme en intervenant directement sur <p>, par exemple ?



Merci pour vos avis.

div et p étant tous deux des éléments stylables... suffirait d'appliquer le style que tu as donné à tes div aux éléments p.

Mais évidemment, dans ce cas il ne faut pas avoir plusieurs paragraphes par bloc.

Cela dit, à voir ta maquette, tu présente un tableau. Et en ce sens, l'élément table est l'élément sémantique correct et je ne vois aucun problème à son utilisation. Ce qui est "mal", c'est d'utiliser des tables pour la mise en page. Utiliser <table> quand on utilise un tableau, ça tombe sous le sens

Merci pour ta réponse.

Utiliser un tableau me faciliterait bien la vie.

Ah cool ! Utiliser un tableau serait légitime dans ce cas ? Si je mets un tableau, tu penses que ça ne donnera pas trop l'impression de quelqu'un qui utilise les vieilles techniques pour contourner une difficulté ?

Merci.

Bien sûr que non. Ce serait bien stupide de commencer à émuler des tableaux avec des balises non prévues pour cela...

Bonjour

Plusieurs éléments de réponse...

Pas de tableau : Cela n'a pas de sens vu qu'il n'y a que 2 colonnes.

Ensuite, soit tu fais comme tu l'évoquais :

<div class="produit">
<p><span class="titre">Nom du produit</span>blabla</p>
<p><span class="titre">Nom du produit</span>blabla</p>
<p><span class="titre">Nom du produit</span>blabla</p>
</div>

En ce qui me concerne, j'aurais mis la même chose sous forme de liste.

<ul class="produit">
<li><span class="titre">Nom du produit</span>blabla</li>
<li><span class="titre">Nom du produit</span>blabla</li>
<li><span class="titre">Nom du produit</span>blabla</li>
</ul>

Voilà.

A+ / F.

Vaxilart a écrit :
Cela dit, à voir ta maquette, tu présente un tableau.

Hmm, disons que c'est sujet à interprétation.
Moi je verrais plutôt des titres HN et des paragraphes, plutôt qu'un tableau (la présentation en colonnes n'est que... de la présentation, et ne dicte pas la sémantique à utiliser). Un tableau pourrait passer ici, sous réserve qu'on ne fasse qu'un seul tableau (et pas 3 petits tableaux de une ligne), et que les séparations visuelles ne soient pas codées comme une ligne ou une cellule vide.

En partant d'une structure pas trop lourde:

<div class="machin">
  <h2>Nom du produit</h2>
  <p>Du bla bla.</p>
</div>

- On peut utiliser la bonne vieille technique des colonnes factices.
- Ou bien du display:table-cell (avec display:table; et table-layout:fixed; sur le DIV).

Pour récapituler sur des structures HTML qui vont bien:

Tableau simple:

<table>
  <tr>
    <th scope="row">Intitulé</th>
    <td>Détails</td>
  </tr>
  <tr>
    <th scope="row">Intitulé</th>
    <td>Détails</td>
  </tr>
</table>

Sections titrées:

<div>
  <h2>Intitulé</h2>
  <p>Détails</p>
</div>
<div>
  <h2>Intitulé</h2>
  <p>Détails</p>
</div>

Liste:

<ul>
  <li>
    <strong>Intitulé</strong>
    Détails
  </li>
  <li>
    <strong>Intitulé</strong>
    Détails
  </li>
</ul>

Une liste peut être adaptée si on a peu de contenu dans chaque item. Si certains «Détails» sont des blocs de trois paragraphes, peut-être que les contenus sont suffisamment riches pour mériter un découpage en sections via des titres de section (H2 dans mon exemple, niveau de titre à adapter à la structure de la page). Quant au tableau, ce n'est pas ma solution préférée mais pourquoi pas.

Par contre, on évitera l'abomination qui consiste à écrire <span class="titre">.

Pour info, la méthode que j'applique quand il s'agit de choisir une structure HTML sémantique:

a écrit :
1. Limiter la charge sémantique.
2. Choisir une solution à peu près correcte.
3. L'appliquer sans se prendre la tête.

Salut,

En plus des pistes suggérées par fvsch (Florent pour les intimes), on peut envisager la liste de définitions :

<dl>
  <dt>Intitulé</dt>
    <dd>Détails</dd>
  <dt>Intitulé</dt>
    <dd>Détails</dd>
  <dt>Intitulé</dt>
    <dd>Détails</dd>
</dl>

La liste de définitions comprise au sens strict serait fausse ici. Par exemple si j'ai:

<dl>
  <dt>Nom du produit</dt>
  <dd>Fujifilm X10</dd>
</dl>

«Nom du produit» est un contenu qui qualifie «Fujifilm X10». Utiliser un HN ou un TH serait donc adapté. Par contre dans une liste de définitions la relation fonctionne dans le sens inverse: c'est le DD qui qualifie le DT. Et en termes de logique pure, on ne peut pas dire que «Fujifilm X10» qualifie «Nom du produit». Autrement dit: un «Nom de produit» ce n'est pas nécessairement «Fujifilm X10», ça peut être une infinité de choses différentes, et «Fujifilm X10» n'est pas une définition correcte de ce terme.

Maintenant, les spécifications HTML4 et HTML5 ont toujours fait un peu n'importe quoi avec l'élément DL. HTML4 parlait de définitions mais donnait un exemple qui n'avait rien à voir (un dialogue). HTML5 élargit le sens de DL à toute relation de description (ce qui rend donc caduque mon analyse ci-dessus ), et du coup en HTML5 la structure proposée par Victor est correcte.
Modifié par fvsch (19 Feb 2012 - 15:36)