Style implementation for Round Cornered Tabbed Panels
Hi all,
I need to make each tab on an AjaxTabbedPanel have round corners. No big
deal so far:
*div.tabpanel div.tab-row li* {
background:url("my-round-corner-tab-background.png") no-repeat left top;
}
But what if I want to have a "resizable" round cornered tab. Therefore if i
have a tab title "hi" and another "good bye and have a wonderful weekend!!!"
I wouldn't need to have two different background images: one for small
normal titles and another background for huge horrible ones.
I believe the technique is to have the two corners edges (left and right)
and have the middle space with the same colored background.
so, any ideas on how, and if I could implement that without touching so much
the AjaxTabbedPanel implementation (extending).
I think I might be able to put the left corner background image on the
*div.tabpanel
div.tab-row li a *and the right one on the *div.tabpanel div.tab-row li a
span
*This would be, uggly even if I could do it.
So, any better way of doing this without having to extend the current
AjaxTabbedPanel?
thanks,
f(t)
Re: Style implementation for Round Cornered Tabbed Panels
I've seen this done pretty much how you describe (in fact I think
there is a demo inthe wicket examples) That use two images (left and
right).
the left one is narrow, just enough to contain the rounded corners,
the right side however is extra long; long enough to fit pretty much
any text you put in.
As the tab expands, the right side move to the right and simply clips
to the left as needed.
- Brill Pappin
On 24-Jun-08, at 6:01 PM, Francisco Diaz Trepat - gmail wrote:
Hi all,
I need to make each tab on an AjaxTabbedPanel have round corners. No
big
deal so far:
*div.tabpanel div.tab-row li* {
background:url("my-round-corner-tab-background.png") no-repeat
left top;
}
But what if I want to have a "resizable" round cornered tab.
Therefore if i
have a tab title "hi" and another "good bye and have a wonderful
weekend!!!"
I wouldn't need to have two different background images: one for small
normal titles and another background for huge horrible ones.
I believe the technique is to have the two corners edges (left and
right)
and have the middle space with the same colored background.
so, any ideas on how, and if I could implement that without touching
so much
the AjaxTabbedPanel implementation (extending).
I think I might be able to put the left corner background image on the
*div.tabpanel
div.tab-row li a *and the right one on the *div.tabpanel div.tab-row
li a
span
*This would be, uggly even if I could do it.
So, any better way of doing this without having to extend the current
AjaxTabbedPanel?
thanks,
f(t)
-
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
Re: Style implementation for Round Cornered Tabbed Panels
The wicket tab panel example does exactly this
http://www.wicket-library.com/wicket-examples/ajax/tabbed-panel.1
It uses the sliding door technique describe here:
http://www.alistapart.com/articles/slidingdoors/
On Tue, Jun 24, 2008 at 5:02 PM, Brill Pappin <[EMAIL PROTECTED]> wrote:
> I've seen this done pretty much how you describe (in fact I think there is
> a demo inthe wicket examples) That use two images (left and right).
> the left one is narrow, just enough to contain the rounded corners, the
> right side however is extra long; long enough to fit pretty much any text
> you put in.
>
> As the tab expands, the right side move to the right and simply clips to
> the left as needed.
>
>
> - Brill Pappin
>
>
>
> On 24-Jun-08, at 6:01 PM, Francisco Diaz Trepat - gmail wrote:
>
> Hi all,
>>
>> I need to make each tab on an AjaxTabbedPanel have round corners. No big
>> deal so far:
>>
>> *div.tabpanel div.tab-row li* {
>> background:url("my-round-corner-tab-background.png") no-repeat left top;
>> }
>>
>> But what if I want to have a "resizable" round cornered tab. Therefore if
>> i
>> have a tab title "hi" and another "good bye and have a wonderful
>> weekend!!!"
>> I wouldn't need to have two different background images: one for small
>> normal titles and another background for huge horrible ones.
>>
>> I believe the technique is to have the two corners edges (left and right)
>> and have the middle space with the same colored background.
>>
>> so, any ideas on how, and if I could implement that without touching so
>> much
>> the AjaxTabbedPanel implementation (extending).
>>
>> I think I might be able to put the left corner background image on the
>> *div.tabpanel
>> div.tab-row li a *and the right one on the *div.tabpanel div.tab-row li a
>> span
>>
>> *This would be, uggly even if I could do it.
>>
>> So, any better way of doing this without having to extend the current
>> AjaxTabbedPanel?
>>
>> thanks,
>> f(t)
>>
>
>
> -
> To unsubscribe, e-mail: [EMAIL PROTECTED]
> For additional commands, e-mail: [EMAIL PROTECTED]
>
>
Re: Style implementation for Round Cornered Tabbed Panels
Thanks guys,
I follow the leads and got it done.
Great link about the sliding doors,
thanks,
f(t)
On Tue, Jun 24, 2008 at 10:20 PM, Matthew Young <[EMAIL PROTECTED]> wrote:
> The wicket tab panel example does exactly this
>
> http://www.wicket-library.com/wicket-examples/ajax/tabbed-panel.1
>
> It uses the sliding door technique describe here:
>
> http://www.alistapart.com/articles/slidingdoors/
>
> On Tue, Jun 24, 2008 at 5:02 PM, Brill Pappin <[EMAIL PROTECTED]> wrote:
>
> > I've seen this done pretty much how you describe (in fact I think there
> is
> > a demo inthe wicket examples) That use two images (left and right).
> > the left one is narrow, just enough to contain the rounded corners, the
> > right side however is extra long; long enough to fit pretty much any text
> > you put in.
> >
> > As the tab expands, the right side move to the right and simply clips to
> > the left as needed.
> >
> >
> > - Brill Pappin
> >
> >
> >
> > On 24-Jun-08, at 6:01 PM, Francisco Diaz Trepat - gmail wrote:
> >
> > Hi all,
> >>
> >> I need to make each tab on an AjaxTabbedPanel have round corners. No big
> >> deal so far:
> >>
> >> *div.tabpanel div.tab-row li* {
> >> background:url("my-round-corner-tab-background.png") no-repeat left
> top;
> >> }
> >>
> >> But what if I want to have a "resizable" round cornered tab. Therefore
> if
> >> i
> >> have a tab title "hi" and another "good bye and have a wonderful
> >> weekend!!!"
> >> I wouldn't need to have two different background images: one for small
> >> normal titles and another background for huge horrible ones.
> >>
> >> I believe the technique is to have the two corners edges (left and
> right)
> >> and have the middle space with the same colored background.
> >>
> >> so, any ideas on how, and if I could implement that without touching so
> >> much
> >> the AjaxTabbedPanel implementation (extending).
> >>
> >> I think I might be able to put the left corner background image on the
> >> *div.tabpanel
> >> div.tab-row li a *and the right one on the *div.tabpanel div.tab-row li
> a
> >> span
> >>
> >> *This would be, uggly even if I could do it.
> >>
> >> So, any better way of doing this without having to extend the current
> >> AjaxTabbedPanel?
> >>
> >> thanks,
> >> f(t)
> >>
> >
> >
> > -
> > To unsubscribe, e-mail: [EMAIL PROTECTED]
> > For additional commands, e-mail: [EMAIL PROTECTED]
> >
> >
>
