onclass failing - background image not working via CSS
- nwilcox
- Mega Advanced
- Posts: 269
- Joined: Sat Aug 20, 2005 6:14 am
- Location: Indianapolis, IN
- Contact:
onclass failing - background image not working via CSS
onclass is only partially working for me on my menu layout file.
--> <-- 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!
--> <-- 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
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
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
- nwilcox
- Mega Advanced
- Posts: 269
- Joined: Sat Aug 20, 2005 6:14 am
- Location: Indianapolis, IN
- Contact:
Re: onclass failing - background image not working via CSS
sorry Ruth
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
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
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
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
- nwilcox
- Mega Advanced
- Posts: 269
- Joined: Sat Aug 20, 2005 6:14 am
- Location: Indianapolis, IN
- Contact:
Re: onclass failing - background image not working via CSS
Sure here you go and thanks! Maybe I'm just not doing something right and I just need another set of eyesRuth 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
The ones you'll need are as follows
rounded_top.gif
rounded_bottom.gif
separator_image.gif
arrow_v_off.gif
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: Select all
.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
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
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
- nwilcox
- Mega Advanced
- Posts: 269
- Joined: Sat Aug 20, 2005 6:14 am
- Location: Indianapolis, IN
- Contact:
Re: onclass failing - background image not working via CSS
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
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
Then the css stuff for mButton classes
And this is the menu, itself
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
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: Select all
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;
}
Code: Select all
.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;
}
Code: Select all
<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
- nwilcox
- Mega Advanced
- Posts: 269
- Joined: Sat Aug 20, 2005 6:14 am
- Location: Indianapolis, IN
- Contact:
Re: onclass failing - background image not working via CSS
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
If this is a bug, will it be fixed?
Thank you1
Re: onclass failing - background image not working via CSS
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
Ruth
- nwilcox
- Mega Advanced
- Posts: 269
- Joined: Sat Aug 20, 2005 6:14 am
- Location: Indianapolis, IN
- Contact:
Re: onclass failing - background image not working via CSS
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?
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
Hi,
Well, maybe you can try using subimagecss and onsubimagecss. I'll play with it and see if that will allow a fix.
Ruth
Well, maybe you can try using subimagecss and onsubimagecss. I'll play with it and see if that will allow a fix.
Ruth
- nwilcox
- Mega Advanced
- Posts: 269
- Joined: Sat Aug 20, 2005 6:14 am
- Location: Indianapolis, IN
- Contact:
Re: onclass failing - background image not working via CSS
oh! I didn't realize ther was an submimagecss... maybe that would work? Cool thanks Ruth!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
Re: onclass failing - background image not working via CSS
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
Ruth
- nwilcox
- Mega Advanced
- Posts: 269
- Joined: Sat Aug 20, 2005 6:14 am
- Location: Indianapolis, IN
- Contact:
Re: onclass failing - background image not working via CSS
I didn't pursue this further.. client was happy with what we had.. thanks!