- This topic is empty.
-
AuthorPosts
-
April 18, 2010 at 11:05 am #28768mrksMember
Hello!
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.This is the CSS Code for the :hover:
Code:#header ul#nav li.work a:hover, #header ul#nav li.about a:hover, #header ul#nav li.blog a:hover {
height: 130px;
width: 130px;
display: block;
text-indent: -99999px;
margin: 26px 0 0 24px;
}#header ul#nav li.work a:hover {
background: url(“images/left-hover.png”) no-repeat;
}#header ul#nav li.about a:hover {
background: url(“images/middle-hover.png”) no-repeat;
}#header ul#nav li.blog a:hover {
background: url(“images/right-hover.png”) no-repeat;
}The Stylesheet for the page is here: http://creativebrains.net/test/style.css
And here is the live version: http://creativebrains.net/test/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.Would be great when one of you can help me :)
April 18, 2010 at 3:03 pm #74389noahgelmanParticipantThat 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.
April 18, 2010 at 4:18 pm #74393mrksMemberOkay, 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?Thanks!
April 18, 2010 at 4:45 pm #74394noahgelmanParticipantYou 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.
April 19, 2010 at 2:07 pm #74441mrksMemberOkay, now it works :)
Thank you!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.