HTML and CSS Reference
In-Depth Information
text-align
:
center
;
width
:
24px
;
}
.bar.fig0
{
left
:
0
;
}
.bar.fig1
{
left
:
26px
;
}
.bar.fig2
{
left
:
52px
;
}
The main styles to note here are:
•
position:absolute
and
bottom:0
, which means that the bars will be attached to the
bottom of our graph and grow up;
•
the bar for each species (
.fig0
,
.fig1
and
.fig2
), which will be positioned within
.bar-group
.
Now, why don't we minimize the number of sharp edges on any given page by using the
border-radius
property to round the edges of the top-left and top-right corners of each bar?
OK, so
border-radius
isn't really necessary, but it adds a nice touch for browsers that
support it. Thankfully, the latest versions of the most popular browsers do support it.
Because we've placed the values from each table cell in each bar, we can add a neat little
pop-up that appears when you hover over a bar:
.bar span
{
background
:
#fefefe
url(../images/info-bg.gif)
0 100% repeat-x
;
border-radius
:
3px
;
left
:
-8px
;
display
:
none
;
margin
:
0
;
