I’m working on an economics project at the moment and a web component was a suggestion in the guidelines, so I jumped into it.
Basically, I have to chart out a graph of the U.S. budget deficit and describe certain key dates.
The bar graph is causing me some grief, however. I have constructed graphs before by generating an image with php, but I decided that I might as well strengthen my html skills (I learned PHP, javascript, and css before html, somehow).
Right now, the table is perfect, except for the fact that my divs (my bars) are not showing up properly within their appropriate cell.
Basically, the table has 31 columns (representing the dates 1980-2010) and I’m trying to place a colored div inside of it to make it look like a bar.
Column
------------
| |
| |
| |
| |
| |
| |
| |
| -------- |
| | | |
| | Div | |
| | | |
| | | |
| | | |
| | | |
------------
The page can be found here: here.
As you can see, there are no bars showing up. Why might this be? I’m using the inspect element tool on Google chrome and can’t seem to spot anything suspicious.
The total super clean way is write the whole page in div’s.
The issue is the DIV has no content. Personally I would create a 1px heigh “shim” to the colour (color) you want, then send the height % to the appropreate height. (this you can also change in javascript (or jquery) client side, this will render in more browser and you can add a shine to the shim etc.
The reason for the image is DIV’s need “solid” objects like text or images, just try putting a “ ” in your div. It should then show…
This works:
@Sarfraz, that article is 2007 and is buggy across browers (check out the comments)