You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Chris Mylonas <ch...@opencsta.org> on 2011/12/29 13:01:20 UTC
CSS -> a:active
To my fellow Tapestry aficionados,
(Sorry if it made it the first time - i got a message not delivered back from my mail server (gmail))
I've been plugging away with a mock up but made a bigger effort with the CSS than normal because it's been a while. I have a little niggle though..
The a:hover works on the horizontal menu I have but not the a:active (They share the same rule below)
The horizontal-menu looks like this
[ FIRST | MIDDLE | MIDDLE | MIDDLE | MIDDLE | MIDDLE | LAST ]
The mouse over (hover rule) works all along it however the active page doesn't keep the highlighted menu item.
Is there some special tapestry magic required to make the active page work in the nav bar?
Cheers
Chris
#horizontal-menu li a:hover, #horizontal-menu li a:active {
background: url( images/bg-li-main.gif ) repeat-x scroll center top
transparent;
width: 160px;
height: 46px;
overflow: inherit;
color: #FFFFFF;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
}
#horizontal-menu .last a:hover {
background: url( images/bg-li-last.png ) no-repeat scroll 0 0
transparent;
}
#horizontal-menu .first a:hover {
background: url( images/bg-li-first.png ) no-repeat scroll 0 0
transparent;
}
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: CSS -> a:active
Posted by Chris Mylonas <ch...@opencsta.org>.
Thanks Bob - I didn't think there was anything to do in Tapestry, just wanted to confirm.
<div class="horizontal-menu-container"><ul class="future-sf-menu" id="horizontal-menu"><li class="first odd"><a href="/styles/home">Home</a></li><li class="middle even"><a href="/styles/livecalls">LiveCalls</a></li><li class="middle odd"><a href="/styles/byhour">ByHour</a></li><li class="middle even"><a href="/styles/byday">ByDay</a></li><li class="middle odd"><a href="/styles/byweek">ByWeek</a></li><li class="last even"><a href="/styles/bycli">ByCLI</a></li></ul></div>
I was trying to get the same nav bar happening as this template: http://livedemo00.template-help.com/drupal_35527/
Got everything but the a:active going :(
I'll give it a crack again over the next couple of days.
Have a good weekend / new years folks!!
Chris
On 30/12/2011, at 4:11 AM, Bob Harner wrote:
> I'm pretty sure this is a pure HTML/CSS issue (not Tapestry-specific).
> Also, you didn't post your HTML, or whether your horizontal menu is
> updated upon selection via custom javascript, ajax refresh, or whole
> page refresh.
>
> Regardless, I don't believe the "active" pseudo-class is what you want
> here. It's effect is undone when the menu is redrawn.
>
> http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_active
>
> Instead, what I generally do is have the server side set a certain CSS
> class name on the selected menu item (e.g. <li class="selected-item">)
> and then I use something like #horizontal-menu li.selected-item a {
> ..... } to specify a distinct style.
>
> Hope this helps...
>
> On Thu, Dec 29, 2011 at 7:01 AM, Chris Mylonas <ch...@opencsta.org> wrote:
>> To my fellow Tapestry aficionados,
>>
>> (Sorry if it made it the first time - i got a message not delivered back from my mail server (gmail))
>>
>> I've been plugging away with a mock up but made a bigger effort with the CSS than normal because it's been a while. I have a little niggle though..
>> The a:hover works on the horizontal menu I have but not the a:active (They share the same rule below)
>>
>> The horizontal-menu looks like this
>> [ FIRST | MIDDLE | MIDDLE | MIDDLE | MIDDLE | MIDDLE | LAST ]
>>
>> The mouse over (hover rule) works all along it however the active page doesn't keep the highlighted menu item.
>>
>> Is there some special tapestry magic required to make the active page work in the nav bar?
>>
>> Cheers
>> Chris
>>
>> #horizontal-menu li a:hover, #horizontal-menu li a:active {
>> background: url( images/bg-li-main.gif ) repeat-x scroll center top
>> transparent;
>> width: 160px;
>> height: 46px;
>> overflow: inherit;
>> color: #FFFFFF;
>> text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
>> }
>>
>> #horizontal-menu .last a:hover {
>> background: url( images/bg-li-last.png ) no-repeat scroll 0 0
>> transparent;
>> }
>>
>> #horizontal-menu .first a:hover {
>> background: url( images/bg-li-first.png ) no-repeat scroll 0 0
>> transparent;
>> }
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
>> For additional commands, e-mail: users-help@tapestry.apache.org
>>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
Re: CSS -> a:active
Posted by Bob Harner <bo...@gmail.com>.
I'm pretty sure this is a pure HTML/CSS issue (not Tapestry-specific).
Also, you didn't post your HTML, or whether your horizontal menu is
updated upon selection via custom javascript, ajax refresh, or whole
page refresh.
Regardless, I don't believe the "active" pseudo-class is what you want
here. It's effect is undone when the menu is redrawn.
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_active
Instead, what I generally do is have the server side set a certain CSS
class name on the selected menu item (e.g. <li class="selected-item">)
and then I use something like #horizontal-menu li.selected-item a {
..... } to specify a distinct style.
Hope this helps...
On Thu, Dec 29, 2011 at 7:01 AM, Chris Mylonas <ch...@opencsta.org> wrote:
> To my fellow Tapestry aficionados,
>
> (Sorry if it made it the first time - i got a message not delivered back from my mail server (gmail))
>
> I've been plugging away with a mock up but made a bigger effort with the CSS than normal because it's been a while. I have a little niggle though..
> The a:hover works on the horizontal menu I have but not the a:active (They share the same rule below)
>
> The horizontal-menu looks like this
> [ FIRST | MIDDLE | MIDDLE | MIDDLE | MIDDLE | MIDDLE | LAST ]
>
> The mouse over (hover rule) works all along it however the active page doesn't keep the highlighted menu item.
>
> Is there some special tapestry magic required to make the active page work in the nav bar?
>
> Cheers
> Chris
>
> #horizontal-menu li a:hover, #horizontal-menu li a:active {
> background: url( images/bg-li-main.gif ) repeat-x scroll center top
> transparent;
> width: 160px;
> height: 46px;
> overflow: inherit;
> color: #FFFFFF;
> text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
> }
>
> #horizontal-menu .last a:hover {
> background: url( images/bg-li-last.png ) no-repeat scroll 0 0
> transparent;
> }
>
> #horizontal-menu .first a:hover {
> background: url( images/bg-li-first.png ) no-repeat scroll 0 0
> transparent;
> }
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org