28220 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

C'est un fait, dans un curriculum vitae il y a des données de la forme :

Nom : Tsing
Prénom : Tao

Pour les présenter au format XHTML, le plus logique - je pense que vous en conviendrez - c'est d'en faire une listes de définition, comme ceci :

<dl>
<dt>Nom</dt><dd>Tsing</dd>
<dt>Pr&eacute;nom</dt><dd>Tao</dd>
</dl>


Mais le problème, c'est que comme ces couples d'informations (attribut/valeur) sont assez courts en général, il faut avouer que graphiquement les retours à la ligne (parce que l'on utilise des balises de type bloc) ça passe pas très bien... En fait, c'est même très moche Smiley bawling
Voilà à quoi ça ressemble :

a écrit :
Nom
__________Tsing
Pr&eacute;nom
__________Tao


Oui, les _ sont en fait des espaces. Donc effectivement, revenir à la ligne après chaque mot c'est pas génial. J'ai tenté pour corriger ça les display:inline;, mais là j'obtiens une liste illisible sur une ligne qui ressemble un peu à ça :

a écrit :
Nom Tsing Pr&eacute;nom Tao


C'est guère mieux. Si vous, vous aurriez une idée, ne vous géner pas, publiez-là Smiley lol
Modifié par tsing (30 Apr 2005 - 22:30)
Ah oui, je n'ai pas pensé aux tableaux. Mais les tableaux c'est un peu laid aussi... 'fin ça dépends comment on les présente, mais je pense que ça restera toujours moins claire qu'une liste de définitions, de part la nature des informations enregistrées, d'un point de vu sémantique.
Hello tsing,

2 possibilités

1. nouvelle css appliqué a ta source html


dt {
float:left;
clear:both;
}


2. nouveau code html


<dl>
<dt>Nom</dt>
<dd>Tsing</dd>
</dl>

<dl>
<dt>Pr&eacute;nom</dt>
<dd>Tao</dd>
</dl>


et tu garde ta css actuelle

++
Modifié par clb56 (29 Apr 2005 - 18:11)
bonjour,

je ne suis qu'une débutante, donc pardonnez-moi si ma solution n'est pas idéale, mais pourquoi ne pas faire une liste normale?

html:
<ul>
<li><span>Nom: </span>Tsing</li>
<li><span>Prénom: </span>Tao</li>
</ul>


css:
li span {font-weight:bold;}
ul,li {list-style-type: none;margin: 0;padding: 0;}


hannah
Oui c'est aussi une possibilité hannah, où l'on pourrait même utiliser la balise <strong> au lieu de <span>. Sauf que le cas échéant cela reviendrait à déclarer une liste quelconque (ou normale). Or notre liste est une liste particulière puisqu'elle contient des définitions, et puisqu'il existe un type de liste spécialement dédié, autant l'utiliser Smiley smile

Merci clb56 !! Smiley biggrin
Je viens d'essayer la solution 1 et c'est parfait Smiley lol Me manque plus qu'une touche de CSS pour le design et ça sera bon. D'ailleurs voilà ce que j'ai mis :

dt {
float:left;
clear:both;
font-weight:bold;
}

dt:after {
content: " : ";
}

dd{
margin:0px 0px 0px 0px;
}

Modifié par tsing (30 Apr 2005 - 22:30)
bonsoir,

c'est clair que c'est une liste normale, mais je me disais que qq fois la simplicité n'est pas plus mal Smiley lol
contente que tu aies trouvé une solution,

hannah