How to center a div 1

yesti · Aug 9, 2002

Hello,
I found this script on javascript.internet.com and I wanted to know if there is a way to center the cascading menu. The script has an external .css and .js as well as code in the html:

.css:

.menuBar
{
LEFT: 125;
POSITION: relative;
BACKGROUND-COLOR: transparent;
TEXT-ALIGN: center;
COLOR: #FFFFFF;
FONT-WEIGHT: bold;
}
.Bar
{
BORDER-RIGHT: blue 1px outset;
BORDER-TOP: blue 1px outset;
FLOAT: left;
BORDER-LEFT: blue 1px outset;
WIDTH: 100px;
CURSOR: hand;
TEXT-INDENT: 5px;
BORDER-BOTTOM: blue 1px outset;
POSITION: relative;
BACKGROUND-COLOR: #0000FF;
TEXT-ALIGN: center
}
.menu
{
BORDER-RIGHT: buttonhighlight thin outset;
BORDER-TOP: buttonhighlight thin outset;
VISIBILITY: hidden;
BORDER-LEFT: buttonhighlight thin outset;
WIDTH: 150px;
LINE-HEIGHT: 140%;
BORDER-BOTTOM: buttonhighlight thin outset;
POSITION: absolute;
BACKGROUND-COLOR: deepskyblue
}
.menuItem
{
PADDING-RIGHT: 15px;
PADDING-LEFT: 10px;
WIDTH: 100%;
CURSOR: hand;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: white 1px solid
}
.ItemMouseOver
{
PADDING-RIGHT: 15px;
PADDING-LEFT: 10px;
WIDTH: 100%;
CURSOR: hand;
COLOR: highlighttext;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: white 1px solid;
BACKGROUND-COLOR: highlight
}
.ItemMouseOut
{
WIDTH: 100%
}
.Arrow
{
FLOAT: right;
FONT-FAMILY: Webdings;
POSITION: absolute;
TEXT-ALIGN: left
}
.barOver
{
BORDER-RIGHT: blue 1px ridge;
BORDER-TOP: blue 1px ridge;
FLOAT: left;
BORDER-LEFT: blue 1px ridge;
WIDTH: 100px;
CURSOR: hand;
TEXT-INDENT: 5px;
BORDER-BOTTOM: blue 1px ridge;
POSITION: relative;
BACKGROUND-COLOR: deepskyblue;
TEXT-ALIGN: center
}

.js:

function InitMenu()
{
var bar = menuBar.children
for(var i=0;i < bar.length;i++)
{
var menu=eval(bar.menu)
menu.style.visibility = "hidden"
bar.onmouseover = new Function("ShowMenu("+bar.id+&quot&quot
var Items = menu.children
for(var j=0; j<Items.length; j++)
{
var menuItem = eval(Items[j].id)
if(menuItem.menu != null)
{
menuItem.innerHTML += "<Span Id="+menuItem.id+"_Arrow class='Arrow'>4</Span>"
FindSubMenu(menuItem.menu)}
if(menuItem.cmd != null)
{
menuItem.onclick = new Function("Do("+menuItem.id+&quot&quot }
menuItem.onmouseover = new Function("highlight("+Items[j].id+&quot&quot
}
}
}
function FindSubMenu(subMenu)
{
var menu=eval(subMenu)
var Items = menu.children
for(var j=0; j<Items.length; j++)
{
menu.style.visibility = "hidden"
var menuItem = eval(Items[j].id)
if(menuItem.menu!= null)
{
menuItem.innerHTML += "<Span Id="+menuItem.id+"_Arrow class='Arrow'>4</Span>"
FindSubMenu(menuItem.menu)
}
if(menuItem.cmd != null)
{
menuItem.onclick = new Function("Do("+menuItem.id+&quot&quot }
menuItem.onmouseover = new Function("highlight("+Items[j].id+&quot&quot
}
}
function ShowMenu(obj)
{
HideMenu(menuBar)
var menu = eval(obj.menu)
var bar = eval(obj.id)
bar.className="barOver"
menu.style.visibility = "visible"
menu.style.pixelTop = obj.getBoundingClientRect().top + obj.offsetHeight + Bdy.scrollTop
menu.style.pixelLeft = obj.getBoundingClientRect().left + Bdy.scrollLeft
}
function highlight(obj)
{
var PElement = eval(obj.parentElement.id)
if(PElement.hasChildNodes() == true)
{ var Elements = PElement.children
for(var i=0;i<Elements.length;i++)
{
TE = eval(Elements.id)
TE.className = "menuItem"
}
}
obj.className="ItemMouseOver"
window.defaultStatus = obj.title
ShowSubMenu(obj)
}
function Do(obj)
{
var cmd = eval(obj).cmd
window.navigate(cmd)
}
function HideMenu(obj)
{
if(obj.hasChildNodes()==true)
{
var child = obj.children
for(var j =0;j<child.length;j++)
{
if (child[j].className=="barOver&quot
{var bar = eval(child[j].id)
bar.className="Bar"}
if(child[j].menu != null)
{
var childMenu = eval(child[j].menu)
if(childMenu.hasChildNodes()==true)
HideMenu(childMenu)
childMenu.style.visibility = "hidden"
}
}
}
}
function ShowSubMenu(obj)
{
PMenu = eval(obj.parentElement.id)
HideMenu(PMenu)
if(obj.menu != null)
{
var menu = eval(obj.menu)
menu.style.visibility = "visible"
menu.style.pixelTop = obj.getBoundingClientRect().top + Bdy.scrollTop
menu.style.pixelLeft = obj.getBoundingClientRect().right + Bdy.scrollLeft
if(menu.getBoundingClientRect().right > window.screen.availWidth )
menu.style.pixelLeft = obj.getBoundingClientRect().left - menu.offsetWidth
}
}

html:

<head>
<link href="../_script/CascadeMenu.css" rel="stylesheet">
<script language="javascript" src="../_script/CascadeMenu.js">
</script>
</head>
<body OnLoad="InitMenu()" Onclick="HideMenu(menuBar)" ID="Bdy">
<DIV Id="menuBar" class="menuBar">
<DIV Id="Bar1" class="Bar" menu="menu1">Approve/Update/Generate</DIV>
<DIV Id="Bar2" class="Bar" menu="menu2">Received</DIV>
<DIV Id="Bar3" class="Bar" menu="menu3">Update</DIV>
<DIV Id="Bar4" class="Bar" menu="menu4">Reports</DIV>
</DIV>
<div Id="menu1" class="menu" >
<div Id="menuItem1_1" class="menuItem" title="Approve PO" cmd="group1/approval.asp">Approve PO</div>
<div Id="menuItem1_2" class="menuItem" title="Update PO" cmd="updatePO.asp">Update PO</div>
<div Id="menuItem1_3" class="menuItem" title="Generate PO" cmd="group2/generatepo.asp">Generate PO</div>
</div>
<div Id="menu2" class="menu">
<div Id="menuItem2_1" class="menuItem" title="Mark as Received" cmd="group3/recv.asp">Mark as Recd</div>
<div Id="menuItem2_2" class="menuItem" title="Not Received Yet" cmd="group1a/notrecd.asp">Not Recd Yet</div>
<div Id="menuItem2_3" class="menuItem" title="PO Comments" cmd="group1a/pocomments.asp">PO Comments</div>
</div>
<div Id="menu3" class="menu">
<div Id="menuItem3_1" class="menuItem" title="Received, not Paid" cmd="group1a/notpaid.asp">Recd, Not Paid</div>
<div Id="menuItem3_2" class="menuItem" title="Order Numbers" cmd="group3/ordernum.asp">Order Numbers</div>
</div>
<div Id="menu4" class="menu">
<div Id="menuItem4_1" class="menuItem" title="Paid Items" cmd="group1a/paid.asp">Paid Items</div>
<div Id="menuItem4_2" class="menuItem" title="Find Item" cmd="finditem.asp">Find Item</div>
<div Id="menuItem4_3" class="menuItem" title="View Received Items" cmd="viewrecd.asp">View Recd</div>
<div Id="menuItem4_4" class="menuItem" title="Approved, Not Ordered" cmd="appnotord.asp">Not Ordered</div>
<div Id="menuItem4_5" class="menuItem" title="Cancelled Items" cmd="cancelled.asp">Cancelled</div>
</div>

I'm really new to css and using divs so it's taking me a while to figure this out. Thanks.

RISTMO · Aug 10, 2002

Just replace the old html part with this one. There were errors in the code when I copied it. Those haven't been fixed.

<head>
<link href="../_script/CascadeMenu.css" rel="stylesheet">
<script language="javascript" src="../_script/CascadeMenu.js">
</script>
</head>
<body OnLoad="InitMenu()" Onclick="HideMenu(menuBar)" ID="Bdy">
<center>
<div style="width:170;text-align:left;">
<DIV Id="menuBar" class="menuBar">
<DIV Id="Bar1" class="Bar" menu="menu1">Approve/Update/Generate</DIV>
<DIV Id="Bar2" class="Bar" menu="menu2">Received</DIV>
<DIV Id="Bar3" class="Bar" menu="menu3">Update</DIV>
<DIV Id="Bar4" class="Bar" menu="menu4">Reports</DIV>
</DIV>
<div Id="menu1" class="menu">
<div Id="menuItem1_1" class="menuItem" title="Approve PO" cmd="group1/approval.asp">Approve PO</div>
<div Id="menuItem1_2" class="menuItem" title="Update PO" cmd="updatePO.asp">Update PO</div>
<div Id="menuItem1_3" class="menuItem" title="Generate PO" cmd="group2/generatepo.asp">Generate PO</div>
</div>
<div Id="menu2" class="menu">
<div Id="menuItem2_1" class="menuItem" title="Mark as Received" cmd="group3/recv.asp">Mark as Recd</div>
<div Id="menuItem2_2" class="menuItem" title="Not Received Yet" cmd="group1a/notrecd.asp">Not Recd Yet</div>
<div Id="menuItem2_3" class="menuItem" title="PO Comments" cmd="group1a/pocomments.asp">PO Comments</div>
</div>
<div Id="menu3" class="menu">
<div Id="menuItem3_1" class="menuItem" title="Received, not Paid" cmd="group1a/notpaid.asp">Recd, Not Paid</div>
<div Id="menuItem3_2" class="menuItem" title="Order Numbers" cmd="group3/ordernum.asp">Order Numbers</div>
</div>
<div Id="menu4" class="menu">
<div Id="menuItem4_1" class="menuItem" title="Paid Items" cmd="group1a/paid.asp">Paid Items</div>
<div Id="menuItem4_2" class="menuItem" title="Find Item" cmd="finditem.asp">Find Item</div>
<div Id="menuItem4_3" class="menuItem" title="View Received Items" cmd="viewrecd.asp">View Recd</div>
<div Id="menuItem4_4" class="menuItem" title="Approved, Not Ordered" cmd="appnotord.asp">Not Ordered</div>
<div Id="menuItem4_5" class="menuItem" title="Cancelled Items" cmd="cancelled.asp">Cancelled</div>
</div>
</div>
</center>

Rick It's a pleasure to know that I've helped you. If I have,
please click the link below to let me know.

yesti · Aug 12, 2002

Hello,
Thanks for the reply. I tried this before and it doesn't quite do what I had wanted. This centers each of the topmost menu items on separate lines. I just wanted to align the top row centered on the page. I put that LEFT:125; under .menubar in the .css to "center" the menu on an 800x600 screen, but that is a bad solution.

Is there a way to do this with tables? I'm fine with that if that will work. I tried enclosing all the div's in a table, but then they did not show up. Maybe I have to rtfm a little more... Thanks!

yesti · Aug 13, 2002

What I ended up doing is writing a small javascript to resize the window to a preset width, then using the style sheet to set the left margin of the menu. That seems good for now. Thanks ristmo2001!

yesti · Dec 17, 2002

After some fiddling I have found a better way to center the menu. Calculate the width of the menu (in this case 445) then put this in the <head> tag:

<script language=javascript>
var width=document.documentElement.scrollWidth;
width=Math.abs((width-445)/2);
document.write("<style type='text/css'>.menuBar{LEFT:"+width+";POSITION:absolute;BACKGROUND-COLOR:transparent;TEXT-ALIGN:center;COLOR:#FFFFFF;FONT-WEIGHT:bold;}</style>&quot

;
</script>

Take out the .menuBar section from the css file and if you want it to stay centered even if the window is resized put this in the <body> tag:

onResize='location.reload();'

This code works for IE 5.5 SP2. Might have to get the browser window width another way if using a different browser. For examples go here:

http://east.portland.ne.jp/~sigekazu/css/javascript10.htm

and scroll to about 2/3 the way down to see what works in your browser. The page is in japanese, but the table you need is in English. Hope this helps someone.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How to center a div 1

yesti

MIS

RISTMO

Programmer

yesti

MIS

yesti

MIS

yesti

MIS

Similar threads

Part and Inventory Search

Sponsor