The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Navigation Bar - Hovering?

View previous topic View next topic Go down

Solved Navigation Bar - Hovering?

Post by Cool-Guy on October 14th 2011, 3:40 am

Hello,

I would like to know if it is possible to have two images for the navigation bar. One standard, and one hovering?

At the moment, I use this code for the standard:

Code:
.navbar {
background: url(http://i71.servimg.com/u/f71/16/21/18/28/hld10.png);
}

What should I use as hovering-code?

Thanks. Smile

Cool-Guy
Forumember

Posts : 295
Reputation : 0
Language : English

Back to top Go down

Solved Re: Navigation Bar - Hovering?

Post by Nera. on October 14th 2011, 4:07 am

Code:
.navbar:hover {
background: url('SOME OTHER IMAGE LINK HERE');
}

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar - Hovering?

Post by poisonshift on October 18th 2011, 11:07 am

I'm not sure what this is about but its probably touching on what I'm wanting to do which is use 2 images for each nav button. One for the standard and another for the hover. How do we do this?

poisonshift
Forumember

Male Posts : 67
Reputation : 0
Language : English
Location : Internet

http://www.re2mods.forummotion.com/

Back to top Go down

Solved Re: Navigation Bar - Hovering?

Post by Nera. on October 18th 2011, 5:26 pm

@poisonshift wrote:I'm not sure what this is about but its probably touching on what I'm wanting to do which is use 2 images for each nav button. One for the standard and another for the hover. How do we do this?

Hi
Remove your navigations out of Admin panel and add them all through CSS.
Also go to Display >> Headers and navigations >> Display only images in nav bar: YES

Enter your links in and also set the height and width.

Do this for the static image:
Code:
#i_icon_mini_index {
background-image: url('IMAGE LINK GOES HERE');
width: XYpx;
height: XYpx;
}

And than this for hover:
Code:
#i_icon_mini_index:hover {
background-image: url('IMAGE HOVER LINK GOES HERE');
width: XYpx;
height: XYpx;
}

Do it for all navigations, just change the end of #i_icon_mini

Like this:
_portal {
_portal:hover {

This is for the rest of navigations:
_profile
_calendar
_gallery
_message
_new_message
_register
_login
_logout
_search
_faq

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar - Hovering?

Post by poisonshift on October 19th 2011, 2:11 pm

Thanks. I don't have the time just right now but it looks like it will work. Thank you again, you're awesome.

poisonshift
Forumember

Male Posts : 67
Reputation : 0
Language : English
Location : Internet

http://www.re2mods.forummotion.com/

Back to top Go down

Solved Re: Navigation Bar - Hovering?

Post by MrMario on October 19th 2011, 6:57 pm

Hello,

I'll leave this open for you to confirm a solution.

MrMario
Helper
Helper

Male Posts : 22186
Reputation : 1830
Language : test

http://test.com

Back to top Go down

Solved Re: Navigation Bar - Hovering?

Post by poisonshift on October 20th 2011, 3:54 pm

Ok, this is the CSS that I've got for my site. I'm not sure about the Edit Your Profile either, so I just left it as profile, I'll need you to verify the navigation on this.

Also, this doesn't do anything when I put it into my css.

Code:
#i_icon_mini_index {
background-image: url('http://img257.imageshack.us/img257/8656/1home.png');
width: XYpx;
height: XYpx;
}
#i_icon_mini_index:hover {
background-image: url('http://img5.imageshack.us/img5/7623/2home.png');
width: XYpx;
height: XYpx;
}
#i_icon_mini_faq {
background-image: url('http://img843.imageshack.us/img843/9553/1faq.png');
width: XYpx;
height: XYpx;
}
#i_icon_mini_faq:hover {
background-image: url('http://img580.imageshack.us/img580/6917/2faq.png');
width: XYpx;
height: XYpx;
}
#i_icon_mini_search {
background-image: url('http://img193.imageshack.us/img193/8921/1search.png');
width: XYpx;
height: XYpx;
}
#i_icon_mini_search:hover {
background-image: url('http://img32.imageshack.us/img32/8297/2search.png');
width: XYpx;
height: XYpx;
}
#i_icon_mini_memberlist {
background-image: url('http://img444.imageshack.us/img444/439/1members.png');
width: XYpx;
height: XYpx;
}
#i_icon_mini_memberlist:hover {
background-image: url('http://img72.imageshack.us/img72/7335/2members.png');
width: XYpx;
height: XYpx;
}
#i_icon_mini_profile {
background-image: url('http://img651.imageshack.us/img651/5792/1profile.png');
width: XYpx;
height: XYpx;
}
#i_icon_mini_profile:hover {
background-image: url('http://img267.imageshack.us/img267/3930/2profile.png');
width: XYpx;
height: XYpx;
}
#i_icon_mini_message {
background-image: url('http://img718.imageshack.us/img718/2328/1messages.png');
width: XYpx;
height: XYpx;
}
#i_icon_mini_message:hover {
background-image: url('http://img440.imageshack.us/img440/4304/2messages.png');
width: XYpx;
height: XYpx;
}
#i_icon_mini_new_message {
background-image: url('http://img593.imageshack.us/img593/3889/1newmessage.png');
width: XYpx;
height: XYpx;
}
#i_icon_mini_new_message:hover {
background-image: url('http://img851.imageshack.us/img851/5323/2newmessage.png');
width: XYpx;
height: XYpx;
}
#i_icon_mini_register {
background-image: url('http://img853.imageshack.us/img853/5020/1register.png');
width: XYpx;
height: XYpx;
}
#i_icon_mini_register:hover {
background-image: url('http://img546.imageshack.us/img546/6044/2register.png');
width: XYpx;
height: XYpx;
}
#i_icon_mini_login {
background-image: url('http://img52.imageshack.us/img52/2807/1login.png');
width: XYpx;
height: XYpx;
}
#i_icon_mini_login:hover {
background-image: url('http://img411.imageshack.us/img411/8538/2login.png');
width: XYpx;
height: XYpx;
}
#i_icon_mini_logout {
background-image: url('http://img820.imageshack.us/img820/7669/1logout.png');
width: XYpx;
height: XYpx;
}
#i_icon_mini_logout:hover {
background-image: url('http://img831.imageshack.us/img831/6283/2logout.png');
width: XYpx;
height: XYpx;
}
#i_icon_mini_gallery {
background-image: url('http://img834.imageshack.us/img834/4715/1gallery.png');
width: XYpx;
height: XYpx;
}
#i_icon_mini_gallery:hover {
background-image: url('http://img215.imageshack.us/img215/6066/2gallery.png');
width: XYpx;
height: XYpx;
}

http://re2mods.forumotion.com/


Last edited by poisonshift on October 20th 2011, 3:55 pm; edited 1 time in total (Reason for editing : Added forum link)

poisonshift
Forumember

Male Posts : 67
Reputation : 0
Language : English
Location : Internet

http://www.re2mods.forummotion.com/

Back to top Go down

Solved Re: Navigation Bar - Hovering?

Post by Nera. on October 20th 2011, 4:03 pm

It can not do anything since you did not fill in the height and width settings as I told you to Very good

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar - Hovering?

Post by poisonshift on October 20th 2011, 4:15 pm

Oh I see... Is that pixel size?

poisonshift
Forumember

Male Posts : 67
Reputation : 0
Language : English
Location : Internet

http://www.re2mods.forummotion.com/

Back to top Go down

Solved Re: Navigation Bar - Hovering?

Post by Nera. on October 20th 2011, 4:19 pm

Yes.

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar - Hovering?

Post by poisonshift on October 20th 2011, 4:20 pm

Code:
#i_icon_mini_index {
background-image: url('http://img257.imageshack.us/img257/8656/1home.png');
width: XY100;
height: XY28;
}

Like that?

Because it is breaking the css on the page...

I've even tried that without the XY, don't know if that makes a difference. Still new to css.

poisonshift
Forumember

Male Posts : 67
Reputation : 0
Language : English
Location : Internet

http://www.re2mods.forummotion.com/

Back to top Go down

Solved Re: Navigation Bar - Hovering?

Post by Nera. on October 20th 2011, 4:35 pm

No affraid

XY is a place where number (the width and height of your images) should be. Like this:

Code:
#i_icon_mini_index {
background-image: url('http://img257.imageshack.us/img257/8656/1home.png');
width: 25px;
height: 25px;
}

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar - Hovering?

Post by poisonshift on October 20th 2011, 4:46 pm

It works now! Thank you a ton.

Would you please go over the nav names in my code above to make sure I have them linked right. I'm just wondering because you hadn't added a title for the Edit Your Profile.

Thanks.

poisonshift
Forumember

Male Posts : 67
Reputation : 0
Language : English
Location : Internet

http://www.re2mods.forummotion.com/

Back to top Go down

Solved Re: Navigation Bar - Hovering?

Post by Nera. on October 20th 2011, 4:50 pm

It is there you have set it already, that's this one _profile
I see the home working and you have to finish the width and height for others Very good

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar - Hovering?

Post by poisonshift on October 20th 2011, 4:53 pm

Yup. I'm putting in the height and width right now.

Thank you again, you're awesome.

I guess that is it. Topic solved.

poisonshift
Forumember

Male Posts : 67
Reputation : 0
Language : English
Location : Internet

http://www.re2mods.forummotion.com/

Back to top Go down

Solved Re: Navigation Bar - Hovering?

Post by Nera. on October 20th 2011, 4:55 pm

Okies Very Happy I'm glad, will leave the topic open for Cool-Guy, although he has vanished somewhere huhohi

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar - Hovering?

Post by poisonshift on October 20th 2011, 5:15 pm

Well just for clarity sake I will post the code I'm using so no one else has the problems that I had.

Code:
#i_icon_mini_index {
background-image: url('http://img257.imageshack.us/img257/8656/1home.png');
width: 100px;
height: 28px;
}
#i_icon_mini_index:hover {
background-image: url('http://img5.imageshack.us/img5/7623/2home.png');
width: 100px;
height: 28px;
}
#i_icon_mini_faq {
background-image: url('http://img843.imageshack.us/img843/9553/1faq.png');
width: 82px;
height: 28px;
}
#i_icon_mini_faq:hover {
background-image: url('http://img580.imageshack.us/img580/6917/2faq.png');
width: 82px;
height: 28px;
}
#i_icon_mini_search {
background-image: url('http://img193.imageshack.us/img193/8921/1search.png');
width: 138px;
height: 28px;
}
#i_icon_mini_search:hover {
background-image: url('http://img32.imageshack.us/img32/8297/2search.png');
width: 138px;
height: 28px;
}
#i_icon_mini_members {
background-image: url('http://img444.imageshack.us/img444/439/1members.png');
width: 160px;
height: 28px;
}
#i_icon_mini_members:hover {
background-image: url('http://img72.imageshack.us/img72/7335/2members.png');
width: 160px;
height: 28px;
}
#i_icon_mini_profile {
background-image: url('http://img651.imageshack.us/img651/5792/1profile.png');
width: 142px;
height: 28px;
}
#i_icon_mini_profile:hover {
background-image: url('http://img267.imageshack.us/img267/3930/2profile.png');
width: 142px;
height: 28px;
}
#i_icon_mini_message {
background-image: url('http://img718.imageshack.us/img718/2328/1messages.png');
width: 172px;
height: 28px;
}
#i_icon_mini_message:hover {
background-image: url('http://img440.imageshack.us/img440/4304/2messages.png');
width: 172px;
height: 28px;
}
#i_icon_mini_new_message {
background-image: url('http://img593.imageshack.us/img593/3889/1newmessage.png');
width: 241px;
height: 28px;
}
#i_icon_mini_new_message:hover {
background-image: url('http://img851.imageshack.us/img851/5323/2newmessage.png');
width: 241px;
height: 28px;
}
#i_icon_mini_register {
background-image: url('http://img853.imageshack.us/img853/5020/1register.png');
width: 165px;
height: 28px;
}
#i_icon_mini_register:hover {
background-image: url('http://img546.imageshack.us/img546/6044/2register.png');
width: 165px;
height: 28px;
}
#i_icon_mini_login {
background-image: url('http://img52.imageshack.us/img52/2807/1login.png');
width: 123px;
height: 28px;
}
#i_icon_mini_login:hover {
background-image: url('http://img411.imageshack.us/img411/8538/2login.png');
width: 123px;
height: 28px;
}
#i_icon_mini_logout {
background-image: url('http://img820.imageshack.us/img820/7669/1logout.png');
width: 155px;
height: 28px;
}
#i_icon_mini_logout:hover {
background-image: url('http://img831.imageshack.us/img831/6283/2logout.png');
width: 155px;
height: 28px;
}
#i_icon_mini_gallery {
background-image: url('http://img834.imageshack.us/img834/4715/1gallery.png');
width: 158px;
height: 28px;
}
#i_icon_mini_gallery:hover {
background-image: url('http://img215.imageshack.us/img215/6066/2gallery.png');
width: 158px;
height: 28px;
}

poisonshift
Forumember

Male Posts : 67
Reputation : 0
Language : English
Location : Internet

http://www.re2mods.forummotion.com/

Back to top Go down

Solved Re: Navigation Bar - Hovering?

Post by Cool-Guy on October 21st 2011, 6:16 am

@Nera. wrote:Okies Very Happy I'm glad, will leave the topic open for Cool-Guy, although he has vanished somewhere huhohi

Nah, I have been here all the time. Solved, and locked. cheers

Cool-Guy
Forumember

Posts : 295
Reputation : 0
Language : English

Back to top Go down

Solved Re: Navigation Bar - Hovering?

Post by Nera. on October 21st 2011, 6:55 am

king

Lock

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum