New Layout Navigation problems

[geekindisguise]

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!


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

 

[angelwatt]

I'm not seeing any overlap with Firefox or Safari. Maybe you need to clear your cache.

 

[effenay]

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?

 

[geekindisguise]

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?

I haven't added any Z-index to it yet, but I might try that tomorrow.

 

[geekindisguise]

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?

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!!

 

[angelwatt]

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.

 

[geekindisguise]

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.

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!

 

[samwich]

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/

 

[angelwatt]

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

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.

 

[geekindisguise]

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.

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.

 

[geekindisguise]

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?

 

[angelwatt]

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?

Looks good. One note though, there's no alt attribute for link tags. The title attribute will be good enough.