Full Image Not Showing on Hover ??

Everything to do with Joomla! 1.5 templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Locked
questech
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 145
Joined: Thu Dec 04, 2008 2:11 pm

Full Image Not Showing on Hover ??

Post by questech » Tue Feb 24, 2009 6:25 pm

Hello Everyone ;)

I am writing my first full template and I am fairly frustrated. One of my frustrations is a menuing problem.

I simply want to have the background graphic change from a light image, to a darkened version of the same image.

The problem is that the normal graphic (light version) displays correctly but the hover graphic only shows through the text as if there were a window frame the size of the text that the background image can be seen through.

Not the effect that I'm looking for.

I have included the CSS code that I'm using, but let me first explain:

* I used this code after every div tag that I have within that module position with no change.
* I tried swapping the dark graphic with the light one and when I do the dark graphic displays correctly and the light one is not fully visible when hovering.

If anyone can set me straight, I'de really appreciate it :)

Here's the code:



#top_tabs_1 .moduletable ul {
background: url(../images/menu_graphics/mw_menu_normal_bg.png) 100% 0 repeat-x;
height: 35px;
list-style: none;
color:#000;
}


#top_tabs_1 .moduletable ul a:hover {
background: url(../images/menu_graphics/mw_menu_hover_bg.png) 100% 0 repeat-x;
color:#FFFFFF;
}

kanoorani
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 186
Joined: Sat Mar 01, 2008 1:36 pm

Re: Full Image Not Showing on Hover ??

Post by kanoorani » Wed Feb 25, 2009 6:04 am

Try changing this:

#top_tabs_1 .moduletable ul {
background: url(../images/menu_graphics/mw_menu_normal_bg.png) 100% 0 repeat-x;
height: 35px;
list-style: none;
color:#000;
}

To this:

#top_tabs_1 .moduletable ul a {
background: url(../images/menu_graphics/mw_menu_normal_bg.png) 100% 0 repeat-x;
height: 35px;
list-style: none;
color:#000;
}

See the small difference after ul ... Not sure but may be this helps you.
K.A.Noorani
Lead Developer of Twitterface
http://www.twitterface.com

questech
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 145
Joined: Thu Dec 04, 2008 2:11 pm

Re: Full Image Not Showing on Hover ??

Post by questech » Wed Feb 25, 2009 10:08 am

Hi :)

Thanks for the reply!

Couple of things...

* The code that you referenced is the code that works. The first block of code displays the background button images correctly, I'm having a problem with the second block, which should show s different graphic when being hovered over.

* I tried your example for experimental purposes and it actually created the problem for my normal background images... they no longer displayed correctly. With the "a" in the code, the image only partially displays, tightly around the text.

* This leads me to believe that the "a" in "a:hover" is the culprit.

Maybe this can only be done using Java??

Here are some images to help explain.

- Normal Button State:
Normal Button.png
- Here is what it looks like now when I hover:
Current Hover Button.png
- Here is what I want it to do:
Correct Hover Button.png
If you or any other members can help me through this, I would be very grateful.

Thanks Again ;)
You do not have the required permissions to view the files attached to this post.

kanoorani
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 186
Joined: Sat Mar 01, 2008 1:36 pm

Re: Full Image Not Showing on Hover ??

Post by kanoorani » Thu Feb 26, 2009 7:56 am

O.I.C ... let's try this one:

Code: Select all

#top_tabs_1 .moduletable ul li {
float:left;
}
#top_tabs_1 .moduletable ul li a {
display:block;
background: url(../images/menu_graphics/mw_menu_normal_bg.png) 100% 0 repeat-x;
height: 35px;
list-style: none;
color:#000;
}
#top_tabs_1 .moduletable ul li a:hover {
background: url(../images/menu_graphics/mw_menu_hover_bg.png) 100% 0 repeat-x;
color:#FFFFFF;
}
Make sure that both the BG images have 35px height
K.A.Noorani
Lead Developer of Twitterface
http://www.twitterface.com

questech
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 145
Joined: Thu Dec 04, 2008 2:11 pm

Re: Full Image Not Showing on Hover ??

Post by questech » Sat Feb 28, 2009 9:58 pm

Hello kanoorani :)

That did it !!!!

Thanks So Much :D

iIt was adding the "a" in this line of code that did it:

Code: Select all

#top_tabs_1 .moduletable ul li a {
Please, if you will, explain the logic.

All I can guess is that the "a" is the universal anchor identifier. And although the background image showed up normally without the "a" in the code, it somehow prevented or didn't allow the hover background image to display for the hover code:

Code: Select all

#top_tabs_1 .moduletable ul li a:hover {
.

If you could clarify it for me, I'll be able to sleep at night :)

Thanks Again !!


Locked

Return to “Templates for Joomla! 1.5”