Support with positioning Milonic on a forum

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

Support with positioning Milonic on a forum

Poster: Thoth
Dated: Tuesday February 19 2008 - 18:53:20 GMT

I set this up relative using Ruth's first technique and everything seems fine. However, it's not quite how I want it as it creates an extra space between the header and the forum body. The other issue is that placed beneather the banner in <td></td> it shifts to above the banner when I go from the main forum page to the forumdisplay page. How should I properly wrap this so that it's the same on the forumdisplay page and doesn't have the outside background showing through? I suppose it's all in how I wrap it within the div at this point. I'm open to any better suggestions in how to place this perhaps somebody has a similar forum setup?

Here's my link: http://yourhomeforum.com/forum the menu is available under skin style "Form V Funk" currently.
You can switch over to this skin style in the lower left hand corner of the page.

Should it be something more like this, perhaps?

<div id="Container">
<div id="menu_data">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<script type="text/javascript" src="/forum/milonic_src.js"></script>
<noscript><a href="http://www.milonic.com/">JavaScript DHTML Menu Powered by Milonic</a></noscript>
<script type="text/javascript" src="/forum/mmenudom.js"></script>
<script type="text/javascript" src="/forum/menu_data.js"></script>
</td>
</tr>
</table>
</div>
</div>

Re: Support with positioning Milonic on a forum

Poster: Ruth
Dated: Tuesday February 19 2008 - 22:26:20 GMT

Hi,

You forgot to put in buildAfterLoad=true; in the menu_data.js file if you are using method 1. I have no idea if that is the problem. Now, if you look at the source on the two different pages, on the first one there is only the one call for the files, in the table, but on the second page two calls show, one right after the body tag, and one in the table. I don't know if you actually have that on that second page or not, or if it is somehow something to do with the templates. Also, you need to upgrade to the newest version

Ruth

Re: Support with positioning Milonic on a forum

Poster: Thoth
Dated: Wednesday February 20 2008 - 0:26:23 GMT

Oh, I didn't realise that the downloads weren't updated... okay, I updated them. I must've uploaded an earlier update of that file, too... okay, I've got the correct version of the menu_data.js with the additional code uploaded now, and there's a new issue... the dropdown is not functioning... it just drops down a seperator image on the side now. That's interesting...

[EDIT] The drop down issue seems to have been disabled after adding that buildAfterLoad=true; bit.

By the way, that second method merely dropped it down to the bottom of the page, despite being placed in the same section of the header just beneath the logo and it had the same drop-down issue.

[UPDATE] I went back and adjusted that bit of code to say "false" and it seems to function now, although where it's positioned it has made all the text in the submenu center aligned. Otherwise, it doesn't seem to be a problem in the two most recent versions of FF and IE. I also dropped that code beneath the $header on the forumdisplay template and that properly positioned the menu on that page.

I also did some research and I couldn't find any forums that have this menu set up where I chose to have it. The only ones I came across were all positioned above the logo at the very top, likely due to ease of positioning there, I suspect. I'll continue tweaking this until I get it just right.

Re: Support with positioning Milonic on a forum

Poster: Ruth
Dated: Wednesday February 20 2008 - 7:01:16 GMT

Hi,

Somehow you are getting calls for the menu in numerous places. I just went and downloaded the page you get when you click on the Welcome Mat. When I looked at the page in my 1st Page editor there are 3 calls for the milonic files. The 1st is in the logo table, the second is in this div

Code:

Which is where I see a script call for some breadcrumb thing. The 3rd is in a div toward the bottom of the page right after this

Code:

There has to be some reason that you are getting 3 calls for the files on the page. I can only think it has something to do with the templates somehow.

Now, as to your question about more space between the menu and forum somehow I need to see a screen shot of what area you want eliminated. I see a yellow background which is the logo and imagemap I would guess, then right below that is the menu, then there is the beginning of the lighter greenish color area that has the forum stuff in it. So, just what space is it that you don't want? The lighter greenish area has a lot of space at the top, below the menu, but that is because of line breaks in the code.

Ruth

Re: Support with positioning Milonic on a forum

Poster: Thoth
Dated: Wednesday February 20 2008 - 17:26:09 GMT

Okay, I took a look at that and was able to remove one instance of that menu call... it's now down to two templates one beneath the logo and one for the forumdisplay template (the one beneath the page div class).

What would be most optimal is to have the menu show up in that greenish/greyish area beneath where it currently is in the bluish/grayish area beneath the header. The greenish area is in the area known as the page background. I'd prefer not to have it within the logo div where it creates seperation beneath the logo (shows that blueish/grayish outside background). I don't mind it being either centred or left aligned, so long as it is within the greenish areas boundaries.
It would be nice to be able to have that blueish/greenish bar behind the menu as a repeated left/right element or as a static background image if possible.

Re: Support with positioning Milonic on a forum

Poster: Ruth
Dated: Wednesday February 20 2008 - 20:05:45 GMT

Hi,

OK, I have been playing with this and try setting your page like this. I've posted the code from the body tag until the 'breadcrumb, login, pm info comment tag.

Code:

<!-- logo --><A name=top></A>
<TABLE cellSpacing=0 cellPadding=0 width=950 align=center border=0>
  <TBODY>
  <TR>
    <TD align=middle><MAP name=MyMap><AREA shape=RECT coords=34,103,57,142 
        href="http://yourhomeforum.com/forum/forumdisplay.php?f=77"><AREA 
        shape=RECT coords=785,50,794,71 
        href="http://yourhomeforum.com/forum/forumdisplay.php?f=77"><AREA 
        shape=RECT coords=1,1,762,91 href="http://yourhomeforum.com/forum"><AREA 
        shape=RECT coords=818,74,829,83 
        href="http://yourhomeforum.com/thanksgiving.html"></MAP><IMG 
      src="yourhomeforumlogo5.gif" useMap=#MyMap border=0></A>
     
       </TD></TR></TBODY></TABLE><!-- /logo --><!-- content table --><!-- open content container -->
<DIV align=center>

<DIV class=page style="WIDTH: 950px; TEXT-ALIGN: left">
<DIV style="PADDING-RIGHT: 25px; PADDING-LEFT: 25px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px;">
<br><table width='100%' cellpadding=0 cellspacing=0 style="background-color:#6a857f;border-top:1px outset #526763;border-right:1px outset #526763;border-bottom:4px outset transparent;border-left:1px outset #526763">
<tr>
    <td><img src="mac_back.gif" width="100%" height=5px border="0"><table align='center' cellpadding=0 cellspacing=0 border=0 style="padding-top:5px padding-bottom:0px padding-right:0px padding-left:0px">
<tr>
    <td> <SCRIPT src="milonic_src.js" type=text/javascript></SCRIPT>
       <NOSCRIPT><A href="http://www.milonic.com/">JavaScript DHTML Menu Powered 
      by Milonic</A></NOSCRIPT>
      <SCRIPT src="mmenudom.js" type=text/javascript></SCRIPT>

      <SCRIPT src="menu_data.js" type=text/javascript></SCRIPT></td>
</tr>
</table></td>
</tr>
</table>
<SCRIPT type=text/javascript>
<!--
function openRadioStations(){
radioStationsWindow = window.open('radiostations.php', 'radiostations', 'directories=no,height=500,width=700,location=no,menubar=no,resizable=yes,status=no,scrollbars=yes,toolbar=no');}
//-->
</SCRIPT>
<BR><BR><BR><!-- breadcrumb, login, pm info -->

This will put the menu inside that light greenish area. What this does is put a linebreak at the top of that light greenish area so the menu 'table' is down a bit and surrounded on all sides by that color. Then I created a table at 100% width with that darker greenish blue bgcolor you want which sets up a wide band the same width as your forum heading areas. You'll see the border set also, this is to make that greenish blue area look pretty much the same in all browsers as to menu position. That td cell where the menu 'table' itself is created also uses your mac back transparent image, that is to keep that nice shadowed look in IE, which is coming from the ie filters and transitions programming. It is proprietary to IE and will not show in any other browser. Inside that td is a table centered with no width, it must be no width so that it is only as wide as the menu itself.

Now, having explained that, you have to get all the other calls for the menu out of your templates. What I posted above, the part for the tables with the menu and the calls for the program files and such, that has to be put into the template that generates this part of the page

Code:

<DIV align=center>

<DIV class=page style="WIDTH: 950px; TEXT-ALIGN: left">
<DIV style="PADDING-RIGHT: 25px; PADDING-LEFT: 25px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px;">

I don't know anything about vbulletin and their template setup so you'll have to figure that out yourself.

Hope this helps

Ruth

Re: Support with positioning Milonic on a forum

Poster: Thoth
Dated: Thursday February 21 2008 - 2:48:43 GMT

Okay, I removed the additional call instances from the other template... it's only in one location now and looks just fine.

I like this... very nice, Ruth! I couldn't do it precisely the way shown, however, but with some adjustments to the padding it eventually worked. My only concern is that I have the padding on the blue background offset by an extra pixel on the right and no padding on the left. I'm not sure how that's going to appear in other browsers, however... or even why it's off by one pixel. When I attempted it with the 25 pixels of padding on both sides it blew the margins and was left aligned that's the part that I changed with the padding... also the 1 pixel on the right of that blue surrounding colour. Anyway, this seems to work... I'll continue looking to see why that's slightly off, however... and how it looks in other browsers.

Re: Support with positioning Milonic on a forum

Poster: Ruth
Dated: Thursday February 21 2008 - 4:31:55 GMT

Hi,

I took a look at the page. I don't have your template so I don't know what the difference is. I see you've change things to have that greenish blue go all the way across. As to the right side, that is what the border color becomes when it is set to outset which you need. You could try changing the right side border color to transparent and see what happens. It's just that the border has to be set to outset to get the right bottom area so it looks the same in IE and the other browsers due to the IE filter stuff which looks really good on the menu, the neat shadows

You could also try setting that 100% table to 98% and then center align the table. It would put a 1% space on the left and right of that greenish blue bg.

Ruth

Re: Support with positioning Milonic on a forum

Poster: Thoth
Dated: Thursday February 21 2008 - 6:12:13 GMT

I just changed the padding is all. The two that were set at 25 pixels to the right and left I had to set at 0 (otherwise the margins were blown out 25 pixels to either side, that's how it appeared with the exact code) and the other on the outside making up for that offset... I see now. I did try setting that to 98% and it went way over to the left... that's how I ended up with this out all the way to the edge... I couldn't seem to get the entire thing centered properly... I'm still tweaking it, though. ... I'm going to try and see if I can get it to be the same width as the headers beneath the same width as those nearly black bars are. I'll try that transparency first, too... see how that looks.

Re: Support with positioning Milonic on a forum

Poster: Thoth
Dated: Thursday February 21 2008 - 6:47:42 GMT

There! Got it now... that's about perfect. I believe this is precisely how you were perceiving it before?
This looks great. Now there's at least one recent example for others, of how to place this beneath the logo on a VB forum.

Thank you so much for all your help, Ruth!

Re: Support with positioning Milonic on a forum

Poster: Ruth
Dated: Thursday February 21 2008 - 11:15:37 GMT

Hi,

That looks terrifc, and yes that is how I had it set up. Most likely what I posted and what you ended up having to do had to do with the actual templates, since I could only put it in the 'html' code on the page I downloaded.

As to centering, well I guess I kind of cheat. When I cannot get it centered using the margins, padding etc, I use center tags :roll:

Code:

<center><table><tr><td>and whatever here</td></tr></table></center>

It passes validation, so I figure it's a simple way around frustration

Ruth