Anchors with overlapping divs

Posted by tmdelane on Stack Overflow See other posts from Stack Overflow or by tmdelane
Published on 2010-03-03T02:28:42Z Indexed on 2010/06/08 14:02 UTC
Read the original article Hit count: 204

Filed under:
|
|

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="#">&nbsp;</a></div>
    <div id="Feb-97" class="grid_1 minor"><a href="#">&nbsp;</a></div>
    <div id="Mar-97" class="grid_1 minor"><a href="#">&nbsp;</a></div>
    <div id="Apr-97" class="grid_1 minor"><a href="#">&nbsp;</a></div>
    <div id="May-97" class="grid_1 minor"><a href="#">&nbsp;</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="#">&nbsp;</a></div>
    <div id="bar2" class="prefix_32 grid_24 suffix_104"><a href="#">&nbsp;</a></div>
    <div id="bar3" class="prefix_58 grid_7 suffix_95"><a href="#">&nbsp;</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.

© Stack Overflow or respective owner

Related posts about css

Related posts about css-positioning