Aligner des titres aux données correspondantes [Résolu]

Bonjour à tous,

Je souhaite aligner simplement des données horizontalement, de type "Donnée : valeur". Au départ, j'utilisais des listes de définitions <dl> mais sur vos récents conseils (ici http://forum.alsacreations.com/topic.php?fid=4&tid=62517&s= ) j'ai plutôt utilisé des <h5> et <p>.

Cependant ça ne fonctionne toujours pas parfaitement, les données ne sont pas alignées aux titres comme je le souhaiterais, vous trouverez un exemple ici : http://widjoo-pro.com/error.php

Voici les données html & css :

				<h5>Guillaume XXXXXX, SARL Angiel Media :</h5>
				<p class="p_list">Pour ses conseils avisés depuis novembre 2011</p>
				<h5>Julien XXXXX :</h5>
				<p class="p_list">Pour son aide lors du développement de certains modules PHP</p>
				<h5>Loris XXXX :</h5>
				<p class="p_list">Pour les tests qu'il a réalisé sur notre interface</p>
				<h5>Nicolas XXXXX :</h5>
				<p class="p_list">Pour son aide lors du développement de formules mathématiques</p>
				<h5>Patricia et Henri XXXX :</h5>
				<p class="p_list">Pour leurs tests en situation réelle depuis 2008</p>
				<p class="txt_center">Nous tenons également à remercier l'ensemble de nos utilisateurs qui contribuent au quotidien à notre développement</p>
				<p class="txt_center">N'hésitez pas à <a href="widjoo,contact.html">nous contacter</a> si vous avez des questions, des idées ou des remarques [smile]</p>

h5 {
	width: 250px;
	background-color: #ececec;
	color: #666666;
	margin: 5px 0 2px 0;
	padding: 2px 5px;
	float: left;
	clear: both;
	font-size: 1em;
	font-weight: normal
}
p.p_list {
	margin: 7px 0 2px 5px;
	float: left
}

Je souhaite au final parvenir à un alignement aussi bien que celui-ci (je parle bien de l'alignement et non des couleurs) :



Quelqu'un pourrait m'aider ?
Merci d'avance
Modifié par Gaylord.P (11 Jul 2012 - 15:08)

Pourquoi width:50%; sur la box?
Modifié par jmlapam (10 Jul 2012 - 18:21)

Salut et merci d'avoir répondu

Car sur le site original, la plupart du temps ce sera utilisé sur ce genre de configuration. L'idéal étant bien sûr que ça fonctionne toujours.

h5, p.p_list{
	[#red]display:table;[/#]
	margin: 7px 0 2px 5px;
	float: left
}

Modifié par jmlapam (10 Jul 2012 - 18:24)

La solution de display: table semblait bien, mais malheureusement lorsqu'il y a un long titre, l'affichage des autres paragraphes s'en retrouve décalé : http://www.widjoo-pro.com/error2.php

Salut,


Bah oui c'est pas aligner, et avec clear:both dans ton css pour h5 ça risque pas de le faire, cette arguments te permet de pas mettre les éléments cote a cote ...

Ah oui exact, merci de ta réponse. Lorsque je retire le clear:both, ça fonctionne presque, les titres étant parfois décalés : http://www.widjoo-pro.com/error3.php

Une solution reviendrait à mettre une DIV avec un CLEAR:BOTH avant chaque titre, mais ça fait des centaines de DIV inutile et c'est pourquoi je recherche une solution plus "propre"

Bon, tout ça est quelque peu mal fichu.

Alors partons sur des bases solides. Déjà, une structure HTML un peu plus versatile que celle que tu as utilisée. Concrètement, tu as des sections avec un titre et un ou plusieurs paragraphes, que tu veux distinguer visuellement les unes des autres en affichant chaque section comme une «ligne» dans ta mise en page. Donc on structure tout ça:

<div class="machin">
    <h5>...</h5>
    <p>...</p>
</div>
<div class="machin">
    <h5>...</h5>
    <p>...</p>
</div>

(en passant, un H5 je trouve ça vachement étonnant... tu as vraiment 4 niveaux de titre dans le plan de ton document avant d'arriver au niveau de ces titres? moi je dépasse jamais H4, et même dépasser H3 c'est pas tous les jours...)

Ensuite, côté mise en page, et en partant du principe que la largeur occupée par chaque ligne n'est pas connue, on va procéder ainsi:
1. Comme précisé dans le Guide de survie du positionnement CSS (à lire ou relire), la base du positionnement CSS c'est de rester autant que possible en position: static; float: none; etc. (rendu par défaut, blocs qui restent dans le flux). Donc déjà le float partout ou le clear partout, on oublie.
2. Pour mettre deux éléments côte-à-côte, tu peux utiliser pas mal de choses, dont les flottants, display:inline-block et display:table-cell.
3. Si tu utilises float, il faut faire flotter seulement une seule des deux colonnes, donc ici tes titres. Pour les paragraphes, une marge à gauche de la largeur du flottant, ou bien un contexte de formatage pour s'adapter automatiquement à la largeur du flottant, ça fera l'affaire. Enfin, il faut gérer le dépassement des flottants, pourquoi pas avec un overflow:hidden sur le conteneur (DIV).
4. Si tu utilises display:inline-block, il faut passer en inline-block les deux éléments à mettre côte-à-côte, et fixer leur largeur (au moins en pourcentages), ce qui peut être problématique vu tes besoins de mise en page.
5. Si tu utilises display:table-cell, il faut passer en table-cell les deux éléments à mettre côte-à-côte, et éventuellement en display:table ou display:table-row leur parent direct (pas indispensable, mais ça dépend de tes besoins de mise en page exacts).

Voilà, normalement tu as tout ce dont tu as besoin pour mieux gérer ta question de mise en page.

Une fois de plus, merci pour ta réponse, ça fonctionne.

En fait mes sites utilisent déjà des <h1> / <h2> / <h3> / <h4> ; le soucis c'est que les titres <h5>, arrivent avant les <h4> ... bon, c'est un détail, je ferai avec.

Au départ j'utilisais des listes de définitions pour ce genre de chose, mais sur ce forum on m'a dit que ce n'était pas adapté et de plutôt utiliser les titres. Ce que je souhaite, c'est vraiment des données simples ; dans 95% du temps ce sera des choses du genre :
- Identifiant : XXX ;
- Mot de passe : XXX ;
- Nombre de facture : XXX ;

Exemple d'utilisation sur la capture ci-dessous : http://www.widjoo-pro.com/capture.png

J'espère être dans la bonne direction et que ce sont bien des <hN> <p> qu'il faut utiliser ^^

Gaylord.P a écrit :
En fait mes sites utilisent déjà des <h1> / <h2> / <h3> / <h4> ; le soucis c'est que les titres <h5>, arrivent avant les <h4>

Donc ils ne sont pas censés être des H5, mais des H4 ou H3 ou H2 (en fonction de leur place dans la hiérarchie de la page).

Gaylord.P a écrit :
Ce que je souhaite, c'est vraiment des données simples ; dans 95% du temps ce sera des choses du genre :
- Identifiant : XXX ;
- Mot de passe : XXX ;
- Nombre de facture : XXX ;

Moi je code ça en <strong>Identifiant:</strong> XXX (dans un P ou dans un LI) en général, si ce sont vraiment des données courtes.
Si le contenu après le «descripteur» est un peu plus long, ça vaut le coup de passer par des titres HN. Une question à se poser: si on dresse automatiquement un plan de la page, est-ce que tes descripteurs doivent apparaitre comme titres dans le plan ou bien le résultat serait excessivement détaillé et lourd?
Modifié par fvsch (11 Jul 2012 - 14:30)

Bon après réflexion je pense que tu as raison et que ce sera bien plus simple de passer par les listes <li>, tu as raison sur le point que si les éléments sont affichés sans style, seule des <li> sont appropriés ; j'aurais du y penser plus tôt ...

Merci beaucoup en tous cas