how to put a heading above the shtml list based menu

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:18

how to put a heading above the shtml list based menu

Poster: timmy toad
Dated: Saturday January 14 2006 - 15:48:28 GMT

Hiya i am a newbie, i like the menu a lot, i am using the list based version, i am trying to put a header above the menu preferably in a table, but everything i try seems tyo get overwritten by the menu.

can anyone help please, but be gentle with me, TA

tim

Poster: Ruth
Dated: Saturday January 14 2006 - 16:33:23 GMT

Hi Timmy,

We'd be glad to help, but we need to see the page with the menu on it to work out what you want if it's possible to do.

Ruth

Poster: timmy toad
Dated: Sunday January 15 2006 - 16:57:28 GMT

hi there ruth, of course i realise now, i should have let you see where the menu is.

this is my exsiting site into which i was going introduce the Milonic menu if and when i get to work out how it works, LOL.
http://www.timparsons.net the heading i would like above the menu is "Flitwick PC Clinic"

the page where i have put the Milonic menu is :-http://homepage.ntlworld.com/tim.parsons/

tim

Header

Poster: Migru
Dated: Sunday January 15 2006 - 23:41:38 GMT

Hi

Shift the menu down, by setting e.g.

Code:

top=70;left=10;

and just behind the <body> tag place e.g.

Code:

<b><font size="+5">Heading for the menu</font></b>

I did not make a test with a table.

Michael

Poster: timmy toad
Dated: Sunday January 15 2006 - 23:54:16 GMT

thanks pal, i shall try that, not too bothered about tables at the moment, it is now midnight where i am, hence my bed time but will try your kins suggestion tommorrow, thanks buddy.

tim

Poster: Ruth
Dated: Monday January 16 2006 - 2:52:22 GMT

The advantage to tables if you want the menu to always be below the header is that if the header is in a table cell and the menu in the one below it, when resolution changes the menu will move with the header.

Given your main site, this would be the code with the downloaded menu in it below that header.

Code:

<TD width="80%"><table cellpadding="0" cellpsacing="0" align="center" border=1>
<tr>
       <td><DIV align=center><TABLE borderColor=#3c3c91 height=57 borderColorDark=#3b3c91 width="68%" 
      align=center border=3>
        <TBODY>
        <TR vAlign=top align=middle>
          <TD height=72>
            <DIV><FONT color=#006666 size=7><B>Flitwick PC 
            Clinic</B></FONT></DIV></TD></TR></TBODY></TABLE>
      </DIV></td>
</tr>
<tr>
       <td>
<script>with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
style=menuStyle;
position="relative";
aI("status=Back To Home Page;text=Home;url=http://www.milonic.com/;");
aI("showmenu=Samples;text=Menu Samples;");
aI("showmenu=Milonic;text=Milonic;");
aI("showmenu=Partners;text=Partners;");
aI("showmenu=Links;text=Links;");
aI("showmenu=MyMilonic;text=My Milonic;");
}
drawMenus()
</script></td>
</tr>
</table>
      
      </TD></TR>
  <TR>
    <TD vAlign=top width="80%"><!-- #BeginEditable "main" -->

Please note that the div tag is left in, but it does NOT go around that whole area so the menu is outside the div as it should be. In order to do that, I removed the main menu from the menu data file. Look at the table sample for more information and there are links below my name to other info, including table placement.

Ruth

Poster: timmy toad
Dated: Monday January 16 2006 - 6:55:33 GMT

thanks for that ruth, i have saved as (this page) and will study it more thoroughly at work thanks.

tim

Poster: timmy toad
Dated: Monday January 16 2006 - 19:17:34 GMT

hiya i obviously dont know about this stuff, it must be my age (59) LOL

i had i thought had implemented your changes/suggstions at http://homepage.ntlworld.com/tim.parsons/ but it doesnt seem to get any better, maybe i should get "put down" , but if you can offer any more solutions i would be most gratefull,

to sum up, i would really like your wonderfull menu to appear UNDER the title heading, thanks.

tim

Poster: Ruth
Dated: Tuesday January 17 2006 - 4:49:13 GMT

Hi,

The problem is you used the code I posted on a different page with a different layout. I used your main page, since I didn't really know what layout you wanted as to the header and used the main one so I had a layout from your site. The code I posted was supposed to be inserted into the already existing code on the main page and that's what caused the problem.

If you want it like the page you just posted you need some more code to make it go under the header in that layout. I'm going to post the whole page with the new code. You'll see colored borders, that's so you can see the full layout. To get rid of the colors just make the border=0 and take out the bordercolor="color" that I put in from the table codes. All the ones I put in are word colors, i.e. red, aqua, lime.

Also, you'll see where I put the listmenu, that's because you want it in the table and unlike a regular menu that has a menu data file and you can follow the directions for putting the menu in the table, in this case you need to put the whole listmenu there.

Just copy and paste the following code to a blank document and save it in html format.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD><TITLE>Flitwick PC Clinic</TITLE>
<META http-equiv=Content-Type content="text/html; charset=ISO-8859-1">
<STYLE type=text/css>BODY {
   FONT-SIZE: 12px; FONT-FAMILY: verdana; BACKGROUND-COLOR: #ffffff
}
.backG {
   FONT-SIZE: 12px; COLOR: #ffffff; BORDER-BOTTOM: #538c4d 2px solid; FONT-FAMILY: verdana; BACKGROUND-COLOR: #93c39b
}
TD.form1 {
   FONT-SIZE: 12px; BACKGROUND: #eaeaea; FONT-FAMILY: verdana
}
</STYLE>
<!--
    Milonic DHTML Website Navigation Menu Version 5.0+
    Copyright 2005 (c) Milonic Solutions Limited (UK). All Rights Reserved.
    Please visit http://www.milonic.com/ for more information.

    Although this software may have been freely downloaded, you must obtain a license before using it in any production environment.       
    The free use of this menu is only available for Non-Profit, Educational & Personal Web Sites who have obtained a license to use. 
    
    Free, Commercial and Corporate Licenses are available from our website.
    You also need to include a link back to http://www.milonic.com/ if you use the free license.
    
    All Copyright notices MUST remain in place at ALL times. 
    This includes the first three lines of this notice on every page that uses the menu.
    If you cannot comply with all of the above requirements, please contact us to arrange a license waiver.
--><!--   ***** This is the section of code you need to paste into your web page *****-->

<META content="MSHTML 5.50.4807.2300" name=GENERATOR></HEAD>
<BODY><SCRIPT src="milonic_src.js" type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");      
  else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>"); 
</SCRIPT><A class=milonic href="http://www.milonic.com/">JavaScript Menu, DHTML 
Menu Powered By Milonic</A> <BR>
<TABLE cellPadding=0 width=863 align=center border=1 bordercolor="lime" cellpsacing="0">
  <TBODY>
  <TR>
    <TD><TABLE height=57  width="68%" align=center border=1 bordercolor="aqua"><TR><TD>
      <DIV align=center>
      <TABLE borderColor=#3c3c91 height=57 borderColorDark=#3b3c91 width="100%" 
      align=center border=3>
        <TBODY>
        <TR vAlign=top align=middle>
          <TD height=72>
            <DIV>
            <DIV align=center><FONT color=#006666 size=7><B><FONT 
            face="Comic Sans MS">Flitwick PC 
          Clinic</FONT></B></FONT></DIV></DIV></TD></TR></TBODY></TABLE></DIV></TD>    
  </TR>
  <TR>
    <TD height=64><TABLE align="center" cellpadding=0 border=1 bordercolor="red"><TR><TD>
   <UL>
  <LI><A href="file:///D:/My%20Web%20Sites/NTL/index.html">Home</A> 
  <LI><A href="file:///D:/My%20Web%20Sites/NTL/index.html#">Milonic</A> 
  <UL>
    <LI><A href="http://www.milonic.com/cbuy.php">Product Purchasing Page</A> 
    <LI><A href="http://www.milonic.com/contactus.php">Contact Us</A> 
    <LI><A href="http://www.milonic.com/newsletter.php">Newsletter 
    Subscription</A> 
    <LI><A href="http://www.milonic.com/menufaq.php">FAQ</A> 
    <LI><A href="http://www.milonic.com/forum/">Discussion Forum</A> 
    <LI><A href="http://www.milonic.com/licenses.php">Software License 
    Agreement</A> 
    <LI><A href="http://www.milonic.com/privacy.php">Privacy Policy</A> </LI></UL>
  <LI><A href="file:///D:/My%20Web%20Sites/NTL/index.html#">Partners</A> 
  <UL>
    <LI><A href="htpp://www.a-q.co.uk/?milonicmenu">(aq) Web Hosting</A> 
    <LI><A href="htpp://www.softidiom.com/?milonicmenu">WebSmith</A> 
    <LI><A href="htpp://www.sms2email.com/?milonicmenu">SMS 2 Email</A> </LI></UL>
  <LI><A href="file:///D:/My%20Web%20Sites/NTL/index.html#">Links</A> 
  <UL>
    <LI><A href="http://www.apache.org/">Apache Web Server</A> 
    <LI><A href="htpp://www.mysql.com/">MySQL Database Server</A> 
    <LI><A href="htpp://www.php.net/">PHP - Development</A> 
    <LI><A href="htpp://www.phpbb.com/">phpBB Web Forum System</A> 
    <LI><A href="file:///D:/My%20Web%20Sites/NTL/index.html#">Anti Spam 
    Tools</A> 
    <UL>
      <LI><A href="htpp://www.spamcop.net/">Spam Cop</A> 
      <LI><A href="htpp://www.mimedefang.org/">Mime Defang</A> 
      <LI><A href="htpp://www.spamassasin.com/">Spam Assassin</A> 
  </LI></UL></LI></UL>
  <LI><A href="file:///D:/My%20Web%20Sites/NTL/index.html#">My Milonic - Other 
  Style</A> 
  <UL class=menuStyle2>
    <LI><A href="http://www.milonic.com/login.php">Login</A> 
    <LI><A href="http://www.milonic.com/mylicenses.php">My Licenses</A> 
    <LI><A href="http://www.milonic.com/myinvoices.php">My Invoices</A> 
    <LI><A href="http://www.milonic.com/support/">Make Support Request</A> 
    <LI><A href="http://www.milonic.com/support/">View Support Requests</A> 
    <LI><A href="http://www.milonic.com/mydetails.php">Your Details</A> 
  </LI></UL></LI></UL>
<SCRIPT>
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;

with(menuStyle=new mm_style()){
bordercolor="#999999";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="75%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#eeeeee";
offcolor="#000000";
onbgcolor="#ddffdd";
oncolor="#000099";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=3)";
padding=4;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#999999";
separatorsize=1;
subimage="arrow.gif";
subimagepadding=2;
}

with(menuStyle2=new mm_style()){
bordercolor="#999999";
borderstyle="solid";
borderwidth=1;
fontfamily="Arial";
fontsize="14px";
fontstyle="normal";
offbgcolor="darkblue";
offcolor="yellow";
onbgcolor="#ffffff";
oncolor="#ff0000";
padding="6px"
}

listStyle=menuStyle; // Tells the menu system to use menuStyle as the default style
mainMenuSettings="alwaysvisible=true;orientation='horizontal';position='relative';" // Properties for the main menu

</SCRIPT>

<SCRIPT src="listmenus.js" type=text/javascript></SCRIPT></TD></TR></TABLE></TD></TR></TBODY></TABLE></TD></TR>
<TR><TD width="80%" 
vAlign="top"><BR>List based menus are getting quite popular because of the way 
search engines can see the links and that the menu structure is built using 
plain HTML. <BR><BR>The above menu has been built using the following HTML List. 
As you can see, editing the HTML automatically has an effect on the DHTML 
menu.<BR><BR>If you want to hide the list based menu, you just need to add 
class=milonic to the first &lt;UL&gt; - It is shown here purely for 
demonstration.<BR><BR>Another advantage of using this type of menu is that users 
with JavaScript turned off can still see a menu to navigate your 
website.<BR><BR>This menu is still a work in progress and more will be added to 
it in due course. <BR><BR>Please note that the "My Milonic - Other Style" menu 
uses a different style and is declared using the "class=" property. </TD></TR></TABLE>

</BODY></HTML>

Just to give you some info, when you're doing a page like this in html most of the tags need both an opening and closing tag. Note the html and head and body tags all have closing tags which are the same except for the / in them. The same is true of tables, they need opening and closing tags for all the 'parts'

Code:

<table><tr><td>  are all opening and then need matching </td></tr></table> closing

Hope all this helps.

Ruth

Poster: timmy toad
Dated: Tuesday January 17 2006 - 6:52:15 GMT

sorry about the miss-understanding with that ruth, thank you ever so much for going to so much trouble i dsont really know how i can repay you for you time etc.

i shall implement this straightaway, thanks

Industrial Strength JavaScript and DHTML Menus

how to put a heading above the shtml list based menu

Header