Re: [css-d] hover technique
At 5/22/2007 10:15 AM, Mauricio Samy Silva wrote: I hosted a test case showing a possible solution: Please, look at: http://www.maujor.com/temp/css-d/hover-effect.html __ Mauricio, this technique as you've used it here doesn't survive text-resizing, but it looks like that can probably be corrected by setting block heights in ems to prevent them from colliding. Paul __ Hi Paul, Thank you for feedback. Setting block heights in ems didn't works, but setting in ems the top property for absolutely positioned blocks do. I've fixed it. Maurício Samy Silva http://www.maujor.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] hover technique
Hi all I have an ul acting as a menu (so each li in the list is wrapped in anachor), next to that I have a div containing a jumble of words. What i'd like to do is when I hover of the list item some text in the jumble words change color so they stand out of the jumble, any body got a pure css solution for this, i've included some example code below, i'm thinking some spans in the jumbled words and some way of changing color on a:hover ? div id=nav ul lia href=*ANNUAL REPORTS/a/li lia href=*NEW MEDIA/a/li lia href=*BRANDING/a/li lia href=*CORPORATE COMMUNICATIONS/a/li /ul /div div id=what_do_we_do_sub_right h4DEDICATED TEAM FOR EACH PROJECT // CREATIVEbr / CONCEPTS AND DESIGN DEVELOPMENT // TYPESETTING //br / PROOFREADING // PROJECT, TIME AND COST MANAGEMENTbr / // PRINT MANAGEMENT, INCLUDING PASSING ONbr / PRESS // PHOTOGRAPHY, BOTH COMMISSIONED AND br / LIBRARY // ART DIRECTION //COPY WRITING //ARTWORKbr / // SOURCING AND IMPLEMENTING PHOTOGRAPHYbr / // WEB SITE BUILD AND MANAGEMENT WEB SITEbr / MAINTENANCE // WEB SITE HOSTING //CUSTOM-BUILTbr / CONTENT MANAGEMENT SYSTEMS IMAGE LIBRARIESbr / // SERVER STATISTICS // PDF AND HTML CONVERSIONbr / FOR THE WEB // CORPORATE IDENTITY GUIDLINESbr / // IMPLEMENTATION THROUGHOUT CORPORATEbr / COMMUNICATIONS //ANIMATION AND INTERACTION/h4 /div -- Regards Terry O'Leary Senior Web Developer @ Design Portfolio Marketing Services ~ Online Communities - www.unofficialfan.com ~Online dating community ? www.d8-m8.com ~ Widen your music www.hayseeddixies.com :: www.lil-chris.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] hover technique
At 5/22/2007 03:37 AM, Terry O'Leary wrote: I have an ul acting as a menu (so each li in the list is wrapped in anachor), next to that I have a div containing a jumble of words. What i'd like to do is when I hover of the list item some text in the jumble words change color so they stand out of the jumble, any body got a pure css solution for this, i've included some example code below, i'm thinking some spans in the jumbled words and some way of changing color on a:hover ? Terry, CSS :hover exerts its effect 'inward' in the DOM, that is, it's only the children and other descendants of the anchor element that can be affected by the event. It's certainly possible to affect blocks of text that *look like* they're outside the anchor by way of absolute positioning -- see Eric Meyers' demo 'Pure CSS Popups' http://meyerweb.com/eric/css/edge/popups/demo.html. Here's an example from my own portfolio http://eileengunn.com/: hover over the images in the navigation menu and the corresponding sub-menu text brightens. (If I reproduced this today I'd make it resizable, but it does illustrate the basic technique.) Similarly in your case, I see all the 'popup' text as visible at all times and then change on hover, however if those words were positioned absolutely they wouldn't be part of one another's flow, therefore: 1) you'd have to pre-position each word as you would an image, planning in advance their respective sizes and positions; 2) if the words grew in size in response to hover, the word-wrap of the whole cluster wouldn't naturally change; and 3) to make it work with text-resizing you'd need to size the container for the word cloud in ems so that the wrap didn't need to change with text-resizing. So I'm seeing this sort of markup: ul lia href=*ANNUAL REPORTS span id=t01DEDICATED TEAM FOR EACH PROJECT/span span id=t02TYPESETTING/span /a/li lia href=*NEW MEDIA span id=t03CREATIVE/span span id=t04CONCEPTS AND DESIGN DEVELOPMENT/span /a/li ... /ul Then position each of the text blobs absolutely (or relatively?) somewhere beneath or beside the list. You could definitely pull it off if you could control the environment in which the word cloud sat. It would be a little picky if you had to pre-measure each phrase in ems, but if the word cloud doesn't have to change frequently, that solution doesn't sound impractical. Of course, using javascript you can make an event affect unrelated elements anywhere on the page, but personally I think it's cooler when we can pull this off without scripting. One advantage of scripting it is that the markup would be more intuitively obvious -- the word cloud would be separate from the menu, each phrase in the cloud wrapped in a span linked by id or class with the menu item to which it belongs. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] hover technique
From: Terry O'Leary [EMAIL PROTECTED] I have an ul acting as a menu (so each li in the list is wrapped in anachor), next to that I have a div containing a jumble of words. What i'd like to do is when I hover of the list item some text in the jumble words change color so they stand out of the jumble, any body got a pure css solution for this, i've included some example code below, i'm thinking some spans in the jumbled words and some way of changing color on a:hover ? - Hi Terry, I hosted a test case showing a possible solution: Please, look at: http://www.maujor.com/temp/css-d/hover-effect.html Hi all, Comments on my solution will be appreciate. Regards, Maurício Samy Silva http://www.maujor.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] hover technique
On Tue, 22 May 2007 11:37:49 +0100, Terry O'Leary wrote: Hi all I have an ul acting as a menu (so each li in the list is wrapped in anachor), next to that I have a div containing a jumble of words. What i'd like to do is when I hover of the list item some text in the jumble words change color so they stand out of the jumble, any body got a pure css solution for this, i've included some example code below, i'm thinking some spans in the jumbled words and some way of changing color on a:hover ? Not with that markup, Terry. To use CSS you would need to put the text to highlight inside the A element and use positioning on it - the H4 element would make it invalid markup, and it would not degrade gracefully, and likely be meaningless to screen readers. A JavaScript solution seems possible. Try asking on a JavaScript list, such as https://lists.LaTech.edu/mailman/listinfo/javascript Cordially, David -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] hover technique
At 5/22/2007 10:15 AM, Mauricio Samy Silva wrote: I hosted a test case showing a possible solution: Please, look at: http://www.maujor.com/temp/css-d/hover-effect.html Mauricio, this technique as you've used it here doesn't survive text-resizing, but it looks like that can probably be corrected by setting block heights in ems to prevent them from colliding. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
