2010-11-07 27 views
0

Je travaille sur un projet d'économie en ce moment et un composant web était une suggestion dans les directives, alors j'ai sauté dedans. Fondamentalement, je dois tracer un graphique du déficit budgétaire des États-Unis et décrire certaines dates importantes.Faire fonctionner correctement les Divs en HTML Tableau

Le graphique à barres me cause cependant un certain chagrin. J'ai construit des graphes auparavant en générant une image avec php, mais j'ai décidé que je pourrais aussi bien renforcer mes compétences html (j'ai appris PHP, javascript et css avant html, en quelque sorte).

À l'heure actuelle, la table est parfaite, sauf pour le fait que mes divs (mes barres) ne s'affichent pas correctement dans leur cellule appropriée. Fondamentalement, la table a 31 colonnes (représentant les dates 1980-2010) et j'essaye d'y placer un div coloré pour le faire ressembler à une barre.

Column 
------------ 
|   | 
|   | 
|   | 
|   | 
|   | 
|   | 
|   | 
| -------- | 
| |  | | 
| | Div | | 
| |  | | 
| |  | | 
| |  | | 
| |  | | 
------------ 

La page se trouve ici: here.

Comme vous pouvez le voir, il n'y a pas de barres apparaissant. Pourquoi cela pourrait-il être? J'utilise l'outil inspecter élément sur Google Chrome et ne peut pas sembler repérer quelque chose de suspect.

Répondre

2

La manière super propre est d'écrire toute la page en div.

Le problème est le DIV n'a pas de contenu. Personnellement je créerais un "shim" de 1px heigh à la couleur (couleur) que vous voulez, puis j'enverrais la hauteur% à la hauteur appropreate. (ceci vous pouvez également changer dans le côté de client de javascript (ou jquery), cela rendra dans plus de navigateur et vous pouvez ajouter un éclat à la cale etc.

La raison de l'image est DIV besoin d'objets "solides" comme le texte ou des images, essayez juste de mettre un "& nbsp;" dans votre div Il faut alors montrer ...

Cela fonctionne.

<td style="vertical-align:bottom"> 
     <div width="30" style="background-color:#FF0000; height:50%;">&nbsp;</div> 
</td> 

@Sarfraz, cet article est 2007 et est bogué dans browers (consultez les commentaires)

2

j'ai remarqué que vous définissez la hauteur de la div en tant qu'attribut HTML. Et ça ne marche pas. Définissez la hauteur dans l'attribut de style et avec l'unité, comme style="height: 234px" et cela fonctionne très bien. Je viens de le vérifier avec Firebug.