Re: [css-d] Can a DIV be made invisible to mouse clicks?
Ingo, Georg, Thank you for responding. https://developer.mozilla.org/en/css/pointer-events That is awesome, and exactly the kind of solution I was hoping for. It works for me in Firefox and Chome. Of course, all indications are that it does not work in Internet Explorer. I will, however, resist the urge to rant about the obvious frustration with how IE is always the exception when it comes to useful and easy solutions. I'm not sure if I can call this totally solved without IE support. I can get away with not supporting IE6, but I can't dismiss 7 and up. -- Dave M G __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] sub menus show up on hover but not on focus
hey all, I am working on a test page that has a sub menu which displays on hover but not on focus. How do I get the sub menus (for example the 3 links under location) to show up when someone tabs to the link the way they do when someone hovers over it? http://sandyfeldman.com/villab/en/index.shtml http://sandyfeldman.com/villab/css_js/villab.css http://sandyfeldman.com/villab/css_js/TJK_keyBoardDropDown.js The styles I am using more or less came from http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/default.asp but I seem to have lost a key ingredient when I put this to work in my page. Any thoughts about how to fix this up? Thanks! Sandy __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] sub menus show up on hover but not on focus
On Mon, Apr 25, 2011 at 10:20 AM, Sandy sfeld...@sympatico.ca wrote:
I am working on a test page that has a sub menu which displays on hover but
not on focus. How do I get the sub menus (for example the 3 links under
location) to show up when someone tabs to the link the way they do when
someone hovers over it?
Hi,
Just from first thought you can use jquery .focus()
$(#location).focus(function () {
//trigger dropdown
});
$(#about).focus(function () {
//trigger dropdown
});
--
-bdot
There are only 10 kinds of people in this world. Those who understand
binary and those who don't
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] getting the TJK design vertical css drop down menu to work
hey all, If this looks familiar it's because I changed the subject. I didn't get any replies to my last email, subject line sub menus show up on hover but not on focus and I'm stumped. I hope someone out there can help! I am working on a test page that has a sub menu which displays on hover but not on focus. How do I get the sub menus (for example the 3 links under location) to show up when someone tabs to the link the way they do when someone hovers over it? http://sandyfeldman.com/villab/en/index.shtml http://sandyfeldman.com/villab/css_js/villab.css http://sandyfeldman.com/villab/css_js/TJK_keyBoardDropDown.js The styles I am using more or less came from http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/default.asp but I seem to have lost a key ingredient when I put this to work in my page. Any thoughts about how to fix this up? Thanks! Sandy __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] getting the TJK design vertical css drop down menu to work
On 26/04/2011 5:17 AM, Sandy wrote:
hey all,
If this looks familiar it's because I changed the subject. I didn't get
any replies to my last email, subject line sub menus show up on hover
but not on focus and I'm stumped. I hope someone out there can help!
I am working on a test page that has a sub menu which displays on hover
but not on focus. How do I get the sub menus (for example the 3 links
under location) to show up when someone tabs to the link the way they
do when someone hovers over it?
http://sandyfeldman.com/villab/en/index.shtml
http://sandyfeldman.com/villab/css_js/villab.css
http://sandyfeldman.com/villab/css_js/TJK_keyBoardDropDown.js
The styles I am using more or less came from
http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/default.asp
The sub-menu only show in full when you have JS enabled. It's a attempt
at making a menu keyboard friendly. I did similar with this demo [1],
which is another solution and someone else added to that with another
demo [2].
but I seem to have lost a key ingredient when I put this to work in my
page. Any thoughts about how to fix this up?
Thanks!
Sandy
Change this CSS,
#menu li:hover ul, #menu li:focus ul, #menu li:active ul, #menu
li.msieFix ul {
display : block;
z-index : 10;
}
to this (li can not gain focus).
#menu li:hover ul, #menu li a:focus+ul, #menu li:active ul, #menu
li.msieFix ul {
display : block;
z-index : 10;
}
As with my menu, Opera shows the best accessibility.
[1] http://css-class.com/articles/ursidae/bears5ddh-kbaccess.htm
[2] http://www.adipalaz.com/accessible_ddmenu.html
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Styling ul and li
I am trying to do the following:
(1) Create a menu ul where the home button does not appear on the home
page. I added css to make the display property=none for the home button
on the home page using the id's for the page(body), menu(ul) and menu
item(li). See code below...
(2) Change color of menu items li depending on the page you are on. For
example, on page 1, the page 1 button would be a different color that the
rest of the menu items. My attempts at css formatting for this are ignored
by the browser.
*Ok, I know this sounds like easy stuff*, and I have done this in the past
but I am having a heck of a time with it now. Any help/hints would be much
appreciated!
#topNav {
clear: both;
border: 0;
padding: 8px 18px 0px 0px;
margin: 0;
list-style: none;
float: right;
}
#topNav li {
float: left;
margin: 0 1px 0 2px;
padding: 0 1px 1px 1px;
border-top: 1px solid #005490;
background: #00;
}
#topNav a {
padding: 0 5px 0 5px;
color: #ff;
font-size: 11px;
font-weight: normal;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#topNav a:hover {
color: #fdfb75;
text-decoration: none;
}
#main #topNav #home {
display: none;
}
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling ul and li
Will the site be composed of individual html pages? Home.html, About.html,
Contact.html, etc.
Or will it use dynamic server-side generated pages such as *.php, *.cfm,
*.asp, etc. ?
Dan
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Neil Hunt
Sent: Monday, April 25, 2011 1:00 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] Styling ul and li
I am trying to do the following:
(1) Create a menu ul where the home button does not appear on the home
page. I added css to make the display property=none for the home button
on the home page using the id's for the page(body), menu(ul) and menu
item(li). See code below...
(2) Change color of menu items li depending on the page you are on. For
example, on page 1, the page 1 button would be a different color that the
rest of the menu items. My attempts at css formatting for this are ignored
by the browser.
*Ok, I know this sounds like easy stuff*, and I have done this in the past
but I am having a heck of a time with it now. Any help/hints would be much
appreciated!
#topNav {
clear: both;
border: 0;
padding: 8px 18px 0px 0px;
margin: 0;
list-style: none;
float: right;
}
#topNav li {
float: left;
margin: 0 1px 0 2px;
padding: 0 1px 1px 1px;
border-top: 1px solid #005490;
background: #00;
}
#topNav a {
padding: 0 5px 0 5px;
color: #ff;
font-size: 11px;
font-weight: normal;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#topNav a:hover {
color: #fdfb75;
text-decoration: none;
}
#main #topNav #home {
display: none;
}
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE 6 /5.5 problem
Hi all; I am having trouble with a float drop in IE 5.5 and 6 -- don't know about IE7, as I don't have that. Right now, I want to get it looking right in 5.5 and 6 (IE). The page is at: http://www.robertsmart.ca/ZZnew/index.html I don't know why the #content is not floating up beside the #menu. There is more than enough room for it to sit there. It is inside #wrapper which contains both #menu and #content (both floated left. Can someone please let me know what bug this is so i can find a solution. Thanks in advance. I appreciate you help. Sincerely, Sol Sinclair __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE 6 /5.5 problem
IE5.5 and 6?!?! Kidding, kidding (but not really). I'd try defining those widths in px, instead of em. Kevin On Mon, Apr 25, 2011 at 2:23 PM, Sol Sinclair s_sincl...@sympatico.cawrote: Hi all; I am having trouble with a float drop in IE 5.5 and 6 -- don't know about IE7, as I don't have that. Right now, I want to get it looking right in 5.5 and 6 (IE). The page is at: http://www.robertsmart.ca/ZZnew/index.html I don't know why the #content is not floating up beside the #menu. There is more than enough room for it to sit there. It is inside #wrapper which contains both #menu and #content (both floated left. Can someone please let me know what bug this is so i can find a solution. Thanks in advance. I appreciate you help. Sincerely, Sol Sinclair __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] getting the TJK design vertical css drop down menu to work
http://sandyfeldman.com/villab/en/index.shtml
http://sandyfeldman.com/villab/css_js/villab.css
http://sandyfeldman.com/villab/css_js/TJK_keyBoardDropDown.js
The sub-menu only show in full when you have JS enabled. It's a attempt
at making a menu keyboard friendly. I did similar with this demo [1],
which is another solution and someone else added to that with another
demo [2].
Change this CSS,
#menu li:hover ul, #menu li:focus ul, #menu li:active ul, #menu
li.msieFix ul {
display : block;
z-index : 10;
}
to this (li can not gain focus).
#menu li:hover ul, #menu li a:focus+ul, #menu li:active ul, #menu
li.msieFix ul {
display : block;
z-index : 10;
}
As with my menu, Opera shows the best accessibility.
[1] http://css-class.com/articles/ursidae/bears5ddh-kbaccess.htm
[2] http://www.adipalaz.com/accessible_ddmenu.html
Alan, Thanks so much! (and sorry for the long delay in writing back -
I've had a bit of a crazy day)
This is much better
http://sandyfeldman.com/villab/en/index.shtml
The sub menu now shows when you tab on the menu item. Tabbing to the
next item skips the sub menu items and goes directly to the next menu
item. Any idea of why that's happening?
thanks again,
Sandy
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling ul and li
On 4/25/11 1:00 PM, Neil Hunt wrote: I am trying to do the following: (1) Create a menuul where the home button does not appear on the home page. I added css to make the display property=none for the home button on the home page using the id's for the page(body), menu(ul) and menu item(li). See code below... (2) Change color of menu itemsli depending on the page you are on. For example, on page 1, the page 1 button would be a different color that the rest of the menu items. My attempts at css formatting for this are ignored by the browser. If I understand you correctly, you want a consistent menu structure on every page, but want to style the current page item differently? If so, perhaps you can replace the A element with something else, just for that one item? Personally, I use a STRONG element (to emphasize You Are Here) and give it the same display, padding, etc as the links, but apply the here colors to the STRONG element. That's assuming you don't want to link to the page you are already on... :) HTH. -- Cordially, David __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE 6 /5.5 problem
On Mon, Apr 25, 2011 at 2:23 PM, Sol Sinclair s_sincl...@sympatico.cawrote:
Hi all;
I am having trouble with a float drop in IE 5.5 and 6 -- don't know about
IE7, as I don't have that. Right now, I want to get it looking right in 5.5
and 6 (IE). The page is at:
http://www.robertsmart.ca/ZZnew/index.html
I don't know why the #content is not floating up beside the #menu. There is
more than enough room for it to sit there. It is inside #wrapper which
contains both #menu and #content (both floated left.
Can someone please let me know what bug this is so i can find a solution.
Thanks in advance. I appreciate you help.
Sincerely,
Sol Sinclair
Sol,
With my knowledge of HTML/CSS, I see the issue in IE 5/6 arising because of
the order of the two elements in the HTML and how floats are rendered. In
those browsers, a float that comes after a non-floated element in the HTML
will be displayed below the non-floated element simply because the
non-floated element takes up the full vertical space of the page (even if it
has a set width).
To fix this, simply float #menu left and give #content a left margin of 8em
to clear the width of the menu:
#menu{
float:left;
width:8em;
margin:0;
padding:2px;
}
#content{
width:35em;
margin-left:8em; /* may need to juggle this to fit the padding on the menu
(see *note) */
}
*note: an easy way to overcome the issue with the padding would be to put
the padding on the ul inside of #menu instead of on #menu itself. This way,
the full computed width of the #menu div is 8em, and not 8em + 2(2px).
Alex Mitchell
http://gumware.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling ul and li
You could go about it in this way:
For the home page, give the body tag the class home (body
class=home), for the About Us page, (body class=about_us) and
so on.
The menu items should also have classes, eg (li
class=homeHome/lili class=about_usAbout Us/li...).
Your css should look like this:
.home .home { display:none;}
.about_us .about_us, .contact_us .contact_us, {background-color: red;}
/* highlighting the current menu item */
Regards,
Chetan Crasta
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] OT: Protecting pictures
How do you guys protect your images on the web? I normally don't bother trying to protect images because all the methods can be circumvented. But if a client insists on it, I use this technique: I overlay an absolutely positioned, transparent, div over the image. Right clicking on the image is then not possible. As usual, IE7 and IE8 behave differently. In these browsers, a transparent div is ignored when right clicking. The workaround for this is to give the div a background color and then set the opacity to 0 to make it transparent. You can see an example here: http://www.roughtech.com/t/protected_pic.html Regards, Chetan Crasta __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] OT: Protecting pictures
You what you have done is to use some trickery to get this picture: http://www.roughtech.com/t/protected_picture.jpg Very nice!! A casual user won't know what to do to get it. Date: Tue, 26 Apr 2011 09:49:35 +0530 Subject: Re: [css-d] OT: Protecting pictures From: chetancra...@gmail.com To: xfs...@hotmail.com CC: css-d@lists.css-discuss.org How do you guys protect your images on the web? I normally don't bother trying to protect images because all the methods can be circumvented. But if a client insists on it, I use this technique: I overlay an absolutely positioned, transparent, div over the image. Right clicking on the image is then not possible. As usual, IE7 and IE8 behave differently. In these browsers, a transparent div is ignored when right clicking. The workaround for this is to give the div a background color and then set the opacity to 0 to make it transparent. You can see an example here: http://www.roughtech.com/t/protected_pic.html Regards, Chetan Crasta __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE 6 /5.5 problem
On 4/25/11 2:23 PM, Sol Sinclair wrote:
Hi all;
I am having trouble with a float drop in IE 5.5 and 6 -- don't know
about IE7, as I don't have that. Right now, I want to get it looking
right in 5.5 and 6 (IE). The page is at:
http://www.robertsmart.ca/ZZnew/index.html
I don't know why the #content is not floating up beside the #menu.
There is more than enough room for it to sit there. It is inside
#wrapper which contains both #menu and #content (both floated left.
Perhaps you changed something, but presently you don't have float
declared on #menu - only on the UL inside it!
Modern browsers pretty much ignore div#menu, so you have the floated UL
followed by the floated div#content.
Old IE on the other hand applies layout[1] on account of the width on
div#menu. This makes it contain the floated UL, so effectively you have
a static div#menu followed by a floated div#content. So you don't have a
float drop; you have the expected behavior of a static element followed
by a float. (Floats do not float upward - they float forward letting
*following* static content rise.)
Try this:
div#menu {
/* display: block; - not needed */
float: left;
...
}
div#content {
display: inline-block;
/* float: left; - delete */
width: 45em; /* to match width of div#moveshift */
}
[1] http://www.satzansatz.de/cssd/onhavinglayout.html
HTH
--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling ul and li
David Hucklesby wrote: If I understand you correctly, you want a consistent menu structure on every page, but want to style the current page item differently? If so, perhaps you can replace the A element with something else, just for that one item? Probably the simplest way is to use a.../a with no href attribute. The text inside such an element is not a link, but it is a styleable element. And you can use the selector a to style the features that should be common to the links and to the current-page item, selectors :link and :visited for the features that only links should have. If you wish to add settings for the current-page item specifically, then it's safest to use a class attributes on it. -- Yucca, http://www.cs.tut.fi/~jkorpela/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
