SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is there a better way to do things?

    I would like to know what you guys think of my css rollover images.

    I have heard that its not good to have images of text for links but I do. I was using javascript to do the rollovers before and it was faster at the rollover but then someone talked me into doing it with css and its slower on the rollover but now the links across the top of my page will not display to blind users. At lest not as far as I can tell.

    Do you guys have any idea what I should do about the accessibility?

    Do you guys have any idea how I can speed up the rollover process?

    My site is http://www.drysnot.com

    I have added links at the bottom of my page that allow navigation but its kinda just going around the problem. As for the rollover speed I don't know what to do maybe if I can preload the animated images.

    Oh and one more thing with my level of html and css knowledge if you don't feel like you are talking to an idiot I may not be understanding what you are talking about lol

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The best way to incorporate images into a navigation menu is by using the sliding doors technique:

    This would entail you using a single image for each navigation link. This single image would incorporate both states of that link. Then, with CSS, you can specify the "background-position" which will move around the bg-image to the various states.

    Here are a couple of examples of what I mean by "sliding doors":
    - http://www.filamentgroup.com/lab/sty...sliding_doors/
    - http://www.dynamicdrive.com/style/cs...ors-tabs-menu/
    - http://www.cssplay.co.uk/menus/sliding_doors.html

    Also, you should be using a list for your navigation menu (it makes more sense semantically and is more accessible, especcially to those with disabilities):

    E.g.

    Code HTML4Strict:
    <ul id="nav">
    <li id="home"><a href="home.html">home</a></li>
    <li id="about"><a href="about.html">about</a></li>
    <li id="shop"><a href="shop.html">shop</a></li>
    <li id="terms"><a href="terms.html">terms</a></li>
    <li id="contact"><a href="contact.html">contact</a></li>
    <li id="links"><a href="links.html">links</a></li>
    </ul>

    I am not quite sure what you mean by "the links across the top of my page will not display to blind users"... As long as you have anchor text then blind users should be fine. (But please make sure you use a list (UL>LI), afterall, that's what it is).
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <ul id="nav">
    <li id="home"><a href="index.html" class="home">Home</a></li>
    <li id="forums"><a href="forums/index.php" class="forum">Forum</a></li>
    <li id="snotshop"><a href="snotshop.html" class="snotshop">SnotShop</a></li> 
    <li id="contact"><a href="contact.html" class="contact">Contact</a></li> 
    <li id="links"><a href="links.html" class="links">Links</a></li> 
    </ul>
    This is making my links line up vertically could you please tell me what I need to do it make them line up horizontally?

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I changed some stuff around and I think I got it working. Is that what you were talking about?

    www.drysnot.com

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    He's talking about something like this: http://pmob.co.uk/temp/navimagereplace.htm


Bookmarks

Posting Permissions

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