SOLVED: borders around text, text equivalent to pageimage

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

SOLVED: borders around text, text equivalent to pageimage

Poster: davebarnes
Dated: Wednesday June 6 2007 - 21:49:43 BST

I have this test page: http://www.coloradohipresurfacing.com/E ... /test.html

I am trying to duplicate the functionality of the current text menu.

Problem 1: I don't understand why I have a grey border around each text menu item.

My code looks simple enough:

Code:

with(MainMenuStyle=new mm_style()){
//bordercolor="#FFFFFF";
//borderstyle="solid";
//borderwidth="0";
fontfamily="Arial, Helvetica, sans-serif";
fontsize="12px";
fontstyle="normal";
fontweight="bold";
// headerbgcolor="#ffffff";
// headercolor="#000000";
offbgcolor="white";
offcolor="#666666";
onbgcolor="white";
oncolor="#770032";
padding="0px 0px 14px 0px";
// pagebgcolor="#82B6D7";
// pagecolor="black";
//separatorcolor="#FFFFFF";
//separatorsize="0";
// subimage="http://www.milonic.com/menuimages/arrow.gif";
// subimagepadding=2;

Problem 2: I understand how pageimage works, but have no idea how to get the equivalent functionality with a text menu. That is, I want the text menu item that WAS clicked on last to be colored differently.

As always, I have searched and found nothing, but of course I appreciate pointers to an earlier topic.

thanks,
dave

Poster: Ruth
Dated: Wednesday June 6 2007 - 22:33:10 BST

Hi Dave,

It's your css for the TABLE.main TD

Code:

TABLE.main TD {
   BORDER-RIGHT: #c2c2c2 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #c2c2c2 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; BORDER-LEFT: #c2c2c2 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #c2c2c2 1px solid
}

you could set the links section of the page up like this with an extra table using the no-brd class.

Code:

<TD class=menu id=left vAlign=bottom width=202>
<DIV class=containerMenu>
<DIV><A  href="http://www.coloradohipresurfacing.com/index.html">HOME</A></DIV>
<DIV><A href="http://www.coloradohipresurfacing.com/English/Company/About_JamesRector.html">
ABOUT DR. RECTOR</A></DIV>
<DIV><A  href="http://www.coloradohipresurfacing.com/English/Medical/Hip_Resurface_for_You.html">
HIP RESURFACING</A></DIV>
<DIV><A 
href="http://www.coloradohipresurfacing.com/English/Miscellaneous/Patient_Education.html">
PATIENT EDUCATION</A></DIV>
<DIV><A       href="http://www.coloradohipresurfacing.com/English/Miscellaneous/Required_Forms.html">
REQUIRED FORMS</A></DIV>
<DIV><A       href="http://www.coloradohipresurfacing.com/English/Miscellaneous/Contact_Us.html">
CONTACT US</A></DIV>
<table class=no-brd>
<tr>
    <td><!-- Milonic DHTML Website Navigation Menu Version 5.0  
Please visit http://www.milonic.com/ for more information. -->
      <SCRIPT language=JavaScript src="milonic_src.js" 
      type=text/javascript></SCRIPT>

      <SCRIPT language=JavaScript src="mmenudom.js" 
      type=text/javascript></SCRIPT>

      <SCRIPT language=JavaScript src="MainMenu_data.js" 
      type=text/javascript></SCRIPT></td>
</tr>
</table>
      </DIV></TD>
    <TD id=mid width=632><br>

Poster: davebarnes
Dated: Thursday June 7 2007 - 4:02:47 BST

Ruth,

As usual, your insight was very valuable.

The problem is indeed caused by the

Code:

table.main td {
   border: solid 1px #c2c2c2;
   padding: 0;
}

style.

Just one problem. I can't make the Milonic Menu ignore it.

If you surf to: http://www.coloradohipresurfacing.com/E ... /test.html you will see that I tried to simply my test.
Lots of colors, but what is important are the grey boxes around each menu item. In spite of my declarations at a lower level, the MM treats each menu item as a table cell and reaches way up to the top of the CSS hierarchy to get the grey and ignores the ones in between.

Very annoying.
I am ready to give up on the MM. I though about using images instead of text as I know that will work except that the graphic artist will have a fit.

,dave

Poster: Ruth
Dated: Thursday June 7 2007 - 5:18:49 BST

Hi,

I will try working on this but I have no idea what it is you changed that it is not working now. What I posted from the original test page you had up was working fine, but this one I can't figure out what's different that it is not working. When I figure it out I'll post back. In the meantime if you have the old page and just put in what I had it should work OK.

Can you tell me where you want the menu? Is it supposed to be over the divs with the links or in place of those divs or what? I could figure a solution and then if you made changes again it might not work so having what the set up is supposed to be would be better.

Ruth

Poster: Ruth
Dated: Thursday June 7 2007 - 6:09:03 BST

Hi Dave,

Well, I got it. I don't do much work with css myself so it's a hit or miss as I test.

You need to add this to your css file

Code:

TABLE.main1 TD {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px
}

Then on that new test page with the 'simplified' test, you need to code that table you have at the top, not the main one, but the one in which you call the menu, you need to code that table and the td with the menu in it with class=main1

Code:

<TABLE class=main>
  <TBODY>
  <TR>
    <TD 
    style="BORDER-RIGHT: red 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: red 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; BORDER-LEFT: red 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: red 1px solid">
      <TABLE  class=main1
      style="BORDER-RIGHT: green 1px solid; BORDER-TOP: green 1px solid; BORDER-LEFT: green 1px solid; BORDER-BOTTOM: green 1px solid">
        <TBODY>
        <TR>
          <TD class=main1><!-- Milonic DHTML Website Navigation Menu Version 5.0  Please visit http://www.milonic.com/ for more information. -->
            <SCRIPT language=JavaScript src="milonic_src.js" 
            type=text/javascript></SCRIPT>

            <SCRIPT language=JavaScript src="mmenudom.js" 
            type=text/javascript></SCRIPT>

            <SCRIPT language=JavaScript 
            src="MainMenu_data.js" 
            type=text/javascript></SCRIPT>
          </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

I think the reason for the problem is that coding table.main td forces whatever that code for the td to be always dominant, so in order to override it you need to set up another one the same way only as table.main1 td{whatever code} Now when you set the class in the table that has the menu, then all the tables in the menu will also take that td coding.

Now, you will have a blue border around each item because you have rawcss set in the menu_data file with that blue border. Any time you set a border using css it applies not to the menu container but to each item. THe only way to set a menu around the actual container is to use the menu's own border code. css border is equivalent to the menu's offborder and onborder code.

Hope this helps [and made sense

]

Ruth

Poster: davebarnes
Dated: Thursday June 7 2007 - 14:56:36 BST

Ruth,

You are so smart. I spent 2 hours yesterday playing with style combos and never found the correct answer and you did.

Thanks.

Here is my final working code:

Code:

table.MainMenuNoBorder td {border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;}

and

Code:

<table class="main" width="975" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="bottom" class="menu" id="left">
      <div class="containerMenu">
      <table class="MainMenuNoBorder">
        <tr>
          <td>
            <!--#include virtual="/ServerSide_Includes/Main_Menu.html" -->
          </td>
        </tr>
      </table>
      </div>
    </td>

For your edification: In the style sheet, border-top: 0px; etc. is required. It will not work with the border: 0px 0px 0px 0px; shorthand.

Poster: davebarnes
Dated: Thursday June 7 2007 - 14:58:04 BST

Now, on to the second part of my original post:

Problem 2: I understand how pageimage works, but have no idea how to get the equivalent functionality with a text menu. That is, I want the text menu item that WAS clicked on last to be colored differently.

Any ideas would be appreciated.

Poster: Ruth
Dated: Thursday June 7 2007 - 18:10:25 BST

Hi,

All the page codes work the same, so if you want an image you use pageimage, if you want the text color to change you use pagecolor, if you want the background color to change you use pagebgcolor and so on. There is also a pageclass so you can set it all in css if you wanted, the advantage to this is you can set a lot of things using the class, you could do borders, text-decoration, and so on for the item, all valid css can be used in the class. You'd create the class with whatever name and then put the pageclass="whatevername"; in the style section. I think this might also be an item property and if that is so, then you could actually create a different pageclass for each item, and call the pageclass=whatevername; in the items.

Try the link below my name to style properties and go down to the P section. Also, check the itemproperties link below my name to see if they are item properties. Now you say 'clicked' so if you're talking about clicking the item rather than matching to show where you are based on the page properties, then you want to look at the click properties.

Ruth

Industrial Strength JavaScript and DHTML Menus

SOLVED: borders around text, text equivalent to pageimage