New Layout Navigation problems

Discussion in 'Web Design and Development' started by geekindisguise, May 23, 2009.

  1. geekindisguise macrumors 6502

    geekindisguise

    Joined:
    Jul 22, 2008
    Location:
    Oklahoma
    #1
    I am designing a new layout for my friend and I am having problems with the navigation. On the MouseOver the navigation will overlap the header that says "Ryan's Site" I know the site has many design flaws but I really dont care. I just want to know how to fix my problem. Thanks!
    :D

    Edit: Ooops, forgot the link. hehe http://jakes.is-a-geek.com/users/example/
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    I'm not seeing any overlap with Firefox or Safari. Maybe you need to clear your cache.
     
  3. effenay macrumors newbie

    Joined:
    May 13, 2009
    #3
    I see the overlap, it occurs when the window is small enough that the "Jokes" element extends beyond the right edge of "Ryan's Site".

    Have you looked at the z-index property of your elements?
     
  4. geekindisguise thread starter macrumors 6502

    geekindisguise

    Joined:
    Jul 22, 2008
    Location:
    Oklahoma
    #4
    I haven't added any Z-index to it yet, but I might try that tomorrow.
     
  5. geekindisguise thread starter macrumors 6502

    geekindisguise

    Joined:
    Jul 22, 2008
    Location:
    Oklahoma
    #5
    Ok, I tried the Z-Index but it didn't work. I have NO idea why it won't go under the header! Gosh. HTML and CSS can really get my nerves sometimes!! :mad:
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    Looking at the code more I think you need to change the way you're implementing the navigation. It's currently using invalid HTML, can't use a div inside a a tag. A common practice for navigation these days is to use a ul.

    Also, currently when you first hover over a navigation item there's a noticeable flicker as it loads the new image. One way to avoid this is to use CSS Sprites, which I recommend looking at.

    I believe if you get the underlying code a little better arranged it'll be easier to address your current problem. I was working through a way to fix your current problem, but it was essentially requiring an overhaul. I didn't find any quick fixes.
     
  7. geekindisguise thread starter macrumors 6502

    geekindisguise

    Joined:
    Jul 22, 2008
    Location:
    Oklahoma
    #7
    Using UL's was what I first tried going for, which worked at first. But how I wanted my Navigation style to be I couldn't figure out a better way.

    I have used sprite images before but never really used it anymore after that. I don't know why, but I didn't. I guess I will try it again.

    Also, does anyone know how to have a link look a certain way when your on that page? Preferably a PHP way.

    Thanks! :D
     
  8. samwich macrumors regular

    Joined:
    Aug 5, 2007
    #8
    Here's a good css layout tutorial where they go through how to create menu rollovers, and use body classes to change the image when you're on a certain page. Probably would be a good start for you.

    http://www.subcide.com/tutorials/csslayout/
     
  9. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #9
    Can you better define "a certain way?" Are you considering having a navigation element look selected when the visitor is already on that page? That's something I do with my site and is accomplished through PHP/CSS.
     
  10. geekindisguise thread starter macrumors 6502

    geekindisguise

    Joined:
    Jul 22, 2008
    Location:
    Oklahoma
    #10
    Yeah! Thats what I meant. I couldn't think of what to call it. But I already figured that out by looking at the Tutorial samwich suggested.
     
  11. geekindisguise thread starter macrumors 6502

    geekindisguise

    Joined:
    Jul 22, 2008
    Location:
    Oklahoma
    #11
    Navigation problems are all worked out

    Ok, I finally got it all right. I am using UL lists instead of the DIV's in the Links.
    And I also am using sprites for the navigation images. I even got the current page effect right.

    So, what do you think?
     
  12. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #12
    Looks good. One note though, there's no alt attribute for link tags. The title attribute will be good enough.
     

Share This Page