lol
well I have Google this first but I have also change many things but code don’t work properly… that’s why paste there that if anybody can help me out ?
Your floating the li’s and a’s. You can do it that way but there are better alternatives. Try to implement one of these. Its all right there you just have to add the nessesary pieces. http://www.visibilityinherit.com/code/center-nav.php
At present you are floating the list elements and anchors and that means that they can’t really be centred easily because they are floated. If the menu is a fixed width then you could use margin:auto on the parent ul which will center it but you need to apply the correct width to the ul.
If the menu is a a variable or fluid with then you will need to use a technique such as inline-block. This example is taken from one of the CSS quizzes (you will find a link to them in the CSS FAQ -see my sig):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Centered Inline-Blocks with Cross Browser Node Fix</title>
<style type="text/css">
h1 {
font-size:1.5em;
text-align:center;
}
h1 small { display:block; }
/*===== Test Code =====*/
#nav {
display:table;/* Webkit Fix */
width:800px;/* set width to stop FF from wrapping li's*/
text-align:center; /* center list items*/
word-spacing:-.25em; /* hide whitespace nodes in all modern browsers (not for webkit)*/
margin:0 auto;
padding:.25em 0;
list-style:none;
background:#000;
}
#nav li {
display:inline;
}
#nav li a {
display:-moz-inline-box; /* FF2 and K-Meleon */
display:inline-block;
vertical-align:bottom;
word-spacing:0; /* reset from parent ul*/
padding:0 .5em;
font:bold 1em/1.5 arial;
background:#0f0;
border:1px solid red;
}
* html #nav li a { display:inline; } /*IE6*/
*+html #nav li a { display:inline; } /*IE7*/
</style>
</head>
<body>
<h1>Centered Inline-Blocks <small>with Cross Browser Whitespace Node Fix</small></h1>
<ul id="nav">
<ul>
<li><a href="#">inline-block</a></li>
<li><a href="#">inline-block</a></li>
<li><a href="#">inline-block</a></li>
<li><a href="#">inline-block</a></li>
<li><a href="#">inline-block</a></li>
</ul>
</body>
</html>
If you want more specific help then post the css and html for your menu to save us guessing what structure you have rather than sending us to a site where a similar menu exists that we have to de construct before we can help and still not know if that is what you are using exactly:)
#navcontainer{
text-align:center;
display:table:
width:100%;
word-spacing:-.25em; /* hide whitespace nodes in all modern browsers (not for webkit)*/
}
#navcontainer li,
#navcontainer li a{
display:inline-block;
float:none;
word-spacing:0; /* reset from parent ul*/
vertical-align:top;
}
* html #navcontainer li,
* html #navcontainer li a {display:inline}
*+html #navcontainer li,
*+html #navcontainer li a {display:inline}
Add that after the existing code and it will center the menu.
Of course as I mentioned before if the items are a fixed width then simply center the ul.
#navcontainer{
width:801px;/* this matches the width of the items on the page you linked to */
margin:auto;
}
As I said above we really need your full code and html :).
If you use “edit css” in Firefox or css terminal and add that code to the live menu you showed me you will see that it works straight out of the box.
However if you have changed the structure or changed some rules then it will likely not work and the only way for me to debug is for you to post a version of your menu with html and css or provide a link to the page.
Just add the code I gave you at the end of the css file that holds the menu styles. If you are unsure which that one is then just add it to the last css file in sequence at the end. It will then over-ride some styles that went before.
Here is your html that you just gave me untouched , with the css from your first post untouched, and the code I just gave you untouched.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
#nav a, #subMenusContainer a {
display: block;
text-decoration: none;
}
#nav a {
color: #333333;
float: left;
font-size: 11px;
font-weight: bold;
margin: 0;
padding: 16px 14px 14px;
text-transform: uppercase;
}
#subMenusContainer a, #nav li li a {
background-color: #CACACA;
color: #1A1B1B;
font-size: 12px;
padding: 6px 24px;
text-align: left;
}
#nav li a:hover, #nav li a:focus, #nav a.mainMenuParentBtnFocused { background: none repeat scroll 0 0 #CCCCCC; }
#subMenusContainer a:hover, #subMenusContainer a:focus, #subMenusContainer a.subMenuParentBtnFocused {
background-color: #F1F1F1;
color: #1A1B1B;
}
.subMenuParentBtn { background: url("../img/arrow_right.gif") no-repeat scroll right center transparent; }
.subMenuParentBtnFocused { background: url("../img/arrow_right_over.gif") no-repeat scroll right center transparent; }
.mainMenuParentBtn { }
.mainMenuParentBtnFocused { }
.smOW {
display: none;
margin: 0 0 0 -2px;
overflow: hidden;
padding: 0 2px;
position: absolute;
}
#nav, #nav ul, #nav ol, #subMenusContainer ul, #subMenusContainer ol {
line-height: 1em;
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav ol, #nav ul, #subMenusContainer ul, #subMenusContainer ol {
background: none repeat scroll 0 0 transparent;
left: 0;
}
#nav li {
border-right: 1px solid #CCCCCC;
cursor: pointer;
display: inline;
float: left;
margin: 0;
padding: 0;
}
#subMenusContainer li { list-style: none outside none; }
#nav {
clear: both;
display: block;
font-size: 12px;
margin: 0 auto;
overflow: hidden;
width: 927px;
background:red;
}
#nav .children { display: none; }
#subMenusContainer {
display: block;
height: 0;
left: 0;
overflow: visible;
position: absolute;
top: 0;
width: 100%;
z-index: 1000000000;
}
/*.............. new code added here .................. */
#navcontainer {
text-align:center;
display:table:
width:100%;
word-spacing:-.25em; /* hide whitespace nodes in all modern browsers (not for webkit)*/
}
#navcontainer li, #navcontainer li a {
display:inline-block;
float:none;
word-spacing:0; /* reset from parent ul*/
vertical-align:top;
}
* html #navcontainer li, * html #navcontainer li a { display:inline }
*+html #navcontainer li, *+html #navcontainer li a { display:inline }
</style>
</head>
<body>
<div class="outer">
<div id="navcontainer">
<ul id="nav">
<li class="current-cat" ><a href="http://localhost/word">Home</a></li>
<li class="cat-item cat-item-9"><a href="http://localhost/word/category/chatroom" title="Chatroom">Chatroom</a> </li>
<li class="cat-item cat-item-8"><a href="http://localhost/word/category/information" title="All Information About Vu">Information</a> </li>
<li class="cat-item cat-item-3"><a href="http://localhost/word/category/past-papers" title="All Past papers you can find here">Past Papers</a>
<ul class='children'>
<li class="cat-item cat-item-6"><a href="http://localhost/word/category/past-papers/bba" title="ALL BBA papers go hre">BBA</a> </li>
<li class="cat-item cat-item-5"><a href="http://localhost/word/category/past-papers/mba-papers" title="All mBA papers you can find here">MBA papers</a>
<ul class='children'>
<li class="cat-item cat-item-7"><a href="http://localhost/word/category/past-papers/mba-papers/accounting" title="accounting papers">Accounting</a> </li>
</ul>
</li>
</ul>
</li>
<li class="cat-item cat-item-4"><a href="http://localhost/word/category/video-lectures" title="All video lectures you can find here">VIdeo Lectures</a> </li>
</ul>
</div>
</div>
</body>
</html>
The only change I made was to make the background red so you could see it centred. Just copy and paste that code and run it your browser to see the centred menu in working order.
