Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Hi there,
There is an issue with role permissions that is being worked on at the moment.
If you are having trouble with access or permissions on regional forums please post here to get access: https://www.boards.ie/discussion/2058365403/you-do-not-have-permission-for-that#latest

Need help with centering CSS menu please

  • 27-09-2014 9:12pm
    #1
    iPaddyM
    Registered Users, Registered Users 2 Posts: 324 ✭✭


    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 :o

    Thanks in advance,

    Paddy :)


Comments

  • #2
    Vurnon San Benito
    Registered Users, Registered Users 2 Posts: 3,979 ✭✭✭Vurnon San Benito


    Try writing this above that block of CSS code:
    ul#css3menu1 {margin: 0 auto;}


  • #3
    iPaddyM
    Registered Users, Registered Users 2 Posts: 324 ✭✭iPaddyM


    Hi,

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


  • #4
    Dale Parish
    Registered Users, Registered Users 2 Posts: 894 ✭✭✭Dale Parish


    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;}


  • #5
    zbluebirdz
    Registered Users, Registered Users 2 Posts: 270 ✭✭zbluebirdz


    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


  • #6
    iPaddyM
    Registered Users, Registered Users 2 Posts: 324 ✭✭iPaddyM


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


  • Advertisement
Advertisement