All right, I think I figured out what's going on. The short answer: it
is not possible to solve your problem only by adjusting z-index
because this is how Timeline works. But there is another solution that
uses opacity and font-weight properties.
The problem with z-index values is that they are always relative. That
is, if there is a parent element with z-value=100, then even if its
children have z-value specified as 1, the effective z-value of
children is 101, not 1. This is exactly what is happening in your
example. The date labels have one parent element, whereas the icons
have another parent element. And the z-index of date's parent element
is smaller than that of the icons' parent element. So the dates always
end up below the icons.
The solution that I propose is that you adjust opacity property of
icons. Add this:
.timeline-small-event-icon {
opacity: 0.5;
}
and make the labels bold, so they are more visible:
.timeline-date-label {
font-weight:bold;
}
After that you will see data labels through the semi-transparent icons.
Alexey
On Thu, May 5, 2011 at 11:03 AM, Daniel Elkins <[email protected]> wrote:
> What i am referencing is not the target event icons on the daily display ..
> but the smaller tick marks that are on the month/year summary. The example
> can be viewed at the following link:
>
> http://www.mylittlehistory.com/phase2/albums.php?g=1
>
> if you look at the timeline below you can see the year 2011 is covered by
> the icons ... I will be making the text darker, but would also like the
> icons to be below the text.
>
> Thanks in advance,
>
> Silvertiger
>
> On Wed, May 4, 2011 at 8:58 PM, Alexey Smirnov <[email protected]> wrote:
>>
>> Hi Tiger,
>>
>> Is this problem happening in a bubble when you click on an event?
>> Better yet, can you please post a URL of your example so that we can
>> see what exactly goes wrong, as it is not obvious from your
>> explanation.
>>
>> Thanks,
>> Alexey
>>
>> On Thu, May 5, 2011 at 6:43 AM, Silver Tiger <[email protected]>
>> wrote:
>> > I am finding that the icon used appearing above the date text makes it
>> > unredable. How would i place the icon behind the text?
>> >
>> > I tried changing z-index of both the ".timeline-date-label" and
>> > "timeline-small-event-icon" to various values to achieve this, but it
>> > doesn't work. Any ideas would be welcome.
>> >
>> > Silver Tiger
>> >
>> > --
>> > You received this message because you are subscribed to the Google
>> > Groups "SIMILE Widgets" group.
>> > To post to this group, send email to [email protected].
>> > To unsubscribe from this group, send email to
>> > [email protected].
>> > For more options, visit this group at
>> > http://groups.google.com/group/simile-widgets?hl=en.
>> >
>> >
>>
>> --
>> You received this message because you are subscribed to the Google Groups
>> "SIMILE Widgets" group.
>> To post to this group, send email to [email protected].
>> To unsubscribe from this group, send email to
>> [email protected].
>> For more options, visit this group at
>> http://groups.google.com/group/simile-widgets?hl=en.
>>
>
> --
> You received this message because you are subscribed to the Google Groups
> "SIMILE Widgets" group.
> To post to this group, send email to [email protected].
> To unsubscribe from this group, send email to
> [email protected].
> For more options, visit this group at
> http://groups.google.com/group/simile-widgets?hl=en.
>
--
You received this message because you are subscribed to the Google Groups
"SIMILE Widgets" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/simile-widgets?hl=en.
