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:15

Setting a negative top value on Tree Menu ??? Possible?


Poster: ripnoel
Dated: Sunday October 12 2008 - 18:42:50 BST

Greetings All,

Is there a way to set a negative top margin for a relatively placed (in a table cell) tree menu? If so where and how should this be set? To view the specific site I am working on for this please go to:

http://www.tarasport.com.php5-3.website ... /index.php

I've also noticed that when the page is re-sized the submenus are not moved ... is there a way to handle this? ossible re-draw the page.

Thanks in advance for your help.

Best regards,

Rip

Re: Setting a negative top value on Tree Menu ??? Possible?


Poster: Ruth
Dated: Tuesday October 14 2008 - 0:54:22 BST

Hi Rip,

As I'm sure you know, and if not I'm saying it now :) This menu is not developed anymore and is not supported. It was never 'released'. However, I support what I can, many people use it, really like it and have no problem. It is usually the relatively positioned tree menus that have this problem. I am working on it, I have a solution in mind but it is taking a bit of figuring. I'll try and get back to you by tomorrow morning, maybe even tonight.

Now as to the negative margin. No, that isn't an option, however if what you want is for it to shift up you can do that. Do this in your main menu
Code:
margin="0px 15px 0px 15px";


Ruth

Re: Setting a negative top value on Tree Menu ??? Possible?


Poster: Ruth
Dated: Tuesday October 14 2008 - 3:11:24 BST

OK, this is what I got. I tested it in IE6, FF 1.5, 2.0.0.18, 3.01, Opera 9.5, NN 7.2, 9 and Safari 3 for pc and it looks fine at my resolution 1024x768 and resolution 1280x800. You'll have to test in other browsers and mac and at other resolutions.

Now, the issue is that the table resizes and shifts left as you resize the page with the mouse. So, I tried a setup using css divs where the only cell that resizes is the one with the header logo and the content area for text and the layout is set so that the table will not shift left as you resize the page. I made two images to take care of that shifting in those cells, you can get them below and I also set up a new css file. I took the time to put in your paths for files so you should be able to just upload the things and test them.

NEW CSS

Code:
html, body {
margin: 0;
padding: 0;
}

body {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND-IMAGE: url(/images/htmlImages/main1a/diamondPlateAluminumTile.jpg); PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BACKGROUND-REPEAT: repeat
}

#content {
position:absolute;
top:0px;
left:80px;
margin: 0 auto;
text-align: left;
background: #CCCCCC;
}

.column {
width: 50%;
position: absolute;
top: 0;
}

.left {left: 0;}
.right {right: 0;}

#leftcol {
margin-right: 400px;
background-color:transparent;
height: 750px;

}
#rightcol {
margin-left: 399px;
background-color:transparent;
height: 750px;
}

img, div {
   behavior: url(/styles/iepngfix.htc)
}

TD IMG {
   DISPLAY: block
}
.headerbg{ background: transparent url(images/htmlImages/main1a/images/main1a_logoHeaderbg.jpg) top left repeat-x;}
.main1a_r2_c4abg{ background: transparent url(images/htmlImages/main1a/images/main1a_r2_c4a.jpg) top left repeat-x}
.tblbg{ background: transparent url(/images/htmlImages/main1a/diamondPlateAluminumTile.jpg)}


THE HTML PAGE
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<TITLE>Welcome to TaraSport, Custom Engineering a More Profitable Trailer Solution For You.</TITLE>
<!-- InstanceBegin template="/Templates/main1a.dwt.php" codeOutsideHTMLIsLocked="false" -->
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<!-- InstanceBeginEditable name="doctitle" --><!-- InstanceEndEditable --><!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable --><LINK
href="main1-test.css" type=text/css rel=stylesheet>
<style type="text/css">


</style>
<META content="MSHTML 6.00.2900.3395" name=GENERATOR>
</head>
<body>
<SCRIPT src="/js/mainMenu/milonic_src.js" type=text/javascript></SCRIPT>

<SCRIPT src="/js/mainMenu/mmenudom.js" type=text/javascript></SCRIPT>
<!-- The next file contains your menu data, links and menu structure etc --><!--<script type="text/javascript" src="menu_data.js"></script>--><!--<script type="text/javascript" src="treemenu.js"></script>-->
<SCRIPT src="/js/mainMenu/openmenusbyurl.js" type=text/javascript></SCRIPT>
<div id="content"><table border="0" cellpadding="0" cellspacing="0"  width='70%' align='left'>
    <!-- fwtable fwsrc="main1a.png" fwpage="Page 1" fwbase="main1a.jpg" fwstyle="Dreamweaver" fwdocid = "40114712" fwnested="0" -->
    <tr>
      <td width="14"><img src="/images/htmlImages/main1a/images/main1a_DS-Left.png" width="14" height="1" border="0" alt="" /></td>
      <td width="153"><img src="/images/htmlImages/main1a/images/main1a_topRowSpacer1.jpg" width="153" height="1" border="0" alt="" /></td>
      <td width="14"><img src="/images/htmlImages/main1a/images/main1a_topRowSpacer2.jpg" width="14" height="1" border="0" alt="" /></td>
      <td><img src="/images/htmlImages/main1a/images/main1a_topRowSpacer3.jpg" width="637" height="1" border="0" alt="" /></td>
      <td width="16"><img src="/images/htmlImages/main1a/images/main1a_DS-right.png" width="16" height="1" border="0" alt="" /></td>
      <td width="1" rowspan="5" class="tblbg"><img src="images/htmlImages/main1a/images/spacer.gif" width="60" height="1" border="0" alt="" /></td>
    </tr>
    <tr>
      <td width="14" background="/images/htmlImages/main1a/images/main1a_DS-Left.png"><a href="/images/htmlImages/main1a/images/main1a_DS-Left.png"></a></td>
      <td width="153"><img name="main1a_logo" src="images/htmlImages/main1a/images/main1a_logo.jpg" width="153" height="140" border="0" id="main1a_logo" alt="" /></td>
      <td colspan="2" class="headerbg"><img name="main1a_logoHeader" src="images/htmlImages/main1a/images/main1a_logoHeader1.jpg" width="651" height="140" border="0" id="main1a_logoHeader" alt="" /></td>
      <td background="/images/htmlImages/main1a/images/main1a_DS-right.png">&nbsp;</td>
    </tr>
    <tr>
      <td background="/images/htmlImages/main1a/images/main1a_DS-Left.png"><img name="main1a_headerDSr2_c1" src="/images/htmlImages/main1a/images/spacer.gif" width="14" height="14" border="0" id="main1a_headerDSr2_c1" alt="" /></td>
      <td colspan="2"><img name="main1a_headerDSr2_c2" src="images/htmlImages/main1a/images/main1a_headerDS-r2_c2.jpg" width="167" height="14" border="0" id="main1a_headerDSr2_c2" alt="" /></td>
      <td class="main1a_r2_c4abg"><img name="images/htmlImages/main1a/images/main1a_r2_c4.jpg" src="main1a_r2_c4.jpg" width="637" height="14" border="0" id="main1a_r2_c4" alt="" /></td>
      <td background="/images/htmlImages/main1a/images/main1a_DS-right.png"><img name="main1a_r2_c5" src="/images/htmlImages/main1a/images/spacer.gif" width="16" height="14" border="0" id="main1a_r2_c5" alt="" /></td>
    </tr>
    <tr>
      <td background="/images/htmlImages/main1a/images/main1a_DS-Left.png">&nbsp;</td>
      <td rowspan="2" align="left" valign="top" background="/images/htmlImages/main1a/images/main1a_Left-Menu-Btns-Tile+rivets.jpg" width="110px"><script language="JavaScript"
        src="/js/mainMenu/collapse_data.js"
        type="text/javascript"></script>

      <script language="JavaScript"
        src="/js/mainMenu/treemenu.js"
        type="text/javascript"></script></td>
      <td background="images/htmlImages/main1a/images/main1a_Left-Menu-Btns-Footer-rt-DS.jpg" valign='top'>&nbsp;</td>
      <td align="left" valign="top" bgcolor="#F9F9F9"><!-- InstanceBeginEditable name="mainBody" -->
        <p>r</p>
        <p>&nbsp;</p>
        <p>d</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f </p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p> mainBody</p>
      <!-- InstanceEndEditable --></td>
      <td background="/images/htmlImages/main1a/images/main1a_DS-right.png">&nbsp;</td>
    </tr>
    <tr>
      <td background="/images/htmlImages/main1a/images/main1a_DS-Left.png">&nbsp;</td>
      <td background="images/htmlImages/main1a/images/main1a_Left-Menu-Btns-Footer-rt-DS.jpg">&nbsp;</td>
      <td align="center" bgcolor="#F9F9F9">&nbsp;</td>
      <td background="/images/htmlImages/main1a/images/main1a_DS-right.png">&nbsp;</td>
    </tr>
  </table></div>

<div class="left column">
<div id="leftcol">left column</div>
</div>

<div class="right column">
<div id="rightcol">right column</div>
</div>

</body>
</html>


THE THREE IMAGES
Image Image

Image

The first image is made from the right side of the header logo without the dark border line at the end of it. The second is a new logo header image again without the black border, and the third is from the main1a_r2_c4.jpg image without the right end side. The reason I changed them is that they looked like they repeated when that area expanded. I actually can figure out how to make them with that right border if you'd prefer that. [I think :)].

As you can see I used your paths, so you should just be able to upload the images to where you had them since they are renamed, and then copy and paste the stylesheet and save it as main1-test.css in the style area and then copy and paste the page and save it as whatever you want. This is the only thing I could figure out, because what has to happen is that the table can't move if you don't want the problem with the submenus.

Hope this helps

Ruth

©1998-2012 Milonic Solutions Ltd. UK Registered Company #4406835
Privacy Policy | License Agreement | Contact Us | Tech Support