SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Addict
    Join Date
    Oct 2010
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question how to center navigation menu ?

    hii i want to know how to center my navigation here is the code please mention me where to change

    Code:
    #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;
    }
    #nav .children {
        display: none;
    }
    #subMenusContainer {
        display: block;
        height: 0;
        left: 0;
        overflow: visible;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1000000000;
    }
    Menu is using this class
    <ul id="nav">

    how to centre my menu li ? . . . ?

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Google "how to center your navigation menu".

  3. #3
    SitePoint Addict
    Join Date
    Oct 2010
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 ?

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    you need to post all your code. CSS is not all thats neded to make the world go round. A link would be even better.

  5. #5
    SitePoint Addict
    Join Date
    Oct 2010
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here is link of wordpress theme header menu which i want to change....
    http://themepix.com/demo/?themedemo=WebPro

    you can download from the same site for checking code or you can view source for more details thanks

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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

  7. #7
    SitePoint Addict
    Join Date
    Oct 2010
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry i am not much fimilar with css can you mention me which thing i add more or edit in my css
    thanks

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by realcoder View Post
    sorry i am not much fimilar with css can you mention me which thing i add more or edit in my css
    thanks
    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):

    Code:
    <!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

  9. #9
    SitePoint Addict
    Join Date
    Oct 2010
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://themepix.com/demo/?themedemo=WebPro
    well this is link which menu i want to center you can check source and can get easily css and html code more easily...

  10. #10
    SitePoint Addict
    Join Date
    Oct 2010
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://themepix.com/demo/wp-content/...bPro/style.css this is css link here you can find
    and i think this one is menu css code
    Code:
    #navcontainer {
        display: block;
        height: 44px;
        margin-bottom: 0;
        overflow: hidden;
        padding: 0;
        text-shadow: 0 1px 0 #FFFFFF;
        width: 980px;
    }
    #navcontainer .current-cat a {
        background: none repeat scroll 0 0 #CCCCCC;
    }

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    It's still the same code I gave you more or less.

    Code:
    #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.

    Code:
    #navcontainer{
    width:801px;/* this matches the width of the items on the page you linked to */
    margin:auto;
    }

  12. #12
    SitePoint Addict
    Join Date
    Oct 2010
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well i don't know but still not working

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by realcoder View Post
    well i don't know but still not working
    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.

  14. #14
    SitePoint Addict
    Join Date
    Oct 2010
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is html portion code

    Code:
    <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>
    and this is the link of css files you can watch here see here

    http://themepix.com/demo/wp-content/...bPro/style.css this one is looking main css style sheet

    and other stylesheets which are include

    http://themepix.com/demo/wp-content/...css/screen.css

    http://themepix.com/demo/wp-content/.../css/print.css

    http://themepix.com/demo/wp-content/.../MenuMatic.css

    So please let me know in which file i change or replace which code
    thanks

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    <!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.

    Hope that helps

  16. #16
    SitePoint Addict
    Join Date
    Oct 2010
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok thanks Working Now..


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •