Need help with centering CSS menu please

iPaddyM · 27-09-2014 09:12PM #1

Hey,

I've made a CSS menu using the tool called "CSS3 Menu 5.2". I'm not too farmilliar with CSS. Could someone please help? I just want to center the menu.

Here is the style code;

ul#css3menu1,ul#css3menu1 ul{
	margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menu1 ul{
	display:none;position:absolute;left:0;top:100%;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;background-color:#FFFFFF;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#d4d4d4;padding:0 10px 10px;}
ul#css3menu1 li:hover>*{
	display:block;}
ul#css3menu1 li{
	position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1 li:hover{
	z-index:1;}
ul#css3menu1{
	font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:0;
	*display:inline;}
* html ul#css3menu1 li a{
	display:inline-block;}
ul#css3menu1>li{
	margin:0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
	outline-style:none;}
ul#css3menu1 a{
	display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 14px Trebuchet MS;color:#000000;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:10px;background-color:#c1c1c1;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;}
ul#css3menu1 ul li{
	float:none;margin:10px 0 0;}
ul#css3menu1 ul a{
	text-align:left;padding:4px;background-color:#FFFFFF;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:14px Tahoma;color:#000;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
	background-color:#f8ac00;border-color:#C0C0C0;border-style:solid;color:#000000;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;text-decoration:none;}
ul#css3menu1 span{
	display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 > label.switch{
	display:none;cursor:pointer;width:25px;height:20px;padding:10px;}
ul#css3menu1 > label.switch:before{
	content:"";position:absolute;display:block;height:4px;width:25px;border-radius:4px;background:#000000;-moz-box-shadow:0 8px #000000, 0 16px #000000;-webkit-box-shadow:0 8px #000000, 0 16px #000000;box-shadow:0 8px #000000, 0 16px #000000;}
ul#css3menu1 > label.switch:hover:before{
	background:#000000;-moz-box-shadow:0 8px #000000, 0 16px #000000;-webkit-box-shadow:0 8px #000000, 0 16px #000000;box-shadow:0 8px #000000, 0 16px #000000;}
ul#css3menu1 > .switchbox{
	display:none;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
	background-color:#FFFFFF;background-image:none;color:#868686;text-decoration:none;}
ul#css3menu1 li.topfirst>a{
	border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;-webkit-border-radius:5px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;}
ul#css3menu1 li.toplast>a{
	border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;}
@media screen and (max-width: 768px) {
	ul#css3menu1 > li {
		position: initial;}
	ul#css3menu1 ul .submenu,ul#css3menu1 li > ul {
		left: 0; right:auto; top: 100%;}
	ul#css3menu1 .submenu,ul#css3menu1 ul,ul#css3menu1 .column {
		-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;padding-right: 0;width: 100% !important;}
}
@media screen and (max-width: 192px) {
	ul#css3menu1 {
		width: 100%;}
	ul#css3menu1 > li {
		display: none !important;		position: relative;		width: 100% !important;}
	ul#css3menu1 > label.switch,ul#css3menu1 .switchbox:checked ~ li {
		display: block !important;}

and here is the html code;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>css3menu.com</title>
		<!-- Start css3menu.com HEAD section -->
	<link rel="stylesheet" href="index_files/css3menu1/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>
	<!-- End css3menu.com HEAD section -->

	
</head>
<body style="background-color:#EBEBEB">
<!-- Start css3menu.com BODY section -->
<ul id="css3menu1" class="topmenu">
<input type="checkbox" id="css3menu-switcher" class="switchbox"><label onclick="" class="switch" for="css3menu-switcher"></label>	<li class="topfirst"><a href="#" style="height:18px;line-height:18px;">Item 0</a></li>
	<li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>Item 1</span></a>
	<ul>
		<li><a href="#">Item 1 0</a></li>
		<li><a href="#">Item 1 1</a></li>
		<li><a href="#">Item 1 2</a></li>
	</ul></li>
	<li class="toplast"><a href="#" style="height:18px;line-height:18px;">Item 2</a></li>
</ul><p class="_css3m"><a href="http://css3menu.com/">css drop down menu</a> by Css3Menu.com</p>
<!-- End css3menu.com BODY section -->

</body>
</html>

I've no idea how or even which code would need to be edited

Thanks in advance,

Paddy

Vurnon San Benito · 27-09-2014 09:25PM

Try writing this above that block of CSS code:

ul#css3menu1 {margin: 0 auto;}

iPaddyM · 27-09-2014 09:30PM

Hi,

Thanks for the help. Ok did that, it doesn't seem to have made any difference, my menu still aligns to the left.

Dale Parish · 27-09-2014 10:17PM

You'll have to use text-align: center; on the body parent container (the body in this case) if you're putting the menu as display:inline-block;

CSS

body{text-align:center;}

zbluebirdz · 27-09-2014 10:46PM

OP, your HTML code is in Quirks mode - a PITA to work with. This is old stuff. Most new sites work in Strict mode (well, the sites I work on).

See css3menu.com's FAQ about aligning the menu - #7 answers your question. http://css3menu.com/faq.html

iPaddyM · 28-09-2014 02:52PM

Thanks for your help guys. I have my menu centered now

Need help with centering CSS menu please

Comments