Top Nav Bar III Help

[ohhello]

Hello,

i am attempting to modify Top Nav Bar III. I would like to add some spaces between each tab (horizontally). i want to have 6 seperate tabs that do not touch, with about 10 pixels in between, and i want the space in between each tab top be transparent so you can see what is undernieth.

does anyone have any suggestions on how i can accomplish this? thanks!

[jscheuer1]

I'd set up dummy items with no links or display text, width set to 10 and the background color set to transparent. Remember to retain empty quotes for any item not used. If you get an error using no link, you can probably use "#" or "javascript:void(0)".

[ohhello]

thanks for your reply.

i actually tried that, but when i set the background color to "transparent" it displays as black...

[jscheuer1]

I'm looking at the menu now, it appears that this configuration item:

var bCOLOR = 	"black"	// main nav border color

is not actually a border in the strict html or css sense, rather a background color. If you set that to transparent and set this:

var bSIZE = 	1;		// main nav border size

to 10, you will have pretty much what you say you are after. However, you will lose the nice 1px solid black border for the main navitems which is the default we just changed. To get something like that back, use html in the text for these entries, ex:

addMainItem("http://www.dynamicdrive.com/","<div style='padding:7px 0;border:1px solid black;height:100%;width:80px;'>Home</div>",80,"center","","",0,0,"","#ffeeee","#ffeecc","#000066","#660066");

and changing:

var vtOFFSET = 	0;		// main nav vertical text offset (+/- pixels from middle)

to 4

[ohhello]

that looks like it's going to work perfectly. thanks a lot for the help!

[jscheuer1]

Just tested this out in Mozilla, looked horrible. Follow the same advice for the first two variables but, then it gets complicated. The HTML for the item's text will look like this:

<div style='position:relative;top:0!important;top:8px;padding:3px 0 7px 0!important;padding:5px 0;border:1px solid black;height:12px;width:77px;'>Home</div>

and 'var vtOFFSET' will be -8. That seems to work well in both. Since this seems, even to me, to be way too much fudging around. Images might be a better solution. Gif's with transparent backgrounds and the desired text and borders could substitute for this complicated html and repositioning scheme. Also, I'd try taking a trip to Brothercake's site. There he has extensive tutorials on this menu. An even better solution may present itself.

[ohhello]

thanks, this is working great.

Does anyone know how I can make the submenu text be bold on hover? I don't see a setting for that...

Thanks.