Milonic provide full featured pull down web menus for some of the worlds largest companies
click here to see what it can do for you

Download Milonic DHTML Menu
Buy Milonic DHTML Menu

Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:20

Re: onclass failing - background image not working via CSS


Poster: nwilcox
Dated: Tuesday May 6 2008 - 20:55:55 BST

I didn't pursue this further.. client was happy with what we had.. thanks!

onclass failing - background image not working via CSS


Poster: nwilcox
Dated: Thursday April 10 2008 - 16:04:30 BST

onclass is only partially working for me on my menu layout file.
--> Image <-- Here is the image that I'd like to have placed at the bottom left corner of each menu item so I can create a variable height items but still have the rounded bottom corner


The text styles are working but I cannot get the background image to display (or any image to display for that matter).

http://clients1.serverside.net/agc-ca/?page=content

I have placed a unique class for the onclass declaration but it is not appearing in the menu on rollover.

Any help would be appreciated. It is a rounded bottom left corner graphic that will always be assigned to the bottom left of the menu item button.

What am I doing wrong?

Thanks!

Re: onclass failing - background image not working via CSS


Poster: Ruth
Dated: Thursday April 10 2008 - 19:14:18 BST

Hi,

Can you be more specific as to an item I can test or something. I can't figure out where you want the image to be to make anything look round. The only round area I see is the tab looking at the top, right and left and they look rounded in mouse off and on position.

Ruth

Re: onclass failing - background image not working via CSS


Poster: nwilcox
Dated: Thursday April 10 2008 - 19:38:06 BST

sorry Ruth

Image

In the left column navigation column when the mouse is over a link, the blue background bar has a rounded left top and bottom corner. On the site now I can get the top roudned corner but since the text could be 1 line or 2 lines, I can't put the bottom rounded corner in the background of the menu item. I have a small graphic (that I showed above in the first post) that needs to be placed into the lower left side of each menu item (via CSS) to create the appropriate effect.

Does that make sense? I've applied the onclass CSS and I've tested it by changing the text decoration and it works but the background image in the class isn't working.

Thanks!
Nick

Re: onclass failing - background image not working via CSS


Poster: Ruth
Dated: Thursday April 10 2008 - 22:08:46 BST

Hi,

Not a problem, but could I ask a favor? Can you put the images you use in the menu someplace where I can get them. It takes forever to copy paste url from the data file, then select and save image.

Ruth

Re: onclass failing - background image not working via CSS


Poster: nwilcox
Dated: Thursday April 10 2008 - 22:18:35 BST

Ruth wrote:
Hi,

Not a problem, but could I ask a favor? Can you put the images you use in the menu someplace where I can get them. It takes forever to copy paste url from the data file, then select and save image.

Ruth


Sure here you go and thanks! Maybe I'm just not doing something right and I just need another set of eyes :oops:

The ones you'll need are as follows

Image rounded_top.gif

Image rounded_bottom.gif

Image separator_image.gif

Image arrow_v_off.gif

Image arrow_v_over.gif

The css I have set up for the onclass and off class is below and sits in a css file in a folder off the root called css/:
Code:
.mButtonOff {
   background-image: none;
   text-decoration: none;
}
.mButtonOver {
   background-image: url("../javascript/milonic/rounded_bottom.gif");   
   background-position: bottom left;
   background-repeat: no-repeat;
   text-decoration: none;
}

Re: onclass failing - background image not working via CSS


Poster: Ruth
Dated: Friday April 11 2008 - 0:36:33 BST

Hi,

Well, the problem is that it won't accept the background image being used in both the data file and the css file. The data file is overriding the css to show the overbgimage.

I have found a solution, but I need to wait for Andy to respond because there is a bug when using an image, imageposition and a subimage. If you want it now, I'll post but you will have to remove the subimages from the menu in order for it to work

Ruth

Re: onclass failing - background image not working via CSS


Poster: nwilcox
Dated: Friday April 11 2008 - 15:54:56 BST

I think I can work around it, please give me an idea on how to proceed

Re: onclass failing - background image not working via CSS


Poster: Ruth
Dated: Friday April 11 2008 - 17:56:05 BST

Hi,

Sure :)

First, you need to make a new image, a blank.gif that is the same size as the rounded_bottom.gif image.

I made a new style since I put everything into the css file that is a css thing, and I didn't know if the style that you were using was also used in submenus or something. So, the new style for that main menu is

Code:
with(menuStyleVerticalSub_main=new mm_style()){
offclass="mButtonOff";
onclass="mButtonOver";
image="blank.gif";
overimage="rounded_bottom.gif";
imageposition="bottom";
pagebgcolor="transparent";
pagecolor="black";
separatorsize=1;
separatorimage="separator_image.gif";
subimagepadding=0;
}


Then the css stuff for mButton classes

Code:
.mButtonOff{
      background-color: transparent;
      color:#5A5A5A;
      font-style:normal;
      font-family:arial,tahoma,serif;
      font-size:11px;
      border:0px solid #fff2e1; 
      margin:0px;
      padding:3px 2px 3px 12px;
     text-decoration:none;
    
      }
     
.mButtonOver{
      background: transparent url(rounded_top.gif) top left; background-repeat: no-repeat;
      color:#FFFFFF;
      font-style:normal;
      font-family:arial,tahoma,serif;
      font-size:11px;
      border:0px solid #fff2e1; 
      margin:0px; padding:3px 2px 3px 12px;
     text-decoration:none;
      }


And this is the menu, itself

Code:
<script language=javascript type=text/javascript>
<!--
with(milonic=new menuname("SideMenu")){
style=menuStyleVerticalSub_main;
alwaysvisible=1;
menuwidth="180px";
orientation="vertical";
position="relative";
aI("text=AGC Districts;showmenu=AboutAGCSubVertical;");
aI("text=Find A Member;status=Link 2;showmenu=AboutAGCSubVertical;");
aI("text=How to Join;status=Link 3;showmenu=AboutAGCSubVertical;");
aI("text=Buy A Product;status=Link 4;showmenu=AboutAGCSubVertical;");
aI("text=Search Jobs;status=Link 5;showmenu=AboutAGCSubVertical;");
aI("text=Get Involved;status=Link 6;showmenu=AboutAGCSubVertical;");
}
drawMenus();   
-->
</script>



The rounded_top is now the overbgimage and you don't need a matching bgimage because with the css class it's not necessary. As I said, you cannot use the subimage right now because you must use the imageposition="bottom"; in the style to get that rounded_bottom.gif to appear at the bottom of the left side, but to offset that is the advantage that you can now make your rounded_top.gif image longer, say 150px in length, and when someone who needs larger fonts for accessibility issues, you will still have a complete 'tab' look since the css is set for no repeat for the bgimage, and if you make it that long, it works up to 500% font size increase and still looks like a tab. Hope this helps.

Ruth

Re: onclass failing - background image not working via CSS


Poster: nwilcox
Dated: Friday April 11 2008 - 18:01:08 BST

HI Ruth... okay I'll give this a try.. but the subimage (in this case the double arrow graphic) can't be used?

If this is a bug, will it be fixed?

Thank you1

Re: onclass failing - background image not working via CSS


Poster: Ruth
Dated: Friday April 11 2008 - 20:50:22 BST

No, it can't be used. I did report it to Milonic. The problem is that you need to set imageposition="bottom"; you have to set it for this setup to make sure the rounded_bottom.gif goes to the bottom left. But setting imageposition seems to also be affecting the subimage. Nothing I tried stopped the problem.


Ruth

Re: onclass failing - background image not working via CSS


Poster: nwilcox
Dated: Friday April 11 2008 - 20:54:03 BST

wow okay... I guess I'll have to leave it as I have it now. I really need the subimage arrow more than arounded corner

I really appreciate the effort you took to help me out. Is there a possibilty of that being fixed in a future release of the menu?

Re: onclass failing - background image not working via CSS


Poster: Ruth
Dated: Friday April 11 2008 - 20:54:36 BST

Hi,

Well, maybe you can try using subimagecss and onsubimagecss. I'll play with it and see if that will allow a fix.

Ruth

Re: onclass failing - background image not working via CSS


Poster: nwilcox
Dated: Friday April 11 2008 - 21:04:15 BST

Ruth wrote:
Hi,

Well, maybe you can try using subimagecss and onsubimagecss. I'll play with it and see if that will allow a fix.

Ruth


oh! I didn't realize ther was an submimagecss... maybe that would work? Cool thanks Ruth!

Re: onclass failing - background image not working via CSS


Poster: Ruth
Dated: Friday April 11 2008 - 21:04:38 BST

Welcome. But, I can't test it because I have no clue how to do images other than background images in css. I'm not too css savvy :( Hopefully you know how to do a class for the subimages.

Ruth