How do i center these buttons.

The_blue

The_blue

The_blue

Soldato
Joined
25 Oct 2002
Posts
4,198
Location
Derbyshire
I've found a java script that makes a nice menu bar.

http://ccgi.theblue.plus.com/CSAC_website/menutest.html

How do i get the buttons centered in the page?

I've tried for abour an hour :(

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test menu</title>
<script type="text/javascript">
<!--
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();

// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose;
// -->
</script>
<style type="text/css">
<!--
#sddm
{ margin: 0;
padding: 0;
z-index: 30}

#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial}

#sddm li a
{
display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 60px;
color: #FFF;
text-align: center;
text-decoration: none;
background-color: #20477E;
}

#sddm li a:hover
{ background: #49A3FF}

#sddm div
{
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #212F4C
}
#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #EAEBD8;
color: #2875DE;
font: 11px arial}

#sddm div a:hover
{ background: #49A3FF;
color: #FFF}

#container {
width: 950px;
margin-right: auto;
margin-left: auto;
background-color: #1DE688;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
height: 950px;
}

#Menubox {
text-align: center;
width: 950px;
color: #212F4C;
clear: both;
padding: 0px;
height: 25px;
background-color: #212F4C;
}

-->
</style>
</head>

<body>
<div id="container">
<div id="Menubox">
<ul id="sddm">
<li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Home</a>
<div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">HTML DropDown</a>
<a href="#">DHTML DropDown menu</a>
<a href="#">JavaScript DropDown</a>
<a href="#">DropDown Menu</a>
<a href="#">CSS DropDown</a>
</div>
</li>
<li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">Download</a>
<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">ASP Dropdown</a>
<a href="#">Pulldown menu</a>
<a href="#">AJAX dropdown</a>
<a href="#">DIV dropdown</a>
</div>
</li>
<li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">Order</a>
<div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">Visa Credit Card</a>
<a href="#">Paypal</a>
</div>
</li>
<li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">Help</a>
<div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">Download Help File</a>
<a href="#">Read online</a>
</div>
</li>
<li><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()">Contact</a>
<div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">E-mail</a>
<a href="#">Submit Request Form</a>
<a href="#">Call Center</a>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
Click to expand...
 
I've found a java script that makes a nice menu bar.

http://ccgi.theblue.plus.com/CSAC_website/menutest.html

How do i get the buttons centered in the page?

I've tried for abour an hour :(

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test menu</title>
<script type="text/javascript">
<!--
var timeout         = 500;
var closetimer		= 0;
var ddmenuitem      = 0;

// open hidden layer
function mopen(id)
{	
	// cancel close timer
	mcancelclosetime();

	// close old layer
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

	// get new layer and show it
	ddmenuitem = document.getElementById(id);
	ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
	closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}

// close layer when click-out
document.onclick = mclose; 
// -->
</script>
<style type="text/css">
<!--
#sddm
{	margin: 0;
	padding: 0;
	z-index: 30}

#sddm li
{	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font: bold 11px arial}

#sddm li a
{
	display: block;
	margin: 0 1px 0 0;
	padding: 4px 10px;
	width: 60px;
	color: #FFF;
	text-align: center;
	text-decoration: none;
	background-color: #20477E;
}

#sddm li a:hover
{	background: #49A3FF}

#sddm div
{
	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background: #EAEBD8;
	border: 1px solid #212F4C
}
	#sddm div a
	{	position: relative;
		display: block;
		margin: 0;
		padding: 5px 10px;
		width: auto;
		white-space: nowrap;
		text-align: left;
		text-decoration: none;
		background: #EAEBD8;
		color: #2875DE;
		font: 11px arial}

	#sddm div a:hover
	{	background: #49A3FF;
		color: #FFF}
		
#container {
	width: 950px;
	margin-right: auto;
	margin-left: auto;
	background-color: #1DE688;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
	height: 950px;
}
	
#Menubox {
	text-align: center;
	width: 950px;
	color: #212F4C;
	clear: both;
	padding: 0px;
	height: 25px;
	background-color: #212F4C;
}

-->
</style>
</head>

<body>
<div id="container">
  <div id="Menubox">
  <ul id="sddm">
    <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Home</a>
      <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
        <a href="#">HTML DropDown</a>
        <a href="#">DHTML DropDown menu</a>
        <a href="#">JavaScript DropDown</a>
        <a href="#">DropDown Menu</a>
        <a href="#">CSS DropDown</a>
        </div>
      </li>
    <li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">Download</a>
      <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
        <a href="#">ASP Dropdown</a>
        <a href="#">Pulldown menu</a>
        <a href="#">AJAX dropdown</a>
        <a href="#">DIV dropdown</a>
        </div>
      </li>
    <li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">Order</a>
      <div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
        <a href="#">Visa Credit Card</a>
        <a href="#">Paypal</a>
        </div>
      </li>
    <li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">Help</a>
      <div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
        <a href="#">Download Help File</a>
        <a href="#">Read online</a>
        </div>
      </li>
    <li><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()">Contact</a>
      <div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
        <a href="#">E-mail</a>
        <a href="#">Submit Request Form</a>
        <a href="#">Call Center</a>
        </div>
      </li>
  </ul>
  </div>
</div>
</body>
</html>
 
You have to put all the buttons in a container div, give it a width, then set margin-left and margin-right as auto.

Edit: Make the #container smaller so its not the same width as the div it is in, 450px for example.
 
Last edited:
PiKe said:
You have to put all the buttons in a container div, give it a width, then set margin-left and margin-right as auto.

Edit: Make the #container smaller so its not the same width as the div it is in, 450px for example.
Click to expand...

Ok, I get that :)
 
PiKe said:
Sorry that should be make the menubox smaller.
Click to expand...

Ok. But i wanted the background colour assigned to menubox.

I've now got the following:-

Code: 
<div id="container">
  <div id="Menubox">
    <div id="Menubox_inside">
etc...

Code: 
#Menubox_inside {
	text-align: center;
	width: 410px;
	color: #212F4C;
	clear: both;
	padding: 0px;
	height: 25px;
	background-color: #212F4C;
	margin-right: auto;
	margin-left: auto;

Is that what you mean?

By change i mean add or remove buttons.
 
Well yes, but how often will you want to add or remove buttons? For it to center, the DIV must have a width.
 
You must log in or register to reply here.
Back
Top Bottom