Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts

    making accessible img rollovers w/ css

    okay, here's the problem...

    I'm converting a mostly style-separated-from-content site into a completely style-separated-from-content one. You can see the "before" here (the "after" is still in stages on my hard drive...).

    The menu is a series of pictures, 120px tall and 64px wide with a 1px border on the left. They are used in an unordered list as a navigation bar. I'm assigning each <li> with an ID so I can use background images instead of the <img>.

    Now, I've checked out a bunch of ideas for accessible rollovers and I'm a big fan of the langridge/leahy technique. It basically uses padding to "scoot" the text out of sight. The problem is, I can't seem to make the image part of the link active, only the text, which is hidden. So no rollover.

    I solved some of this problem in another part of the site by giving the <a> tag the ID, but this doesn't make my code semantic. In a perfect world, without styles I get an unordered list with text links to my pages, and with styles, I get pictures for my links. I know this has been done countless times, but I seem to be at a dead-end.

    Any help would be greatly appreciated!

    -Rich

    <edit>The "work in progress" is at http://richardmedek.com/test/current/.
    The stylesheet: http://richardmedek.com/test/style.css
    </edit>
    Last edited by rmedek; 02-09-2004 at 06:42 AM.

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How giving <a> and ID influences your code semantics. If you put different pictures in the background of your <a>s you need to distinguish them and that is what ID is for..
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    How giving <a> and ID influences your code semantics.
    Did you mean to say, "How is giving <a> an ID influencing your code semantically?

    ... if so, because the things on the menu that are different are the list items, not the links. Right now, I have 7 pages, or links, on the menu, including the page that the browser is currently on. The page you're on is shown with a larger picture on the left, and the other six are <img> links on the right (Here's the page in question). If I want to change which way the current page (which is not a link) or links are displayed, it makes more sense to change the stylesheet for the list items, doesn't it?

    When I read the above it sounds confusing , but I think you'll understand where I am coming from...

    -Rich

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No, and here is why.

    You current anchor (link) has the following structure:
    <a href="..."><img ... /></a>
    so that the content of your link is an image element.

    I understand (and support) your desire to further separate style from content by putting image into background and have :hover style for image "coloring". Now all that you still do with anchor element and because you need to specify a different image for your links you use id attribute:
    <a href="..." id="...">Link Text</a>

    From the semantics point of view, list only brings those anchor elements together and list items are all the same from the presentation point of view.

    Now, what you should remember is to set the display attribute for your anchors inside the list to block (default is inline) - this will let you set the height and width to that of the background images and make <li> wrap around.

    For the current page I would substitute anchor with a span to keep the styling consistent or give the anchor a different class. This is the approach I used on my site for the right-side menu (<div id="primNav" if you view the code) - the only difference is that I left enough space for the text under the image rather than padding it out of the view.
    Last edited by Vladdy; 02-09-2004 at 08:12 PM.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Well, I'm trying to follow the semantics laid out, for example, in this article in A List Apart. The concept there was to use the IDs in the <li>. This is one of many articles I'm trying to follow to code my site, I'm just getting a little disoriented putting it all together...

    Regardless of which technique is more semantic, my preference is to use the IDs in the <li>, so maybe I should rephrase my question in that manner...

    Thanks for your help so far...

    -Rich

  • #6
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Another (possibly more simple) version of the technique in question is to set the background-image of the <li> to your OverImage and on a:hover, set the background of <a> to :none. Same effect, maybe more simple. Maybe less twitchy in bad browsers?
    rmedek: Another muso who's into web dev! We're a growing breed it would seem


    Vladdy:
    -moz-border-radius:
    Don't get me wrong, I like the effect and may end up using it too one day; but isn't proprietry code for a good browser still proprietry code? Not an accussation of any sort, just wondering where you stand on the matter.

    Andrew
    Last edited by mindlessLemming; 02-10-2004 at 08:41 AM.

    I take no responsibility for the above nonsense.


    Left Justified

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    First of all, when it comes to CSS, vendor specific extensions are part of specifications: http://www.w3.org/TR/CSS21/syndata.html#q4

    The keyword here is extension: presentation is enhanced in a browser that supports it and degrades to the standard in those which do not. It is quite different from using proprietory code that makes a page work only in that particular browser.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #8
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Originally posted by mindlessLemming
    Another (possibly more simple) version of the technique in question is to set the background-image of the <li> to your OverImage and on a:hover, set the background of <a> to :none. Same effect, maybe more simple. Maybe less twitchy in bad browsers?
    rmedek: Another muso who's into web dev! We're a growing breed it would seem
    Thanks, that's a good tip, and I understand it works great for IE's flickering problem... my web design is far, far, far behind my music stuff, but sure is fun to do, and try to do right. Maybe I'm just a masochist...

    -Rich

  • #9
    Regular Coder
    Join Date
    Aug 2002
    Location
    Silicon Valley, CA
    Posts
    980
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by Vladdy
    First of all, when it comes to CSS, vendor specific extensions are part of specifications: http://www.w3.org/TR/CSS21/syndata.html#q4

    The keyword here is extension: presentation is enhanced in a browser that supports it and degrades to the standard in those which do not. It is quite different from using proprietory code that makes a page work only in that particular browser.
    Rounded edges are also a part of the upcoming CSS 3 spec. As soon as that particular CSS 3 module is finalized, we can use the CSS 3 syntax to achieve the same effect.

  • #10
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by Skyzyx
    Rounded edges are also a part of the upcoming CSS 3 spec. As soon as that particular CSS 3 module is finalized, we can use the CSS 3 syntax to achieve the same effect.
    Originally said by Mr. Burns
    Excellent........

    I take no responsibility for the above nonsense.


    Left Justified

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Sliding doors...?

    I'm trying to follow the semantics laid out, for example, in this article in A List Apart.
    Not entirely relevant, but you can id your li's (how's that for a sentence? "You can eye-dee your lees..." ) and use a descendant selector to style the appropriate a anyway:
    Code:
    li#nmbrone a {...}
    li#mnbrone a:hover {...}
    li#nmbrtwo a {...}
    ...
    etc.

    (And yes, you don't need to specify the element when using an id; I just included it for claritiy's sake since I failed to supply the accompanying HTML).
    Last edited by ronaldb66; 02-11-2004 at 02:08 PM.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #12
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    true, not entirely relevant, but that was the article that got me started on the semantics of it all...

    I did find a great article that's guiding me along, though, in case anyone's interested ...

    http://www.simplebits.com/archives/2...rollovers.html

    Thanks for everyone's help!

  • #13
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The article is just an opinion.
    I think I successfully argued the point why id belongs in the <a> element rather than <li>
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #14
    Banned
    Join Date
    Jan 2004
    Location
    Minneapolis, MN
    Posts
    387
    Thanks
    0
    Thanked 0 Times in 0 Posts
    well, i agree that the logical place seems to be on the <a>s, however a "list item" is a completely neutral term. it only takes on an identity, or and "id", if you will, based on its content. in that case, the id makes sense on the <li>.

    i think two good, and equally efficient solutions were offered. so why the argument? true, one solution was put in the light of being a pleasant "hack" for IE specific problems (but actually i think that flicker is not browser specific, as much as connection specific), but since they are equally semantical in different lights, wouldn't that almost be a very practical benefit of putting the id on the <li>?

    >

    seth

  • #15
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Originally posted by coder_seth
    true, one solution was put in the light of being a pleasant "hack" for IE specific problems (but actually i think that flicker is not browser specific, as much as connection specific)
    The "flicker" mindlessLemming was referring to (I think) was due to the popular way of using CSS to make the rollover effect. The idea is to have a single background image with both parts of the rollover on it, then move the background position on a:hover. So, let's say the link is a 20px wide black image, and the rollover is a 20px wide white image, you would use a single image that's 40px wide, both images joined together. Then you use a:hover {background-position:0 -20px} to produce a seamless rollover effect.

    IE, though, reloads the background image everytime it shifts positions, hence the "flicker." So his "hack" works around that... I think it's a pretty cool idea...
    well, i agree that the logical place seems to be on the <a>s, however a "list item" is a completely neutral term. it only takes on an identity, or and "id", if you will, based on its content. in that case, the id makes sense on the <li>.
    I'm agreeing with you on this one... it seems to me like a matter of personal preference. So, IDs on <li>s it is! Try and stop me!

    -Rich


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •