28172 sujets

CSS et mise en forme, CSS3

[Résolu] Mise en forme de données

Bonjour à tous,

pour mon premier message sur le forum, je vous expose un problème que je n'arrive pas à résoudre correctement.

J'ai quelques données à présenter sur une personne (nom, prénom, nationalité, etc...) dans un bandeau en haut de ma page.
Je voudrais qu'elles s'affichent dans 3 colonnes, et que mon bandeau ait une bordure.

Pour le HTML, j'ai pensé utiliser les balises de définitions DL DT et DD.
voici mon code : 

<div id="bandeauSuperieur">
	<dl>
		<dt>Nom:</dt>
		<dd>SMITH</dd>
	</dl>
	<dl>
		<dt>Prénom:</dt>
		<dd>JOHN</dd>
	</dl>
	<dl>
		<dt>Nationalité:</dt>
		<dd>ANGLAIS</dd>
	</dl>
	<dl>
		<dt>Identifiant:</dt>
		<dd>GB10700001</dd>
	</dl>
	<dl>
		<dt>Date de naissance:</dt>
		<dd>01/03/1975</dd>
	</dl>
	<dl>
		<dt>Date du diplome</dt>
		<dd>N/A</dd>
	</dl>
	<dl>
		<dt>Langue</dt>
		<dd>Anglais</dd>
	</dl>
</div>


pour le mettre en page, voici le css :

#bandeauSuperieur {
	display: block;
	border-width: 1px;
	border-style: solid;
	height: 75px;
}
			
dl, dt, dd {
	margin: 0px;
	padding: 0px;
}
		
dl {
	float: left;
	width: 33%;
}
		
dt {
	display: inline;
	min-width: 200px;
	font-weight: bold;
}
			
dd {
	display: inline;
	margin: 0px;
	padding: 0px;
	font-weight: normal;
}


Ceci marche, mais grâce à une "astuce" que je n'aime pas beaucoup: le height de mon div que j'ai été obligé de spécifier.
Sans ça, mon div est tout plat car les éléments de définition ne s'y trouvent pas vraiment, à cause des float: left.

Y a-t-il quelque chose à faire de plus propre que cette "triche"?
et mon choix HTML de prendre les DL,DT et DD est-il judicieux?
Modifié par Elmilouse (11 Mar 2008 - 10:05)
Elmilouse a écrit :
mon choix HTML de prendre les DL,DT et DD est-il judicieux?

Non, il ne l'est pas, mais c'est déjà une très bonne chose que tu t'interroges à ce sujet. Smiley smile
Un tableau (élément <table>) serait ici parfaitement adapté.
Ghost > Merci de ta solution, elle fonctionne et j'ai le rendu que je souhaitais.

Benjamin > J'avais choisi les listes de définitions car je pensais que les renseignements que j'affiche sur la personne "définissent" la personne. Un tableau n'est-il pas moins bon en termes d'accessibilité?

Edit: en testant sur IE6... mauvaise surprise, le cadre ne démarrait pas en haut Smiley confus un zoom: 1 dans le style de la div a résolu le problème. j'ai pas tout compris, il faut que je relise de la doc sur ces overflow et autres zooms mystérieux Smiley smile
Modifié par Elmilouse (10 Mar 2008 - 18:37)
Sujet clos
Aller à