[WSG] Making CSS Buttons active
Im building a site with a navigation button stack in the left column, and Im trying to figure out how to make the whole button active. I know Ive seen it happening somewhere but I cant find an example right now. Can anyone show me how that is achieved? Im not sure if Im making myself clear, but when I style the nested list, I get nice buttons being displayed, and when the cursor hovers over the word in the button, the hover effect works fine, but when the cursor is over the button but not over the word, the hover effect doesnt work. If I have a button thats a lot wider than the word (for example on the home button where the active area of the button is far smaller than sign up now I know Ive seen this with java applets, but I sure dont want to go down that road again I have that on my own site now and its a pain. I felt certain there was a way using nested lists and CSS to make the entire button area clickable. Isnt there? Cheers Mike Kear Windsor, NSW, Australia Macromedia Certified Advanced ColdFusion Developer AFP Webworks Pty Ltd http://afpwebworks.com Full Scale ColdFusion hosting from A$15/month
Re: [WSG] Making CSS Buttons active
You need to use the property "display:block;". I suggest you see some of the great examples at http://css.maxdesign.com.au/listamatic/ - Original Message - From: Michael Kear To: wsg@webstandardsgroup.org Sent: Friday, July 29, 2005 8:10 PM Subject: [WSG] Making CSS Buttons active Im building a site with a navigation button stack in the left column, and Im trying to figure out how to make the whole button active. I know Ive seen it happening somewhere but I cant find an example right now. Can anyone show me how that is achieved? Im not sure if Im making myself clear, but when I style the nested list, I get nice buttons being displayed, and when the cursor hovers over the word in the button, the hover effect works fine, but when the cursor is over the button but not over the word, the hover effect doesnt work. If I have a button thats a lot wider than the word (for example on the home button where the active area of the button is far smaller than sign up now I know Ive seen this with java applets, but I sure dont want to go down that road again I have that on my own site now and its a pain. I felt certain there was a way using nested lists and CSS to make the entire button area clickable. Isnt there? Cheers Mike Kear Windsor, NSW, Australia Macromedia Certified Advanced ColdFusion Developer AFP Webworks Pty Ltd http://afpwebworks.com Full Scale ColdFusion hosting from A$15/month
RE: [WSG] Making CSS Buttons active
Thanks for the suggestion. Thats what I thought. Im using display:block, so I must have some other error or something in there. Ill go through the style sheet line by line again and see if I can see whats negating the display:block . Thanks for the suggestion. Cheers Mike Kear Windsor, NSW, Australia Macromedia Certified Advanced ColdFusion Developer AFP Webworks Pty Ltd http://afpwebworks.com Full Scale ColdFusion hosting from A$15/month From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of [EMAIL PROTECTED] Sent: Friday, 29 July 2005 8:19 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Making CSS Buttons active You need to use the property display:block;. I suggest you see some of the great examples at http://css.maxdesign.com.au/listamatic/ - Original Message - From: Michael Kear To: wsg@webstandardsgroup.org Sent: Friday, July 29, 2005 8:10 PM Subject: [WSG] Making CSS Buttons active Im building a site with a navigation button stack in the left column, and Im trying to figure out how to make the whole button active. I know Ive seen it happening somewhere but I cant find an example right now. Can anyone show me how that is achieved? Im not sure if Im making myself clear, but when I style the nested list, I get nice buttons being displayed, and when the cursor hovers over the word in the button, the hover effect works fine, but when the cursor is over the button but not over the word, the hover effect doesnt work. If I have a button thats a lot wider than the word (for example on the home button where the active area of the button is far smaller than sign up now I know Ive seen this with java applets, but I sure dont want to go down that road again I have that on my own site now and its a pain. I felt certain there was a way using nested lists and CSS to make the entire button area clickable. Isnt there? Cheers Mike Kear Windsor, NSW, Australia Macromedia Certified Advanced ColdFusion Developer AFP Webworks Pty Ltd http://afpwebworks.com Full Scale ColdFusion hosting from A$15/month
Re: [WSG] Vertical Alignment + sliding doors
Hi Darren I think the only way to solve your problem is dynamic, since the buttons are renderd dynamic. I realize this has got nothing to do with html, css or webstandards but it is an answer to your problem so i'll give it to you anyway. You have one known variable: the max number of characters that fit on one line (=x). If the number of characters = x use class=y else use class=z. Class y has a margin-top which makes a 'one-line-link' align vertically. Class z has a margin-top which makes a 'two-line-link' align vertically. I think that will solve your peoblem, don't you think. Rilke. Darren Wood wrote: Hello World! I've been struggling with a vertical alignment issue...have a look at the links below: http://shopperanswers.dev.netconcepts.com/understanding-your-shoppers.php [line 86] http://shopperanswers.dev.netconcepts.com/includes/default.css [line 288] i'm having an issue the with tab looking things at the bottom of the body text [Observational research, Intercept amp; exit interviews, Integration...] Those are links, they are also dynamic (so I cant just wack a class on the li's)...some of them wrap and some dont. What i want to do is have them vertically aligned regardless of whether they're on one line or two...( hope that makes sense.) Any ideas? Thanks in advance Darren ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Making CSS Buttons active
I believe what you might be missing is a specified width for the anchor tags to fill the buttons. Your stylesheet's ul.menu li a, or equivalent, needs a width: 100%; added. Christian Bradford On 7/29/05, Michael Kear [EMAIL PROTECTED] wrote: Thanks for the suggestion. That's what I thought. I'm using display:block, so I must have some other error or something in there. I'll go through the style sheet line by line again and see if I can see what's negating the display:block . Thanks for the suggestion. Cheers Mike Kear Windsor, NSW, Australia Macromedia Certified Advanced ColdFusion Developer AFP Webworks Pty Ltd http://afpwebworks.com Full Scale ColdFusion hosting from A$15/month From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of [EMAIL PROTECTED] Sent: Friday, 29 July 2005 8:19 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Making CSS Buttons active You need to use the property display:block;. I suggest you see some of the great examples at http://css.maxdesign.com.au/listamatic/ - Original Message - From: Michael Kear To: wsg@webstandardsgroup.org Sent: Friday, July 29, 2005 8:10 PM Subject: [WSG] Making CSS Buttons active I'm building a site with a navigation button stack in the left column, and I'm trying to figure out how to make the whole button active. I know I've seen it happening somewhere but I can't find an example right now. Can anyone show me how that is achieved? I'm not sure if I'm making myself clear, but when I style the nested list, I get nice buttons being displayed, and when the cursor hovers over the word in the button, the hover effect works fine, but when the cursor is over the button but not over the word, the hover effect doesn't work. If I have a button that's a lot wider than the word (for example on the home button where the active area of the button is far smaller than sign up now I know I've seen this with java applets, but I sure don't want to go down that road again – I have that on my own site now and it's a pain.I felt certain there was a way using nested lists and CSS to make the entire button area clickable. Isnt there? Cheers Mike Kear Windsor, NSW, Australia Macromedia Certified Advanced ColdFusion Developer AFP Webworks Pty Ltd http://afpwebworks.com Full Scale ColdFusion hosting from A$15/month
Re: [WSG] IE7 b1 :/
Jan Brasna wrote: OK, beta 1 pretty bad in the field of standards, only PNG partially fixed and peekaboo and guillotine bugs removed. Otherwise IE6-like. See http://kurafire.net/log/archive/2005/07/28/ie7-beta-1-release Yes, they fixed 2 bugs, and now it's a new version. That puts firefox at what, version 6,000 or so last time I checked bugzilla ;). I think IE 7 will be a bit of a disapointment to the web developer crowd. On the other hand it means that we won't have to deal with a whole buch of new ones that they would have inevitably produced. Till then we can always you Dean Edwards IE 7, a much more advanced one if you ask me. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] IE7 b1 :/
2005/7/29, Alan Trick [EMAIL PROTECTED]: I think IE 7 will be a bit of a disapointment to the web developer crowd. I think we should wait for next beta version of IE7. I do understand what many web developers feel about Beta 1, but it's still far from final product, as Dean said at IEBlog. Molly wrapped up about current situation about IE7: http://www.molly.com/2005/07/28/thats-why-its-called-beta/ -- Kazuhito Kidachi mailto:[EMAIL PROTECTED] ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] IE7 b1 :/
On 7/29/05, Kazuhito Kidachi [EMAIL PROTECTED] wrote: I think we should wait for next beta version of IE7. I do understand what many web developers feel about Beta 1, but it's still far from final product, as Dean said at IEBlog. Molly wrapped up about current situation about IE7: http://www.molly.com/2005/07/28/thats-why-its-called-beta/ Do we have a choice? On the other hand, it is naïve to hope anything more from IE7. I agree with ppk (quirksmode.org) — IEs rendering engine is beyond fixing. Somehow I doubt anyone could rewrite and test it before next beta comes out. Just let hope we will not get any new bugs, and we already know how to deal with the old ones... Regards, Rimantas -- http://rimantas.com/
[WSG] standards resources
Hi All I have worked with various museums over the past few years and I am setting up a new web site for standards-based resources for museums and non-profit organizations. I'd like to ask those that have put together standards-galleries, resources, repositories, etc in the past if they have any suggestions on what should be offered, put together, etc. I will be using wordpress and wiki. You can send responses off-list to [EMAIL PROTECTED] Thanks Ted ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Opening external links in popup windows with no extra markup
Hi all, I'd appreciate your feedback about this technique that does not rely on hooks; it only uses the href attribute... http://www.tjkdesign.com/articles/popups.asp Thanks, Thierry | www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Opening external links in popup windows with no extra markup
Thierry Koblentz wrote:
Hi all,
I'd appreciate your feedback about this technique that does not rely on
hooks; it only uses the href attribute...
http://www.tjkdesign.com/articles/popups.asp
Looks good Thierry.
One thing though-- what happens to mailto: links?
i know in an *old* switcher i had:
if(href.indexOf(mydomain.com) == -1){ // Href is not a file on my server
if(href.indexOf(javascript:) == -1){ // Href is not a
javascript call
if(!anchors[i].onclick){ // Href does not have
an onclick event
if(href.indexOf(mailto:;) == -1){ //
Href is not a mailto:
if(href.indexOf(http://;) != -1){ // Href is not relative (for
Safari)
anchors[i].setAttribute(target,_blank);
}
}
}
}
}
I found the the mail and safari links got all weird.
perhaps this is something to look into or test if you haven't already.
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Opening external links in popup windows with no extra markup
Hi Brian, Looks good Thierry. Thanks One thing though-- what happens to mailto: links? Good point! To be honnest with you I didn't even think about these :) But they are safe because I'm checking for an HTTP string inside the attribute's value. I think this method could be used to style mailto: links as well, to let the user knows that clicking on them will open another app... Thierry | www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Opening external links in popup windows with no extra markup
On Jul 29, 2005, at 12:43 PM, Thierry Koblentz wrote:
One thing though-- what happens to mailto: links?
Good point! To be honnest with you I didn't even think about these :)
But they are safe because I'm checking for an HTTP string
inside the
attribute's value.
I think you ought to check specifically that 'http://' is at the
beginning of the string. This would help rule out false positives
like these:
a href=/protocols/about_http.htmlFind out about HTTP/a
a href=/affiliate.asp?ref=http://foo.com/bar.php;Set your
affiliation reference cookie/a
In your code you have:
a[i].getAttribute('href').toUpperCase().indexOf(HTTP) = 0
...and I think you might be better with:
a[i].getAttribute('href').toUpperCase().indexOf(HTTP://) == 0
And other than the design choice of whether all external links ought
to open a new window, I think you've got something good. I like your
idea of attaching the style and title with javascript so as to leave
the natural behavior intact.
Personally, I prefer the rel attribute, because when done well you
are expressing the arbitrary relationship the current document has to
the target document. If you only use rel to basically say open a new
window then that's not very semantic and it's coupling markup and
behavior closely. But if you use rel to say some links are for other
content, others are for examples and figures, and either can be
external sites, and then use JS to set examples and figures on
external sites to open in new windows, then you're golden. Your rel
is meaningful and your behavior is attached to the meaning of the
markup.
--
Ben Curtis : webwright
bivia : a personal web studio
http://www.bivia.com
v: (818) 507-6613
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Opening external links in popup windows with no extra markup
I think you ought to check specifically that 'http://' is at the beginning of the string. Good point, I'll change this. a href=/protocols/about_http.htmlFind out about HTTP/a a href=/affiliate.asp?ref=http://foo.com/bar.php;Set your affiliation reference cookie/a And other than the design choice of whether all external links ought to open a new window, I think you've got something good. I like your idea of attaching the style and title with javascript so as to leave the natural behavior intact. Thanks, but don't give me credit for that :) The only thing I claim here is the use of the href attribute as the only element to use to determine on which links behavior and style should be attached (external links, files inside a specific folder, links inside a specific element...). Thanks for your feedback and suggestion, Thierry | www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Opening external links in popup windows with no extra markup
I use a little javascript to make open pop up link and this is Valid
XHTML Strict!.
I know maybe there are many master here, and i just share my little knowledge.
Below this code and example :
1. create javascript code and save as .js file
--
function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName(a);
for (var i=0; ianchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute(href)
anchor.getAttribute(rel) == external)
anchor.target = _blank;
}
}
window.onload = externalLinks;
2. call that js into the page
script type=text/javascript src=js/blank.js/script
3. change for target=_blank into rel==external on link tag a href
this work on ie, firefox, NS, opera etc.
For online sample visit http://www.rayofshadow.or.id/pop.htm
thanks
Ray | http://www.rayofshadow.or.id
*i was send with wrong email*
On 7/30/05, Brian Cummiskey [EMAIL PROTECTED] wrote:
Thierry Koblentz wrote:
Hi all,
I'd appreciate your feedback about this technique that does not rely on
hooks; it only uses the href attribute...
http://www.tjkdesign.com/articles/popups.asp
Looks good Thierry.
One thing though-- what happens to mailto: links?
i know in an *old* switcher i had:
if(href.indexOf(mydomain.com) == -1){ // Href is not a file on my server
if(href.indexOf(javascript:) == -1){ // Href is not
a javascript call
if(!anchors[i].onclick){ // Href does not have
an onclick event
if(href.indexOf(mailto:;) == -1){ //
Href is not a mailto:
if(href.indexOf(http://;) !=
-1){ // Href is not relative (for
Safari)
anchors[i].setAttribute(target,_blank);
}
}
}
}
}
I found the the mail and safari links got all weird.
perhaps this is something to look into or test if you haven't already.
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Opening external links in popup windows with no extra markup
On 7/30/05, Thierry Koblentz [EMAIL PROTECTED] wrote: I think you ought to check specifically that 'http://' is at the beginning of the string. Good point, I'll change this. A more reusable approach would be to check for '://', as this is what differentiates 'mailto:', relative paths and 'http://' links, but will still allow you to use the script on secure pages. Whenever dealing with href maniputlation, it's always good to keep 'https' in the back of your mind ;) Other than that, it looks like a great approach for sites with client controlled content. Sure beats trying to teach them to include a different class or rel attrib on external links! Andrew. http://leftjustified.net/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Opening external links in popup windows with no extra markup
A more reusable approach would be to check for '://', as this is what differentiates 'mailto:', relative paths and 'http://' links, but will still allow you to use the script on secure pages. Whenever dealing with href maniputlation, it's always good to keep 'https' in the back of your mind ;) Nice catch! Other than that, it looks like a great approach for sites with client controlled content. Thanks Andrew, Thierry | www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Opening external links in popup windows with no extra markup
Something similar to this came up at work last week and I think it would be good to tack it on to this thread (hopefully there's enough relevance!). The problem was that we wanted to handle links to non-html files in a different manner than regular links. Ideally, it shouldn't require any more effort from the content author. The following page shows a simple demonstration of the solution: http://leftjustified.net/lab/javascript-file-links/ By splitting it into a switch/case, you can have different behaviour/style/etc for each file type. A good example might be redirecting all mp3 links via a site's Flash audio widget if Flash (and js) are present. Another useful addition would be to check if the link is the sole child element of an li, in which case you may want a large icon to the left (see demo page) or if it's the child of a paragraph, you may want a smaller icon on the right... All without the author even considering that they are linking to a file that could potentially load external apps/plugins. In a controlled input situation (eg: a web developer's blog), a solution like Patrick Lauke's 'type' link styling expermient ( http://www.splintered.co.uk/experiments/38/ ) adds more useful info to the markup and can be used the same way; but when a client is in control of the content you set up whatever automated help you can and cross your fingers ;D Cheers, Andrew. On 7/30/05, Thierry Koblentz [EMAIL PROTECTED] wrote: A more reusable approach would be to check for '://', as this is what differentiates 'mailto:', relative paths and 'http://' links, but will still allow you to use the script on secure pages. Whenever dealing with href maniputlation, it's always good to keep 'https' in the back of your mind ;) Nice catch! Other than that, it looks like a great approach for sites with client controlled content. Thanks Andrew, Thierry | www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** -- http://leftjustified.net/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
