Re: [WSG] need help with tabular interface
kevin mcmonagle schreef:
Ive been following the sliding doors II article and have it working
somewhat well. However I cant see the reason for the 1st set of
decendent selectors below. The second set with the anchor tag is used
to create the "current" link state but I dont see what the first set
is for. The first selector in comma separated pairs are used to id in
the body tag. Can someone explain this?
||
http://alistapart.com/d/slidingdoors2/v1/ex10a.html
|*#home #nav-home, #news #nav-news,
#products #nav-products, #about #nav-about,
#contact #nav-contact* {
background-position:0% -150px;
border-width:0;
}
*#home #nav-home a, #news #nav-news a,
#products #nav-products a, #about #nav-about a,
#contact #nav-contact a* {
background-position:100% -150px;
color:#333;
padding-bottom:5px;
}
They're both for creating the "current link" state. The left side of the
sliding door is on the and the right side is on the .
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] need help with tabular interface
Ive been following the sliding doors II article and have it working
somewhat well. However I cant see the reason for the 1st set of
decendent selectors below. The second set with the anchor tag is used to
create the "current" link state but I dont see what the first set is
for. The first selector in comma separated pairs are used to id in the
body tag. Can someone explain this?
||
http://alistapart.com/d/slidingdoors2/v1/ex10a.html
|*#home #nav-home, #news #nav-news,
#products #nav-products,
#about #nav-about,
#contact #nav-contact* {
background-position:0% -150px;
border-width:0;
}
*#home #nav-home a,
#news #nav-news a,
#products #nav-products a,
#about #nav-about a,
#contact #nav-contact a* {
background-position:100% -150px;
color:#333;
padding-bottom:5px;
}
thanks
kevin mcmonagle
|
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] need help with tabular interface
Nick Fitzsimons schreef: On 29 May 2007, at 02:10:02, Sander Aarts wrote: I'm glad the designers I work with know that rounded corners can be a real pain in the ass, so they always ask before implementing them in the design. I want your designers! ;-) Well, it's only because they know that otherwise I'd have to punish them real hard ;-) *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] need help with tabular interface
On 29 May 2007, at 02:10:02, Sander Aarts wrote: I'm glad the designers I work with know that rounded corners can be a real pain in the ass, so they always ask before implementing them in the design. I want your designers! ;-) -- Nick Fitzsimons http://www.nickfitz.co.uk/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] need help with tabular interface
Thierry Koblentz schreef: So we can use transparent images. If we go with a single SPAN, then the background image used for the A would show *behind* the image used for the SPAN (through the transparent area of the image). I know it's uggly, but this article is 4 or 5 years old :) Ah, for tabs with rounded corners on a polychrome background. I had not really noticed the pattern in the background of Kevins design before. I guess that, in this case, if he uses some tones of blue from that background and uses that to fill the transparent area outside the tabs corner it will be fine. The tones are pretty close to one another so there should be someting in the middle that works on the first tab of the menu as well as on the last tab without people noticing it. But it's true that the 1-span sollution won't work in all circumstances. I'm glad the designers I work with know that rounded corners can be a real pain in the ass, so they always ask before implementing them in the design. cheers, Sander *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] need help with tabular interface
> On Behalf Of Sander Aarts > 2 s inside the link? > I must admit that I haven't really read the whole article, but I can't > see why you'd have to use 2, each with their own className. Why not use > the for one of the background images instead of class="left">? So we can use transparent images. If we go with a single SPAN, then the background image used for the A would show *behind* the image used for the SPAN (through the transparent area of the image). I know it's uggly, but this article is 4 or 5 years old :) --- Regards, Thierry | www.TJKDesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] need help with tabular interface
I dont know, im stuck with it.
Heres my progress
http://eaf.textdriven.com/
Sander Aarts wrote:
kevin mcmonagle schreef:
The sliding doors method, or any that ive seen, only works if all the
tabs are the same colour.
I don't see why. If every tab has its own id you can define different
background images for each tab.
Nick Gleitzman wrote:
You've got the right starting point - but be aware that (in my
previous experience) IE/Win (of course...) doesn't honour the
background image change on mouseover - unless the bg img is in the .
If you want to sticj to CSS only you may use a inside the
and then, instead of using and for the sliding doors, use
and . As the is inside the you can use a:hover span {
... }
Hmm - occurs to me that the js fix for Exploder that's used for
Suckerfish dropdowns [1] may be adaptable to your tabs - ? But then,
of course, you've got to think about degradation when js is disabled...
As changing colors on hovering is more about usability than
accessibilty I wonder whether it's a problem when it does not occur.
Perhaps you can heva JavaScript set a certain className. Without this
className the textdecoration or color changes on hover, otherwise the
background images.
cheers,
Sander
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] need help with tabular interface
Thierry Koblentz schreef: You're right, one would need to pollute the markup: http://www.tjkdesign.com/articles/scalable.asp 2 s inside the link? I must admit that I haven't really read the whole article, but I can't see why you'd have to use 2, each with their own className. Why not use the for one of the background images instead of ? *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] need help with tabular interface
kevin mcmonagle schreef:
The sliding doors method, or any that ive seen, only works if all the
tabs are the same colour.
I don't see why. If every tab has its own id you can define different
background images for each tab.
Nick Gleitzman wrote:
You've got the right starting point - but be aware that (in my
previous experience) IE/Win (of course...) doesn't honour the
background image change on mouseover - unless the bg img is in the .
If you want to sticj to CSS only you may use a inside the and
then, instead of using and for the sliding doors, use and
. As the is inside the you can use a:hover span { ... }
Hmm - occurs to me that the js fix for Exploder that's used for
Suckerfish dropdowns [1] may be adaptable to your tabs - ? But then,
of course, you've got to think about degradation when js is disabled...
As changing colors on hovering is more about usability than accessibilty
I wonder whether it's a problem when it does not occur. Perhaps you can
heva JavaScript set a certain className. Without this className the
textdecoration or color changes on hover, otherwise the background images.
cheers,
Sander
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
RE: [WSG] need help with tabular interface
> On Behalf Of Nick Gleitzman > > kevin mcmonagle wrote: > > > I am going to start with the sliding doors 2.0 article on ala. > > Does anyone have any advice or examples regarding a sideways tabular > > nav bar? > > You've got the right starting point - but be aware that (in my previous > experience) IE/Win (of course...) doesn't honour the background image > change on mouseover - unless the bg img is in the . You're right, one would need to pollute the markup: http://www.tjkdesign.com/articles/scalable.asp --- Regards, Thierry | www.TJKDesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] need help with tabular interface
kevin mcmonagle wrote: Thanks nick i might need to implement that js fix. The sliding doors method, or any that ive seen, only works if all the tabs are the same colour. Ah. Of course. I'm sure you could make your design work, but there would be a lot of classes and/or ids involved to target the specific tabs, and a whole lot of css as a consequence... I will have to change my design cause i dont have time to figure id out-in fact even if i did have the time that would be a tough nut to crack. Your call, of course - you know how much time you have. But better to find out now whether your design is viable, than many hours into wrestling with it! N ___ omnivision. websight. http://www.omnivision.com.au/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] need help with tabular interface
Thanks nick i might need to implement that js fix. The sliding doors method, or any that ive seen, only works if all the tabs are the same colour. I will have to change my design cause i dont have time to figure id out-in fact even if i did have the time that would be a tough nut to crack. Nick Gleitzman wrote: You've got the right starting point - but be aware that (in my previous experience) IE/Win (of course...) doesn't honour the background image change on mouseover - unless the bg img is in the . Hmm - occurs to me that the js fix for Exploder that's used for Suckerfish dropdowns [1] may be adaptable to your tabs - ? But then, of course, you've got to think about degradation when js is disabled... [1] www.htmldog.com/articles/suckerfish/dropdowns/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] need help with tabular interface
kevin mcmonagle wrote: I am going to start with the sliding doors 2.0 article on ala. Does anyone have any advice or examples regarding a sideways tabular nav bar? You've got the right starting point - but be aware that (in my previous experience) IE/Win (of course...) doesn't honour the background image change on mouseover - unless the bg img is in the . Hmm - occurs to me that the js fix for Exploder that's used for Suckerfish dropdowns [1] may be adaptable to your tabs - ? But then, of course, you've got to think about degradation when js is disabled... [1] www.htmldog.com/articles/suckerfish/dropdowns/ N ___ omnivision. websight. http://www.omnivision.com.au/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
