Sjef Bosman
asked on
How to use Coolmenus inside a table?
I'm using Coolmenus (dhtmlcentral.com) which works nicely for my site. Now I'd like to place the menu inside a table, but I don't know how to position it. The table is like this:
<CENTER><TABLE WIDTH=750><TR><TD>
text...
</TD></TR></TABLE></CENTER >
so the exact position of the table is unknown to me. How to define the CSS that's required to do this? Is it possible at all??
<CENTER><TABLE WIDTH=750><TR><TD>
text...
</TD></TR></TABLE></CENTER
so the exact position of the table is unknown to me. How to define the CSS that's required to do this? Is it possible at all??
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks.
Although this works in Firefox, it doesn't in the Internet Exploder. IE wants the construct() call OUTSIDE the <table>, in fact outside all <table>s. With that adaptation, it works.
Although this works in Firefox, it doesn't in the Internet Exploder. IE wants the construct() call OUTSIDE the <table>, in fact outside all <table>s. With that adaptation, it works.
ASKER
<html>
<head>
<title>Coolmenus example - CoolMenus4 DHTML script made by Thomas Brattli from DHTMLCentral.com. Visit for more great scripts.</title>
</head>
<body>
<center><table width=745><tr><td><div id="divMenu"> </div><
<style>
/* CoolMenus 4 - default styles - do not edit */
.clCMAbs{position:absolute
/* CoolMenus 4 - default styles - end */
/*Style for the background-bar*/
.clBar{position:absolute; width:10; height:10; background-color:Navy; layer-background-color:Nav
/*Styles for level 0*/
.clLevel0,.clLevel0over{po
.clLevel0{background-color
.clLevel0over{background-c
.clLevel0border{position:a
/*Styles for level 1*/
.clLevel1, .clLevel1over{position:abs
.clLevel1{background-color
.clLevel1over{background-c
.clLevel1border{position:a
/*Styles for level 2*/
.clLevel2, .clLevel2over{position:abs
.clLevel2{background-color
.clLevel2over{background-c
.clLevel2border{position:a
</style>
<div>
<script language="JavaScript1.2" src="coolmenus4.js">
/*************************
Copyright (c) 2001 Thomas Brattli (webmaster@dhtmlcentral.co
DHTML coolMenus - Get it at coolmenus.dhtmlcentral.com
Version 4.0_beta
This script can be used freely as long as all copyright messages are
intact.
Extra info - Coolmenus reference/help - Extra links to help files ****
CSS help: http://coolmenus.dhtmlcentral.com/projects/coolmenus/reference.asp?m=37
General: http://coolmenus.dhtmlcentral.com/reference.asp?m=35
Menu properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=47
Level properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=48
Background bar properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=49
Item properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=50
**************************
</script>
<script>
function findPos(){
if(bw.ns4){ //Netscape 4
x = document.layers.layerMenu.
y = document.layers.layerMenu.
}else{ //other browsers
x=0; y=0; var el,temp
el = bw.ie4?document.all["divMe
if(el) {
if(el.offsetParent){
temp = el
while(temp.offsetParent){ //Looping parent elements to get the offset of them as well
temp=temp.offsetParent;
x+=temp.offsetLeft
y+=temp.offsetTop;
}
}
x+=el.offsetLeft
y+=el.offsetTop
}
}
//Returning the x and y as an array
return [x,y]
}
pos = findPos()
/***
This is the menu creation code - place it right after you body tag
Feel free to add this to a stand-alone js file and link it to your page.
**/
//Menu object creation
oCMenu=new makeCM("oCMenu") //Making the menu object. Argument: menuname
oCMenu.frames = 0
//Menu properties
oCMenu.pxBetween=0
oCMenu.fromLeft=pos[0]
oCMenu.fromTop=pos[1]
oCMenu.rows=1
oCMenu.menuPlacement="left
oCMenu.offlineRoot="file:/
oCMenu.onlineRoot="/coolme
oCMenu.resizeCheck=1
oCMenu.wait=1000
oCMenu.fillImg="cm_fill.gi
oCMenu.zIndex=0
//Background bar properties
oCMenu.useBar=1
oCMenu.barWidth=745
oCMenu.barHeight="menu"
oCMenu.barClass="clBar"
oCMenu.barX=pos[0]
oCMenu.barY=pos[1]
oCMenu.barBorderX=0
oCMenu.barBorderY=0
oCMenu.barBorderClass=""
//Level properties - ALL properties have to be spesified in level 0
oCMenu.level[0]=new cm_makeLevel() //Add this for each new level
oCMenu.level[0].width=110
oCMenu.level[0].height=25
oCMenu.level[0].regClass="
oCMenu.level[0].overClass=
oCMenu.level[0].borderX=1
oCMenu.level[0].borderY=1
oCMenu.level[0].borderClas
oCMenu.level[0].offsetX=0
oCMenu.level[0].offsetY=0
oCMenu.level[0].rows=0
oCMenu.level[0].arrow=0
oCMenu.level[0].arrowWidth
oCMenu.level[0].arrowHeigh
oCMenu.level[0].align="bot
//EXAMPLE SUB LEVEL[1] PROPERTIES - You have to specify the properties you want different from LEVEL[0] - If you want all items to look the same just remove this
oCMenu.level[1]=new cm_makeLevel() //Add this for each new level (adding one to the number)
oCMenu.level[1].width=oCMe
oCMenu.level[1].height=22
oCMenu.level[1].regClass="
oCMenu.level[1].overClass=
oCMenu.level[1].borderX=1
oCMenu.level[1].borderY=1
oCMenu.level[1].align="rig
oCMenu.level[1].offsetX=-(
oCMenu.level[1].offsetY=0
oCMenu.level[1].borderClas
//EXAMPLE SUB LEVEL[2] PROPERTIES - You have to spesify the properties you want different from LEVEL[1] OR LEVEL[0] - If you want all items to look the same just remove this
oCMenu.level[2]=new cm_makeLevel() //Add this for each new level (adding one to the number)
oCMenu.level[2].width=150
oCMenu.level[2].height=20
oCMenu.level[2].offsetX=0
oCMenu.level[2].offsetY=0
oCMenu.level[2].regClass="
oCMenu.level[2].overClass=
oCMenu.level[2].borderClas
/*************************
Menu item creation:
myCoolMenu.makeMenu(name, parent_name, text, link, target, width, height, regImage, overImage, regClass, overClass , align, rows, nolink, onclick, onmouseover, onmouseout)
**************************
oCMenu.makeMenu('top0','',
oCMenu.makeMenu('sub00','t
oCMenu.makeMenu('sub001','
oCMenu.makeMenu('sub002','
oCMenu.makeMenu('sub003','
oCMenu.makeMenu('sub01','t
oCMenu.makeMenu('top1','',
oCMenu.makeMenu('sub10','t
oCMenu.makeMenu('sub11','t
oCMenu.makeMenu('sub12','t
oCMenu.makeMenu('top2','',
oCMenu.makeMenu('sub21','t
oCMenu.makeMenu('sub210','
oCMenu.makeMenu('sub211','
oCMenu.makeMenu('sub22','t
oCMenu.makeMenu('sub220','
oCMenu.makeMenu('sub221','
oCMenu.makeMenu('top3','',
oCMenu.makeMenu('sub30','t
oCMenu.makeMenu('sub31','t
oCMenu.makeMenu('sub32','t
oCMenu.makeMenu('sub33','t
oCMenu.makeMenu('sub34','t
oCMenu.makeMenu('sub35','t
oCMenu.makeMenu('top5','',
oCMenu.makeMenu('sub50','t
oCMenu.makeMenu('sub500','
oCMenu.makeMenu('sub501','
oCMenu.makeMenu('sub51','t
oCMenu.makeMenu('sub510','
oCMenu.makeMenu('sub52','t
oCMenu.makeMenu('sub520','
oCMenu.makeMenu('sub53','t
oCMenu.makeMenu('sub530','
oCMenu.makeMenu('sub54','t
oCMenu.makeMenu('sub540','
oCMenu.makeMenu('sub55','t
oCMenu.makeMenu('sub550','
//Leave this line - it constructs the menu
oCMenu.construct()
</script>
</div></td></tr></table></
</body>
</html>