2 Votes Vote

Stop Menu Bar From Shifting Other Menu Items

Posted by topdog 933 days ago Questions| div class html All
Hi,

I have a sample up at
http://www.nkcorner.com/tmp/

What I'd like is for the other menu items to stay in originally placed location when I set font-weight to bold. I want to stop the shifting. I know I can absolutely fix width but I prefer not to. Is there any way to fix this without giving a fixed width?

Thanx

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8559-1">
<link href="main.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="main.js"></script>
</head>
<body onload="return onLoad();">
<div class="divIcon" id="divIcon">
<img class="mainIcon" src="NK_100x100.gif"/>
</div>
<div class="topMenuBar">
<div class="topMenu">
<div class="topMenuItemBox" id="topMenuHome" onmouseover="return menuOver(this);" onmouseout="return menuOut(this);" onclick="return menuClick(this);">
<div class="topMenuItem">
Home
</div>
</div>
<div class="topMenuItemBox" id="topMenuResume" onmouseover="return menuOver(this);" onmouseout="return menuOut(this);" onclick="return menuClick(this);">
<div class="topMenuItem">
Resume
</div>
</div>
<div class="topMenuItemBox" id="topMenuPictures" onmouseover="return menuOver(this);" onmouseout="return menuOut(this);" onclick="return menuClick(this);">
<div class="topMenuItem">
Pictures
</div>
</div>
</div>
</div>
</body>
</html>

CSS:
.divIcon
{
margin-top:0px;
margin-left:0px;
width:100px;
height:100px;
border-width:2px;
border-style:groove;
float:left;
}
.topMenuBar {
margin-top:0px;
margin-left:104px;
background-color:red;
height:104px;
}
.topMenu {
padding-top:52px;
width:100%;
height:50%;
}
.topMenuItemBox {
height:100%;
float:left;
}
.topMenuItem {
padding:10px;
text-align:center;
}
.topMenuSetItem {
font-weight:bold;
font-style:italic;
font-size:large;
}
.topMenuOverItem {
font-weight:bold;
cursor:pointer;
}

JS:
currentDiv = null;
function onLoad() {
storeStartClassNames();
setTopMenu(document.getElementById('topMenuHome'));
return 1;
}
function storeStartClassNames() {
var allElements = document.getElementsByTagName("*");
for(var i = 0; i < allElements.length; i++)
allElements[i].oldClassName = allElements[i].className;
}
function setTopMenu(div) {
if(currentDiv && (div != currentDiv))
unsetTopMenu(currentDiv);
if(div == currentDiv)
return 0;
currentDiv = div;
div.className = div.oldClassName + " topMenuSetItem";
return 1;
}
function unsetTopMenu(div) {
div.className = div.oldClassName;
}
function menuClick(div) {
setTopMenu(div);
}
function menuOver(div) {
if(currentDiv == div)
return 0;
div.className = div.oldClassName + " topMenuOverItem";
return 1;
}
function menuOut(div) {
if(currentDiv == div)
return 0;
div.className = div.oldClassName;
return 1;
}
Discuss Bury


Who Voted for this Question