Positionnement CSS Question - Tables vs. Absolue vs. DL

Question

Je voudrais aligner les paires étiquette/valeur au centre en utilisant CSS sans utiliser de positionnement absolu ou de tableaux (voir capture d'écran). Dans cette capture d'écran, j'ai positionné la valeur absolue (c'est-à-dire 4 500 $/semaine), puis j'ai fait flotter l'étiquette directement contre elle. Mais l'absolu ne fonctionne pas si bien dans IE et j'ai entendu dire que ce n'est pas une bonne technique.

Mais comment puis-je obtenir cet effet où les étiquettes sont toutes justifiées sans absolu?

alt text http://www.amherstparents.org/files/shot.jpg

Answer 1

Je suis confus, qu'est-ce qui est tabulaire sur ces données? Où sont les enregistrements? Les rangées de différents champs ne font pas vraiment une table dans le sens traditionnel. (Ni le piratage d'avoir deux enregistrements par rangée d'ailleurs)

Si nous nous amusons à cette idée, alors quelle est la différence entre la moitié gauche de la table et la droite? Quels seraient les titres des colonnes s'il y en avait?

Je préfère la suggestion de liste de définition, c'est certainement un meilleur ajustement qu'une table. Et vous n'auriez pas besoin de deux colonnes si tous les DT et DD étaient flottants: left et width: 25%, et dans l'ordre suivant: Cost, Pets, Sleeps, Smoking, etc ... Donc vous pouvez utiliser une liste de définition, comme il devrait vraiment être.

Bien que vous aurez probablement besoin d'un clear: left sur tous les autres DT juste au cas où le contenu de l'un de ces éléments se termine sur deux lignes.

<style> 
    dl 
    { 
     float:left; 
     width:100%; 
    } 
    dt, 
    dd 
    { 
     float:left; 
     width:24%; 
     margin:0; 
     padding:0; 
    } 
    dt 
    { 
     text-align:right; 
     padding-right:.33em; 
    } 
    dd 
    { 
     text-align:left; 
    } 
</style> 
<dl> 
    <dt>Cost:</dt> 
    <dd>$4,500/wk</dd> 
    <dt>Pets:</dt> 
    <dd>No</dd> 
    <dt>Sleeps:</dt> 
    <dd>1</dd> 
    <dt>Smoking:</dt> 
    <dd>No</dd> 
</dl> 

Answer 2

Si vous montrant des données tabulaires il n'y a pas de honte à l'aide d'une table.

Answer 3

Utilisez des séparations de largeur fixe avec la propriété CSS text-align. Ne pas oublier de flotter vos divs à gauche.

Answer 4

Disons que vous utilisez DL, DT et DD:

<dl> 
<dt>Cost:</dt> 
<dd>$4,500/wk</dd> 
<dt>Sleeps:</dt> 
<dd>1</dd> 
</dl> 

Vous pouvez utiliser le CSS approximative (non testé) suivant:

dl { width: 200px; } 
dt { width: 100px; text-align: right; float: left; clear: both; } 
dd { width: 100px; margin: 0; float: left; } 

Edit: Comme Chris Marasti-Georg a souligné :

de plus, si vous voulez 2 colonnes, utilisation 2 listes de définition, et les flotter

Answer 5

@jon a raison, si ses données tabulaires, vous pouvez utiliser une table. Toutefois, si vous ne voulez vraiment pas utiliser une table, je pense que c'est ce que vous voulez:

CSS

.label { 
    min-width: 20%; 
    text-align: right; 
    float: left; 
} 

HTML

<div class="pair"> 
    <div class="label">Cost</div> 
    <div class="value">$4,500/wk</div> 
</div> 
<div class="pair"> 
    <div class="label">Sleeps</div> 
    <div class="value">1</div> 
</div> 
<div class="pair"> 
    <div class="label">Bedrooms</div> 
    <div class="value">9</div> 
</div> 

EDIT @ Chris Marasti-Georg fait remarquer que les listes de définitions seraient plus appropriées ici. Je suis d'accord, mais je suppose que je voulais montrer que la même chose peut être facilement faite avec n'importe quel élément de niveau bloc, et il n'y a rien dans le style par défaut des listes de définitions qui est nécessaire pour atteindre cet objectif.

Answer 6

Que diriez-vous d'utiliser une table pour mettre en page la table et ensuite utiliser CSS pour positionner cette table où vous voulez sur votre page?

Answer 7

expansion sur le poste de Rahul:

CSS

#list { width: 450px; } 
#left { float: left; background: lightgreen; } 
#right { float: right; background: lightblue; } 
dl { width: 225px; } 
dt { width: 100px; text-align: right; float: left; clear: both; } 
dd { width: 100px; margin: 0; float: left; padding-left: 5px; } 

HTML

<div id="list"> 
    <dl id="left"> 
     <dt>Cost:</dt> 
     <dd>$4,500/wk</dd> 
     <dt>Sleeps:</dt> 
     <dd>1</dd> 
     <dt>Bedrooms:</dt> 
     <dd>9</dd> 
     <dt>Baths:</dt> 
     <dd>6</dd> 
    </dl> 
    <dl id="right"> 
     <dt>Pets:</dt> 
     <dd>No</dd> 
     <dt>Smoking:</dt> 
     <dd>No</dd> 
     <dt>Pool:</dt> 
     <dd>No</dd> 
     <dt>Waterfront:</dt> 
     <dd>No</dd> 
    </dl> 
</div> 

Je l'ai testé ce sous FF 3.0.1, IE6 et IE7. La couleur d'arrière-plan est simplement là pour vous aider à visualiser où les colonnes commencent et se terminent.

Answer 8

Une note rapide sur la mise en œuvre de cette utilisation de tables, il existe plusieurs constructions qui rendront cette abondance accessible. Le plus simple serait d'utiliser TH pour les étiquettes et TD pour les valeurs. This site a une discussion agréable, et va plus loin dans des choses comme des en-têtes pour les cellules, etc

Answer 9

J'ai toujours traité les listes de définitions à utiliser pour définitions des articles, et non pour les paires clé/valeur. (9 n'est pas une définition de 'chambres'). Cependant, cette construction particulière (listes de paires clé/valeur) a causé des arguments pendant des années car il n'y a pas de balisage sémantique natif qui le reflète correctement.

Optez pour un DL si vous n'êtes pas anale sur ce qu'est une définition. Ou allez pour une table. Une table avec des paires clé/valeur dans les lignes, si l'étendue d'en-tête/cellule est correctement définie, est parfaitement valide. Je l'ai fait récemment, et il semble que ce soit la représentation la plus sémantiquement précise.