fordwebs.com MenuMagic II in a table tutorial

This tutorial will show you how to put Project Seven's Menu Magic II inside a table. This technique will work on all modern browsers.

Click Insert > Studio VII > MenuMagic II by PVII

Insert Menu Magic II

Use the following options when inserting the menu:

MenuMagic II Options

Now you will need to finish the rest of this tutorial in Dreamweaver's Code View, so click View > Code

Once in Code View add the following <style> block just above the closing </head> tag.

<!--

#wrapperDiv {
position: relative;
top: 0px;
left: 0px;
z-index: 201;
}

#contentCell {
padding-top: 32px;
}

-->

</style>

</head>

The wrapperDiv will surround the MenuMagic II menu and the contentCell will be the table cell below your menu.

In Code View, type the following <div> to create the wrapperDiv.

Now you will need to cut the menu, minus the P7TabH layer, and paste it inside the wrapperDiv. So cut from here

<div id="p7TBtrig10"

to just before here

<div id="P7TabH"

And paste all of it between the

that you just created.

Now cut the entire wrapperDiv and paste it inside the table cell that you want to hold the menu.

Next you need to change the Width of the P7TabH layer to keep all of the browsers happy. Click on the P7TabH layer in the Layers Panel

Layers Panel

And change the Width to 98% in the Property Inspector.

Property Inspector

The last thing you need to do is to assign an ID to the table cell that will be below the menu. In Design View, click inside the table cell that is below the menu and then right-click on the <td> in the bottom of the Design View window and select Set ID > contentCell

That is all there is to it! Pure Magic!

Click here to see a demo.