Anchors with overlapping divs
- by tmdelane
I am using a grid based layout, with two main sections. Graph and Timeline.
Graph, contains graded vertical bars, HTML similar to:
<div id="graph" class="container_160">
<div id="Jan-97" class="grid_1 major"><a href="#"> </a></div>
<div id="Feb-97" class="grid_1 minor"><a href="#"> </a></div>
<div id="Mar-97" class="grid_1 minor"><a href="#"> </a></div>
<div id="Apr-97" class="grid_1 minor"><a href="#"> </a></div>
<div id="May-97" class="grid_1 minor"><a href="#"> </a></div>
etc...
</div>
Timeline, contains horizontal bars, HTML similar to:
<div id="timeline" class="container_160">
<div id="bar1" class="grid_32 suffix_128"><a href="#"> </a></div>
<div id="bar2" class="prefix_32 grid_24 suffix_104"><a href="#"> </a></div>
<div id="bar3" class="prefix_58 grid_7 suffix_95"><a href="#"> </a></div>
</div>
Timeline is relatively positioned to Graph so that it overlaps. My problem is that when these divs overlap, the anchors in Timeline stop working. I am open to both CSS and Jquery solutions. Thanks in advance.
t.
