Grow your CSS skills. Land your dream job.

[Solved] Background hover

  • # July 19, 2009 at 11:27 pm

    Hey all,

    Looking for a little help with my background rollover image. I hope my CSS in general looks pretty good, but I can’t for the life of me figure out how to make the size of the background image on the hover for the main menu images. This shouldn’t be that hard, but it’s eluding me. Basically I’d like the rollover image to be as high as the bar the menu is in (or close to it) and a little wider than the word it is highlighting. Looking forward to any input. Thanks!

    http://www.i9creative.com/vh/

    # July 20, 2009 at 3:30 am

    make sure your nav area has a height, and on your hover, to change the images, then make sure this is the same height…. make sure your image really is the same size though

    # August 29, 2009 at 12:18 pm

    I am just not getting this technique. Can somebody help me figure out what I’m doing wrong.

    It’s really hard to tell on this one, but you can see that the background image is confining itself to the width of the words in each

    Code:

. I’m trying to make the background look a little wider than each menu item, and as tall as the menu bar.

http://www.i9creative.com/blog

Thanks in advance for any help.

# August 30, 2009 at 2:37 pm

bump

Anybody out there?

# August 31, 2009 at 5:46 am

main menu at top right of the page???

looking at the css it does not have any images…… is this correct?

I am kind of confused on what your asking for when there is not image there

"i9mickey" wrote:
Hey all,

Looking for a little help with my background rollover image. I hope my CSS in general looks pretty good, but I can’t for the life of me figure out how to make the size of the background image on the hover for the main menu images. This shouldn’t be that hard, but it’s eluding me. Basically I’d like the rollover image to be as high as the bar the menu is in (or close to it) and a little wider than the word it is highlighting. Looking forward to any input. Thanks!

looking at your css I would make the navbar the same size as the main lightblue bar, then ul them to the right but centre the text. then on hover change the background, which is the same size as the bar…..

so I hope you can see I am telling you to work on sizes, from the navbar down to a more specific element…..

on a side note……. why are you linking to 2 different pages? this defeats the purpose of asking a problem in one site. if you have the same problem on both sites, then you are doing something majorly wrong with your code or just copying it and changing colours

# August 31, 2009 at 12:06 pm

Wow. I see how I confused you. Very sorry. I had taken out the images on the Vision Health site because I hadn’t been able to figure it out. Let’s just concentrate on that site as I’m sure I’ve just duplicated the problem on the other one.

http://www.i9creative.com/vh/

So I’ve put the images back in, and I’ve made the height of the nav bar the same size as the light blue bar, but I’m a little confused on what you mean by ul them to the right but center the text.

At any rate, the image is still confining itself to the width and height of the text within each li, so I’m still doing something wrong.

And thank you Ikthius for answering me. I appreciate it very much.

mickey

"ikthius" wrote:
main menu at top right of the page???

looking at the css it does not have any images…… is this correct?

I am kind of confused on what your asking for when there is not image there

looking at your css I would make the navbar the same size as the main lightblue bar, then ul them to the right but centre the text. then on hover change the background, which is the same size as the bar…..

so I hope you can see I am telling you to work on sizes, from the navbar down to a more specific element…..

on a side note……. why are you linking to 2 different pages? this defeats the purpose of asking a problem in one site. if you have the same problem on both sites, then you are doing something majorly wrong with your code or just copying it and changing colours

# August 31, 2009 at 1:42 pm

I have been playing with the site on firebug and came up with this code:

Code:
#inside2ndBar {

height: 33px;
vertical-align: middle;
}

#header-2ndBar ul {

text-align: right;
padding-top: 15px;
height:33px;
}

#header-2ndBar ul li {

display:inline;
padding:15px 15px 15px 0;
height:33px;
width:50px;
}

#header-2ndBar ul li a:link, #header-2ndBar ul li a:visited {
position:relative;text-decoration: none;
color: #000066;
height:33px;
padding:15px;
top:2px;
}

#header-2ndBar ul li a:hover {
color: #CCFF00;
text-decoration: none;
background-image: url(images/menu-rollover.jpg);
background-position: center;
height: 33px;
}

I changed a few things, maybe not exact but close, you can study the code to see what you done wrong… also I made sure your links were in the right order, e.g.
a.class, a.class:link, a.class:visited, a.class:hover, a.class:active

edit: this code above only replaces the inside stuff for the navigation links, nothing else….. I copied from firebug what I done, so just copy over what I have given you and test

# September 6, 2009 at 12:44 pm

ikthius,

Thanks for all the help. That really got it. I had to adjust nudge it a bit, but it’s looking great. Looks like most of my issues had to do with height and padding. Also, I think maybe the relative positioning.

Anyways, I’m off and running. Thanks for the help!

# September 6, 2009 at 12:57 pm

glad you got it working

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".