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

spacing with image between menu points


Poster: agerszt
Dated: Friday September 5 2003 - 18:36:39 BST

hi

i am referring to: http://www.irdium.ch/menus/test.html

if you look at the html source you see my problem :)

i need to add spacers between the menu items. i tried the imagewidth=n setting, but that didn't show any effect. imageheight was ok, but the width option did not stretch the image.

per workaround i've just added the same image 20 times. but there must be a more elegant way :)

thanks,
arie


Poster: Hergio
Dated: Friday September 5 2003 - 19:57:00 BST

Please go to
http://www.milonic.com/styleproperties.php
http://www.milonic.com/menuproperties.php
http://www.milonic.com/itemproperties.php
These will show what you can do with the menu. There are a number of different things here. Namely look up itemwidth, separatorsize, and padding one or a combination of these should help you.

what i tried


Poster: agerszt
Dated: Friday September 5 2003 - 20:16:12 BST

hi

i tried the following:

aI("image=menuimages/spacerblau.jpg;itemwidth=50;imagewidth=50;oncursor=default");

whatever i did. it didn't work. imageheight works.

thanks
arie


Poster: John
Dated: Saturday September 6 2003 - 2:07:32 BST

Check this thread...
http://www.milonic.com/forum/viewtopic.php?t=2319.


Poster: Hergio
Dated: Saturday September 6 2003 - 14:10:41 BST

Or this too
http://www.milonic.com/forum/viewtopic.php?t=2128

You werent supposed to add that stuff to the image items in between. Take those image-only items out so you just have your items. Then on your items, you can either add non-breaking spaces ( ) to the text OR increase the ITEMWIDTH of the them so there is more padding to the left and the right of each item. Regarding adding to the right hand side of the menu, the thread John posted handles that. Just make that item have an itemwidth of 100% (or a pixel length, whatever you want) and set its background image to your image and it will stretch as far as you'd like.

Best o' luck.


Poster: agerszt
Dated: Sunday September 7 2003 - 15:35:45 BST

Will that work?

The menuitems are images, and only images with rollovers. So there is no text defined at all in the menusystem. if i stretch the image, the text in the image will break, because the proportions are out of balance.

thanks,,
arie


Poster: Ruth
Dated: Sunday September 7 2003 - 18:56:15 BST

Try this

LINK REMOVED

If this is what you are trying to do, I took one of your images and made a blank one that only had the background, no words. Just right click on the far right blue space to save background as. Then in your data.js file right after the

itemwidth="100%"; put this
bgimage="spacerblau.jpg";

That puts that image as the background of the whole menu and the images go over the top of it. I used your menu_data.js file....changing the paths of course. So if you want you can just take that file and redo the paths for your site. Not sure if that's what you are trying to do. :)

Ruth


Poster: agerszt
Dated: Sunday September 7 2003 - 19:08:01 BST

Dear Ruth

Thanks a lot. Nearly :) I want some spacerblue between the items, but not to fill the horizontal width 100%.

My final goal is: http://www.swisseasy.net/new/

You see some spacerblue images between the individual items an a bigger spacer before Kundenbereich.

So I think I need to add an additional image between each menu item which could be defined to the needs (width in pixels).

does that work?

thanks,

arie


Poster: Ruth
Dated: Sunday September 7 2003 - 20:04:45 BST

No, you don't need to do that. Go back to the link I gave. I've changed the menu_data.js file and I think that it is what you want. Take a look at the menu_data.js file....make SURE that the padding is set to 0 or it will not work, it extends the background image down and looks terrible. Anyway, I think what's up there now is what you want. I got rid of the image=kundenbereich.jpg;overimage=kundenbereich.jpg" and instead I put in an actual image before the url, and set the align for the image to right. That means even if the browser window size changes that image will be to the right and there will be a blue space between it and the partner image. It works in IE, and if you insert an itemwidth="100%" in the style definition section it also works in Opera6. As to other browsers, I don't know, but at least you now have an example of what you want it to be. and perhaps can figure how to make it do that in other browsers.. It doesn't work in NN4x. Good Luck. Let me know when you have the files so I can delete them from my domain. Thanks :)

Ruth

good morning :)


Poster: agerszt
Dated: Monday September 8 2003 - 6:57:35 BST

Hi Ruth

Thanks for that so far. I wanted to ask you, if I can move the first 4 items (Products, Portrait, References, Partners) closer together, as in the URL I posted earlier (http://www.swisseasy.net/new)

But I think I get do that with just making spacerblau.jpg shorter.

I implemented your idea to the site. See:
http://www.irdium.ch/menus/new.html

I kept the MainMenu in the html (you do it directly in the .js). When I placed it into the js, I had problems with aligning with my tables.

How does it look on your side now?

I experience a problem, that the menu produkte isn't opening, but the others do so. Very strange...

Thank you
Arie


Poster: Hergio
Dated: Monday September 8 2003 - 13:31:07 BST

The reason its not showing is due to a known bug in the menu that when you declare the main menu INSIDE of your page in a table cell (and not in the js file like ruth did) the first menu in the file doesn't get rendered. To fix this, you can do one of two things. First, move your main menu definition BACK into the js file and just put the <SCRIPT src=''milonic_src.js"></SCRIPT> lines in the TD instead.
Or you can put in a dummy menu definition in your menu_data file above the produkte menu.

thanks


Poster: agerszt
Dated: Monday September 8 2003 - 13:41:39 BST

ok, i got that working, thanks! great people here by the way, that was a must say.

i am still working to find out, how i could get the menuitems closer together (my reference is the graphical design on http://www.swisseasy.net/new/)

thanks,
arie


Poster: John
Dated: Monday September 8 2003 - 15:19:50 BST

Check http://westcgi.west.asu.edu/sai/. The 6 menu items at the top of that page are all individual graphics. I simply made them the size I needed and then did the calls in mainmenu to get them loaded.


Poster: Ruth
Dated: Tuesday September 9 2003 - 1:03:25 BST

I put a new page up showing the way you want it, same link as the one before. Take the menu_data.js file and check it. I inserted 'a blank aI line after the one for the Partner, well not blank this:

Code:
aI("text=<img src=spacerblau.jpg width=256 height=21 border=0>;");
One advantage to this if it works is that if someone has a smaller browser window the menu 'resizes' to fit. The page you have up, I couldn't see the last word without scrolling because the menu was wider than my browser window.

Ruth


Poster: bomz
Dated: Monday September 29 2003 - 13:49:59 BST

Innkeeper9 said "It doesn't work in NN4x". I checked http://www.poems2u.com/agerszt/menus.htm, http://www.swisseasy.net/new/ and http://westcgi.west.asu.edu/sai/ with Netscape 4.79 and it does have problem displaying menu right (wrong menu hight). Not sure if I'm asking at right place, but is there a way to make menu with images only (no text) work correctly (beeing of right height, that is) on Netscape? Innkeeper9 suggested usign text=<img>, but then we can't use overimage. Please advise.