Need some help centering a CSS dropdown menu

[Karrde]

Hey all, I'm building a website using this menu:

http://javascriptkit.com/script/script2/csstopmenu.shtml

However, I'm having trouble getting the menu to always be centered on the page. As it is right now, the menu is always aligned to the left side of the page, which looks bad when everything else is centered. Is there a simple way to always have the menu centered? Any help here would be very much appreciated.

[TimFA]

Does margin: auto; work? I can't try at the moment my keyboard is hating me....space bars broken sometimes it doesn't space sometimes it keeps on going (until I bash it) makes typing hard lol.

[Karrde]

I've tried using margin: auto in the css file but it doesn't seem to do anything. I could be putting it in wrong though:


.horizontalcssmenu ul{
margin: auto;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: left;

}

/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 115px; /*Width of top level menu link items*/
padding: 2px 8px;
border: 1px solid #202020;
border-left-width: 0;
text-decoration: none;
background: url(menubg.gif) center center repeat-x;
color: black;
font: bold 13px Tahoma;
}

/*Sub level menu*/
.horizontalcssmenu ul li ul{
left: 0;
top: 0;
border-top: 1px solid #202020;
position: absolute;
display: block;
visibility: hidden;
z-index: 100;
}

/*Sub level menu list items*/
.horizontalcssmenu ul li ul li{
display: inline;
float: none;
}


/* Sub level menu links style */
.horizontalcssmenu ul li ul li a{
width: 125px; /*width of sub menu levels*/
font-weight: normal;
padding: 2px 5px;
background: #e3f1bd;
border-width: 0 1px 1px 1px;
}

.horizontalcssmenu ul li a:hover{
background: url(menubgover.gif) center center repeat-x;
}

.horizontalcssmenu ul li ul li a:hover{
background: #cde686;
}

.horizontalcssmenu .arrowdiv{
position: absolute;
right: 0;
background: transparent url(menuarrow.gif) no-repeat center left;
}

* html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}

/* Holly Hack for IE \*/
* html .horizontalcssmenu ul li { float: left; height: 1%; }
* html .horizontalcssmenu ul li a { height: 1%; }
/* End */

[TimFA]

Holly Hack, eh? Lol.

Try this:


.horizontalcssmenu {
margin: auto;
}

.horizontalcssmenu ul{
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: left;

}

/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 115px; /*Width of top level menu link items*/
padding: 2px 8px;
border: 1px solid #202020;
border-left-width: 0;
text-decoration: none;
background: url(menubg.gif) center center repeat-x;
color: black;
font: bold 13px Tahoma;
}

/*Sub level menu*/
.horizontalcssmenu ul li ul{
left: 0;
top: 0;
border-top: 1px solid #202020;
position: absolute;
display: block;
visibility: hidden;
z-index: 100;
}

/*Sub level menu list items*/
.horizontalcssmenu ul li ul li{
display: inline;
float: none;
}


/* Sub level menu links style */
.horizontalcssmenu ul li ul li a{
width: 125px; /*width of sub menu levels*/
font-weight: normal;
padding: 2px 5px;
background: #e3f1bd;
border-width: 0 1px 1px 1px;
}

.horizontalcssmenu ul li a:hover{
background: url(menubgover.gif) center center repeat-x;
}

.horizontalcssmenu ul li ul li a:hover{
background: #cde686;
}

.horizontalcssmenu .arrowdiv{
position: absolute;
right: 0;
background: transparent url(menuarrow.gif) no-repeat center left;
}

* html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}

/* Holly Hack for IE \*/
* html .horizontalcssmenu ul li { float: left; height: 1%; }
* html .horizontalcssmenu ul li a { height: 1%; }
/* End */


Hope it works.

[Karrde]

hmm, tried that and it didn't work. Actually, how should the menu be inserted onto my page? This is how the page looks right now:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Labrador Christian Youth Camp</title>
<link rel="stylesheet" type="text/css" href="csshorizontalmenu.css">
<script type="text/javascript" src="csshorizontalmenu.js">

/***********************************************

* CSS Horizontal List Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more

***********************************************/

</script>
</head>

<body>
<table border="0" align="center" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="100%" bgcolor="#006600"><img src="mm_spacer.gif" width="1" height="5" border="0" alt=""></td>
</tr>
<tr>
<td width="100%" bgcolor="#009900"><img src="mm_spacer.gif" width="1" height="15" border="0" alt=""></td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" height="159" align="center" valign="top"><img src="Images/Logo_draft_1.jpg" alt="Logo" width="550" height="165" align="middle"></td>
</tr>
</table>
<table border="0" align="center" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="100%" bgcolor="#009900"><img src="mm_spacer.gif" width="1" height="15" border="0" alt=""></td>
</tr>
<tr>
<td width="100%" bgcolor="#006600"><img src="mm_spacer.gif" width="1" height="5" border="0" alt=""></td>
</tr>
</table>
<div class="horizontalcssmenu">
<ul id="cssmenu1">
<li style="border-left: 1px solid #202020;"><a href="index.html">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Programs</a></li>
<li><a href="#">Site and Facilities</a></li>
<li>
<a href="#">Registrations</a></li>
<li>
<a href="#">Photo Gallery</a>
<ul>
<li><a href="#">Summer 2005</a></li>
<li><a href="#">Summer 2006</a></li>
<li><a href="#">Summer 2007</a></li>
</ul>
</li>
<li>
<a href="#">Contact Us</a></li>
</ul>
</div>
</body>
</html>

Yes, I know I shouldn't use tables, but I have my reasons for them.

[BLiZZaRD]

margins, like padding has 4 sides. You must declare at least two. The margins/padding go clockwise around screen starting at the top:

margin: 10px 20px 30px 40px; is saying Top has 10 pixel margin, right edge is 20, bottom edge is 30 and left 40.

If you only declare 2 sides they are grouped:

margin: 10px 20px; means top AND bottom get 10 pixel margin, left AND right get 20.

margin: auto auto; will set the margins auto for the browser being used to view (usually same same except for IE.

If you have declared margins for the body or for * the auto; will use those:



* {
margin:0px;
padding: 0px;
}

#element {
margin: auto auto;
}


Will give element a margin of 0, 0, 0, 0.

[boogyman]

If you would like to set a universal margin/padding (all the same) you can just set it to


margin: X;
padding: X;

where X represents the explicit (non-auto) margin that will be applied to all 4 sides.

what seems missing from this thread is the fact that a width element is usually always necessary when creating a "centering" affect.



selector {
margin: 0 auto;
width: 100%;
text-align: center;;
}


note that text-align: center; is only mandatory if you apply a 100% width to the element (selector)



margin: 0 auto;

refers to zero margin on the vertical plains and automatic margins on the horizontal plains.

another way to write that, using what Blizzard said about clockwise declaration is


margin: 0 auto 0 auto;

top / right / bottom / left




* {
margin:0px;
padding: 0px;
}


be warned, the asterisk alone has a tendency to produce un-expected results in IE6 and below (go figure)

If you wish to apply a style to every element, its best to just comma-delimit them in a string followed by the style you wish to apply


body,div,p,span,table,strong,b,em,i,table,tr,th,td,element#idName,element.className {
property: value;
}

[BLiZZaRD]

be warned, the asterisk alone has a tendency to produce un-expected results in IE6 and below (go figure)


Such as? I have never had problems with it.

If you are worried you can also do:




* html {
margin:0;
padding:0;
}


or even:




body html {
margin:0;
padding:0;
}


But these have known issues with IE (http://www.info.com.ph/~etan/w3pantheon/style/starhtmlbug.html)

[Schwiz]

I am going to re-open this thread because I am having the same problem with the same template. I can't get it to center!

[Schwiz]

Here is a link to show the problem I am having...

http://schwiz.angelfire.com/index.html