Home » Forum
NoNumber!

Joomla!® Websites & Extensions
development  -  support  -  consultancy

I try to respond within 48 hours (excluding weekends).
If I haven't responded by then, feel free to post a reminder or bug me via email.
My last reply was: 16 Hours, 57 Minutes ago.

Welcome, Guest
Please Login or Register.    Lost Password?
NoNumber! Forum
Extension Support
CustoMenu

[SOLVED] Sizing the clickable area?
(1 viewing) (1) Guest
Go to bottomPage: 1
TOPIC: [SOLVED] Sizing the clickable area?
#478
[SOLVED] Sizing the clickable area? 3 Years, 3 Months ago  
Hi, so far so good with CustoMenu but I'm having an issue that I can't figure out.

I'm using CSS background images with no text and all of my images are the same height, but different widths.

I have the images showing up partially when I have text selected to show but the only part of the image that shows is the area behind the text. When I set text to hide, I see about a single space's worth of the background image.

Here's my CSS:

.customenu_topmenu
{
         background-color: #CC0000; /*set to see menu area*/
         height: 35px;
}

.customenu_topmenu a
{
         text-decoration: none; /*to get rid of underline*/
}

.customenu_topmenu a span.span_link_1
{
         height: 35px;
         width: 53px; /*h or w doesn't seem to help*/
}

/*background-images for different states*/

.customenu_topmenu a span.span_link_1 span.span_normal
{
    background-image: url('../../../images/stories/top_menu/top_menu_off_01.png');
         background-repeat: no-repeat;
}

.customenu_topmenu a span.span_link_1 span.span_hover
{
    background-image: url('../../../images/stories/top_menu/top_menu_on_01.png');
         background-repeat: no-repeat;
}

.customenu_topmenu a span.span_link_1 span.span_active
{
    background-image: url('/'../../../images/stories/top_menu/top_menu_active_01.png'');
         background-repeat: no-repeat;
}

No matter what I try, the clickable area controls how much of the background image I can see.

Any ideas? Seems like you've done a great job helping out with other issues here and I know I'm not trying anything too strange, seems exactly like what your module was made for.

Thanks in advance!
clockeby
Posts: 6
User OfflineClick here to see the profile of this user
The administrator has disabled public write access.
 
#480
[SOLVED] Sizing the clickable area? 3 Years, 3 Months ago  
try this instead:
.customenu_topmenu a span.span_link_1 span {
         height: 35px;
         width: 53px;
}

So set the sizes on the most inner span. Keep in mind that the padding has effect on the sizes.
If you want to set the sizes on the first span, you'll have to add this:
.customenu_topmenu a span {
         dislay: inline-block;
}
Peter van Westen
Admin
Posts: 9165
User OfflineClick here to see the profile of this user
The administrator has disabled public write access.
Need to contact me directly? Go to my contact page.
If you use any NoNumber! extensions, please post a rating and a review at the Joomla! Extensions Directory.
Are you happy with the support? Please consider buying a License Code to help me to continue development and support.
  
#481
[SOLVED] Sizing the clickable area? 3 Years, 3 Months ago  
Okay, I've added those but still no luck... All I can see of the background image is what is visible where the text is. And if I hide the text, the button disappears almost completely.

The background images are there, the normal, hover and active states all work, but I can't see the full images. Do you have a demo of a menu using only images? I could compare source HTML/CSS code and see what I'm doing wrong...

Seems like it should be simple but for some reason this isn't working.
clockeby
Posts: 6
User OfflineClick here to see the profile of this user
The administrator has disabled public write access.
 
#485
[SOLVED] Sizing the clickable area? 3 Years, 3 Months ago  
This website uses CustoMenu...

Could you send me an online example?

If you use FireFox with FireBug you can see what elements get what styles. Maybe some other style is overruling what you have set.
Peter van Westen
Admin
Posts: 9165
User OfflineClick here to see the profile of this user
The administrator has disabled public write access.
Need to contact me directly? Go to my contact page.
If you use any NoNumber! extensions, please post a rating and a review at the Joomla! Extensions Directory.
Are you happy with the support? Please consider buying a License Code to help me to continue development and support.
  
#493
[SOLVED] Sizing the clickable area? 3 Years, 3 Months ago  
I've been checking the file in Firefox using Firebug. It's my main tool for CSS issues. I'm going to copy your default.css file for the menu layout used here and just change the background images and see what that accomplishes.

I could create the menu you have above with the same repeating background image for each button & text on top fairly easily. The main issue I'm having is that with the text turned off, the background images disappear.

I'll get back to you once I've tried your CSS.

Thanks again for your help!
clockeby
Posts: 6
User OfflineClick here to see the profile of this user
The administrator has disabled public write access.
 
#526
[SOLVED] Sizing the clickable area? 3 Years, 3 Months ago  
Well, the addition of the default.css from NoNumber! default menu did the trick. I modified it to fit my height/width and did some tweaking to the padding.

I think the trick was the display: inline-block on the a, hover and second span.

I took care of the padding on the individual normal, hover and active spans due to each button being a different size and with Hide Text set to "yes" on the module, the size of the <a href> element was left to a single space (about 3 pixels wide).

Here's what the final CSS looks like:

/* ---------- CUSTOMENU STYLING ---------- */

div.customenu_topmenu {
}

div.customenu_topmenu,
div.customenu_topmenu a,
div.customenu_topmenu span {
    margin: 0px;
    padding: 0px;
}

div.customenu_topmenu a span span {
    float: left;
    height: 35px;
    padding: 0px;
    text-align: center;
    cursor: pointer;
}

div.customenu_topmenu a,
div.customenu_topmenu a:hover,
div.customenu_topmenu a span span{
    font-size: 12px;
    font-weight: normal;
    text-decoration: none;
    color: #000000;
    display: inline-block; /* NEEDED FOR IE ON MAC */
}

/* ---------- BACKGROUND IMAGE STYLING ---------- */

/* HOME */
.customenu_topmenu a span.span_link_1 span.span_normal
{
    background-image: url('/'../../../images/stories/top_menu/top_menu_off_01.png'');
         background-repeat: no-repeat;
         padding-right: 50px;

}

Thanks for all your help! This was definitely tricky but well worth it. I'll make sure to leave a great comment on the joomla extensions page!
clockeby
Posts: 6
User OfflineClick here to see the profile of this user
The administrator has disabled public write access.
 
#527
[SOLVED] Sizing the clickable area? 3 Years, 3 Months ago  
I'll implement it in the css of the next version...
Peter van Westen
Admin
Posts: 9165
User OfflineClick here to see the profile of this user
The administrator has disabled public write access.
Need to contact me directly? Go to my contact page.
If you use any NoNumber! extensions, please post a rating and a review at the Joomla! Extensions Directory.
Are you happy with the support? Please consider buying a License Code to help me to continue development and support.
  
Go to topPage: 1
NoNumber! Forum
Extension Support
CustoMenu
Moderators: Peter van Westen
MaxCDN | Content Delivery Network | Accelerate your site to the max
hosting joomla
Open Source Training | Online Joomla! Training and Support
Copyright © 2009-2012 - NoNumber! - All Rights Reserved - Terms of Service - Privacy Policy

NoNumber.nl is not affiliated with or endorsed by the Joomla Project or Open Source Matters.
The Joomla name and logo are used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.