Menu in Table

[Simcfc73]

Hi,

I'm starting putting a menu on my school website and decided that I wanted one in a table. I've got the default one to display in the table where I want and have made it 100% but can't get the default images to change. I'm wanting to use the bgimage= command to make the menu look better.

Can someone tell me if this is do-able and poit me in the right direction.

After I get this sorted I will be moving onto putting another floating menu on the website which scrolls with the webpage keeping its relative position but I will cross that briodge when I get to it.

Thanks

Cool product by the wat

Simon Smith

[Ruth]

Hi Simon,

I'm not sure what you mean by can't get the bgimage to change. Could you define a little more what is happening and what you want to happen?

As to the second part, you can do that all from the one file if you want. Unless the 'floating menu' is extremely long. If you're talking about having the same menu you have in the table also being a menu that floats, you need to make sure you call the floating menu something else, i.e. MainMenuu for the table and MainMenu1, or MainFloat, or something like that.

Ruth

[Simcfc73]

Thanks for the reply Ruth,

What I want to do is put a Background image on the menu buttons instead of the standard background colour. I've got the menu in a table to work fine using the example and changed the menu labels and links but I would like to use buttons like in menusample18.

I've just got the standard code in the Body of the HTML just like in menusample9. Should it just be a case of adding the bgimage="/ and the clickbgimage="/ into the BODY and into the js files.

Sorry if I am asking stupid questions, I'm not that good at HTML.

[Ruth]

If you want a bgimage which is the same for every item, then you would code bgimage="imagefilename"; in the menuStyle. If you code it in the menu style it will appear in every item in every menu that uses that style. If you have different bgimage for each item then you would code it in the item itself as bgimage=imagefilename; note that in the style it has quotes around the name but in the item it doesn't. Change the bgcolors to onbgcolor="transparent"; offbgcolor="transparent";
Ruth

[Simcfc73]

Thanks for the reply Ruth.

I've almost got it now, the image background is fine and the menus seem okay but there is one little thing thats not quite right.

My code is below. I've made the itemwidth in px for all except the last one which I have put as a % to fill the menu. I've just put 50% just to test it.

with(milonic=new menuname("Main Menu")){
orientation="horizontal";
position="relative";
menuwidth="100%";
menualign="centre";alwaysvisible=1;
style=menuStyle;
aI("text=General Information;showmenu=General;itemwidth=160;");
aI("text=The School;showmenu=School;itemwidth=100;");
aI("text=Education;showmenu=Education;itemwidth=100;");
aI("text=Magazine;showmenu=Magazine;itemwidth=100;");
aI("text=Contact;showmenu=Contact;itemwidth=100;");
aI("text=Parent Info/Links;showmenu=Info;itemwidth=140;");
aI("text=Home;url=http://www.fulneckschool.co.uk/;itemwidth=50%");
}
drawMenus();

I've used the bgimage= in the js file to put a background image on the menu but wondered if there is any way to get the image to stretch to accomodate the % I am using. Its just I am using a button which is 160px and looks fine when it gets shrunk to 100px but when the last menu is displayed using the % it repeats the image and looks awful.

Thanks in advance.

[Ruth]

Hi,

If you have a link to the page it would be better, if not, I need to have the menuStyle, and the page layout, at least, so I can see what you mean and test some solutions.

Ruth

[Simcfc73]

Hi Ruth,

Here is a link to the website. Its a work in progress so its rough and ready. As you can see they all use the same Background image file and the one at the left shows the right hand shadow. I can get round the menu icons which are 100px width okay its just the home button on the right which doesn't display right.

I wouls like the home button on the left but the % seems to throw everything out.

http://www.fulneckschool.co.uk/newsite/index.htm

Thanks

[Ruth]

Hi,

OK, I did some designing. The style section at the top of the page is now

Code: Select all

<style type="text/css">
<!--
body {margin:0px 15px 0px 15px;
	background-color: #CCCCCC;
}
.tdleft{background: #60bd27 url(bg_left.gif);background-repeat:no-repeat;width:10px;}
.tdright{background: #60bd27 url(bg_right.gif);background-repeat:no-repeat;width:10px;
background-position:top right}
-->
</style>

Then I added two cells to the table with backgrounds that match the menu, and two small items to the menu with backgrounds, and a menubgimage so when the resolution changes the part that is outside the menu, the 100% span part will look just like the items. This is your new table

Code: Select all

<table width="100%" border=0  cellpadding="0" cellspacing="0">
<tbody>
<tr>
<!--NEW LEFT TABLE CELL WITH BGIMAGE TO MATCH MENU -->
<td class="tdleft" width=10></td>
<td height="20" bgcolor="#1C0E7D" class=menu1>
  <script>
with(milonic=new menuname("Main Menu")){
style=menuStyle;
alwaysvisible=1;
orientation="horizontal"; 
position="relative"; 
menuwidth="100%"; 
menualign="center";
align="center";
aI("text= ;bgimage=bg_start.gif;itemwidth=3;type=header;");
aI("text=General&nbsp;Information;showmenu=General;itemwidth=150;");
aI("text=The&nbsp;School;showmenu=School;itemwidth=95;");
aI("text=Education;showmenu=Education;itemwidth=92;");
aI("text=Magazine;showmenu=Magazine;itemwidth=92;");
aI("text=Contact;showmenu=Contact;itemwidth=80;");
aI("text=Parent&nbsp;Info/Links;showmenu=Info;itemwidth=134;");
aI("text=Home;url=http://www.fulneckschool.co.uk/;itemwidth=54");
aI("text= ;itemwidth=3;type=header;");
   }
drawMenus();		
	</script>
</td>
<!--NEW RIGHT TABLE CELL WITH BGIMAGE  TO MATCH MENU -->
<td class="tdright" width=10></td>
</tr></tbody> </table> 

I changed the width of your main menu to 100%, setting the right and left margins at 15px instead of using 95% in the table, it was easier to do the layout that way.

LINKS REMOVED: 12/30/08



Hope this helps.

Ruth

[Simcfc73]

Really appreciate the work you've done for me. Where do I send the cheque.???

You can delete the stuff off your site now as I have downloaded it.

Thanks Again.

[Ruth]

Hi,

You already sent it.....the thanks works just fine

Ruth