how to put border around whole menu but the top? [SOLVED]

[nwilcox]

hello everyone,

Is there a way to put a border on three sides of a sub-menu (excluding the top)?

Thanks!

[Ruth]

Hi,

Yes, but not in the menu properties, you have to do it with css class, now this would mean that you really aren't putting it around the 'menu' but around the items, so if it's horizontal, you'd create a class with border-top:0px solid red;border-right:1px solid red; and so on. This would put borders on the right, left, and bottom of each item. Now, the problem here is you cannot use separators since they are in the menu container and will show spaces between items. And, if it's a vertical menu, then you'd need different classes, 2 classes, 1 for all but the bottom items, which only had left and right borders, and 1 for the bottom item that had left, right and bottom. Now, if you give me the site, I might be able to figure something out using divides and a menubgimage

Hope that made sense

Ruth

[nwilcox]

wow that sounds very complex. There is no simple way to place a border on 3 out of the 4 sides?

If I have padding in any of the menu items that solution isn't going to work is it? as the borders won't show up where they need to???

http://clients2.serverside.net/asda/

first sub menu under first menu button would not have a top border as you can see here I need the top border to be removed.

thanks!

[Ruth]

Hi,

You can't do it with the border property, but I'll play around and see if I can figure another way. It may take some time but I'll post back.

Ruth

[Ruth]

Hi,

Well, it was much easier than I thought, given you already had done most of the work with your menuStyleSubAlt and the publications submenu

OK, use that style and all the other stuff, rawcss and such that you have in that publications submenu in all submenus that you want to have a right, bottom, left border and add this class to your css stylesheet and call the class in the last item of those submenus.

Code: Select all

.mmbord{border-bottom:1px solid #CDCDCD;text-decoration:none;font-size:10px;padding-left:5px;padding-top:0;padding-bottom:0;padding-right:15px;}

So, your publications and our about submenus would be

Code: Select all

with(milonic=new menuname("publications")){
	style=menuStyleSubAlt;
	itemwidth="183px";
	top="offset=0";
	left="offset=-1";
	rawcss="border-right:1px solid #CDCDCD;border-left:1px solid #CDCDCD;"
	aI("itemheight=15px;image=menu_spacer.gif;type=header;");
	aI("text=The links;url=index.aspx;showmenu=testing;");
	aI("text=The links;url=index.aspx;");
	aI("text=The links;url=index.aspx;");
	aI("text=The links;url=index.aspx;");
	aI("text=The links;url=index.aspx;");
	aI("text=The links;url=index.aspx;");
	aI("text=The links;url=index.aspx;");
	aI("text=The links;url=index.aspx;");
	aI("text=The links;url=index.aspx;");
	aI("text=The links;url=index.aspx;");
	aI("text=The links;url=index.aspx;offclass=mmbord;onclass=mmbord;");
}

with(milonic=new menuname("aboutasda")){
	style=menuStyleSubAlt;
	itemwidth="183px";
	top="offset=0";
	rawcss="border-right:1px solid #CDCDCD;border-left:1px solid #CDCDCD;"
	aI("itemheight=15px;image=menu_spacer.gif;type=header;");
	aI("text=The links;url=index.aspx;showmenu=testing;");
	aI("text=The links;url=index.aspx;");
	aI("text=The links;url=index.aspx;");
	aI("text=The links;url=index.aspx;");
	aI("text=The links;url=index.aspx;");
	aI("text=The links;url=index.aspx;");
	aI("text=The links;url=index.aspx;");
	aI("text=The links;url=index.aspx;");
	aI("text=The links;url=index.aspx;");
	aI("text=The links;url=index.aspx;");
	aI("text=The links;url=index.aspx;offclass=mmbord;onclass=mmbord;");
}

I tested in IE5.5, 6, FF 1.02, 1.5, Safari 4windows beta 3.0

Ruth

[nwilcox]

awesome! I'll give it a shot....

yeah I was fooling around with it and got about half way myself yesterday

[nwilcox]

works like a CHAMP Ruth! Thanks!

case closed!