I’m working on a new Portfolio and i have a little problem, which bugs me.
The Problem is, when i add a hover background over an existing background, he "reloads" about > 1 second and this doesnt looks very nice.
Can anybody say me, how i can prevent this, i call it reload, or does anybody know a better way to code the Navigation?
I tried it with CSS3, but the problem is (IE of course) that i have 3 Circles with RGBa and the only way to position them is with position:absolute (so i cant define that it should be in the wrapper) and so it looks differently for every monitor resolution.
That is because you are using so many images in your navigation. Since it has to fetch each one, it’s too slow. That whole thing should just be one image. Make the image a "Sprite". Here’s is Chris’s tutorial to do so.
Okay, thought its a problem with CSS, that i cant overlay another background or something like that..
But one question: Where do I have to define the Sprite Image?
I mean, that i have to write "background-position:xx" at the a:hover is clear, but where should i write "background: url(sprite.png)"? In the #header ul#nav?
You set the new sprite image as the background of each of the list items and use back-position: xx to move the image so each of the images line up to look like one image. and then on the hover you give it a new background-position.