Centured Menu with different styles

[keenstreet]

Hi all,

I'm trying to do centre alignged menu in a table with one button an image for the internal pages... it all works but...

I want the mouseover for the button with the image to display a different colour.

Can it be done, or do I need to make the entire image include the text and have 'no text' for the menu?

Thanks

Vicki

[Andy]

Not sure you can apply colors to a menu item that has an image inside it.

If we could see a URL, I'd be able to say for sure though, is this possible?

Cheers
Andy

[keenstreet]

Hi Andy,

It's not visible at the moment but will be later, can I let you know when it's up for you to look at?

Thanks

Vicki

[keenstreet]

Hi Andy,

I've ftped the site to a 'client area' :
http://www.keenstreet.com.au/client_area/celluose/

On the 'web visible' server it's got another problem as well with the button I want to act differently:

On the inner pages the 'home' button I have an image that is a rollover, I don't want the background for the words to change for this button only the text colour (which I want to be different from the other buttons).

The mouseover image is now not showing but does on my development 'web server' (a linux webserver without external IPs).

I've put the code into a SSI (server side include) which works well on my server but not up on the one I've just ftped???

The code for each page is:
<div align="center">
<script>
with(milonic=new menuname("Main Menu")){
style=menuStyle;
top=155;
left=200;
alwaysvisible=1;
orientation="horizontal";
overfilter="";
position="relative";
aI("text=About Us :;url=/client_area/cellulose/about.shtml;showmenu=about;");
aI("text=Research :;url=/client_area/cellulose/research.shtml;showmenu=research;");
aI("text=News :;url=/client_area/cellulose/newsletter.shtml");
aI("text=Events :;url=http://www.cellulosevalley.com/cgi-bin/ ... lendar.cgi");
aI("text=Contact :;url=/client_area/cellulose/contacts.shtml;showmenu=contacts;");
aI("text=Links :;url=/client_area/cellulose/links.shtml;showmenu=links;");
aI("text=Home ;image=/client_area/cellulose/images/btn_homeoff.gif;overimage=/client_area/cellulose/images/btn_homeon;url=/client_area/cellulose/index.html");
}
drawMenus();
</script>
</div>


Many thanks for your help, I'm on a deadline of a couple of hours to get this happening.

Thanks again, hope you can help.

Regards

Vicki

[keenstreet]

Bugger... I did a typo with the URL (rushing to finish stuff), here it is:

http://www.keenstreet.com.au/client_area/cellulose/

[keenstreet]

Hi Andy,

I've now ftped the site to it's home server http://www.cellulosevalley.com.au it's still got the colour mouseover the same as the other buttons on the 'home' button which is the one I'd like to change.

Regards

Vicki

[Ruth]

Hi Vicki,
Use your homeStyle for the pages on which you have that home link you have it set it so the onbgcolor is the same as the offbgcolor so the background won't change color on mouseover, and the oncolor is silver as you set it. Get rid of the separator in that menu, you've got it set to 3 but the same color as the background so it doesn't show anyway. I'd suggest putting in subimagepadding=3; and change your padding to 5 to overcome the shift in the menu in IE from the use of overfilter shadow. Here's what I did in the homeStyle, you can test and see if that works for you.

Code: Select all

with(homeStyle=new mm_style()){
onbgcolor="#336699";
oncolor="#F8F8F8";
offbgcolor="#336699";
offcolor="#FFFFFF";
bordercolor="#336699";
borderstyle="solid";
borderwidth=1;
padding=5;
fontsize="12px";
fontstyle="normal";
fontfamily="Verdana, Arial, Helvetica, sans-serif";
subimage="arrow.gif";
subimagepadding="3";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color='#777777', Direction=135, Strength=5)";
outfilter="randomdissolve(duration=0.3)";
}

In the subStyle I only made one change making the padding=5;

On the links page I removed the divs and put a one cell table there. The menu uses divs and in some browsers it behaves weirdly if you put it in a div, so instead I used a table. Beginning with where you originally had the div I did this

Code: Select all

<TD noWrap colSpan=2><table border="0" align="center">
<tr>
    <td> <SCRIPT>
with(milonic=new menuname("Main Menu")){
style=homeStyle;
alwaysvisible=1;
orientation="horizontal";
position="relative";
itemwidth=100;
itemheight=32;
aI("text=About Us:;url=/about.shtml;showmenu=about;");
aI("text=Research:;url=/research.shtml;showmenu=research;");
aI("text=News:;url=/newsletter.shtml");
aI("text=Events:;url=http://www.cellulosevalley.com/cgi-bin/calendar/calendar.cgi");
aI("text=Contact:;url=/contacts.shtml;showmenu=contacts;");
aI("text=Links:;url=/links.shtml;showmenu=links;");		
aI("text=Home;image=btn_homeoff.gif; overimage=btn_homeon.gif;url=/index.html");
}
drawMenus();		
</SCRIPT></td>
</tr>
</table></TD></TR>

As you can see I put in itemwidth=100 so it wouldn't expand the menu beyond the main table which you have at 740. Setting it to 150px makes the menu over 1050px wide which is wider than the table. I also put in itemheight=32, that sets the text better so it is all pretty much on the same level across because of the home image which is 32px high. The table is centered so the menu will center. Since the menu is in a table and relatively positioned, I removed the top and left. Hope that helps.

Ruth

[keenstreet]

Hi Ruth,

Thanks tons for your reply... I will put all your suggestions to work and will get back (probably a couple of day, the rate I'm going at the moment) and let you know.

Again, many thanks


Vicki