#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    1
    Rep Power
    0

    Centering Navigation Menu


    Hi guys, I'm a newbie in CSS. I've been trying to center the navigation menu but no luck. Can you give me some pointers/advice how to do it? Thanks

    the html page:

    Code:
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <link rel="stylesheet" href="emx_nav_left.css" type="text/css" />
    <script type="text/javascript">
    <!--
    var time = 3000;
    var numofitems = 7;
    
    //menu constructor
    function menu(allitems,thisitem,startstate){ 
      callname= "gl"+thisitem;
      divname="subglobal"+thisitem;  
      this.numberofmenuitems = allitems;
      this.caller = document.getElementById(callname);
      this.thediv = document.getElementById(divname);
      this.thediv.style.visibility = startstate;
    }
    
    //menu methods
    function ehandler(event,theobj){
      for (var i=1; i<= theobj.numberofmenuitems; i++){
        var shutdiv =eval( "menuitem"+i+".thediv");
        shutdiv.style.visibility="hidden";
      }
      theobj.thediv.style.visibility="visible";
    }
    				
    function closesubnav(event){
      if ((event.clientY <48)||(event.clientY > 107)){
        for (var i=1; i<= numofitems; i++){
          var shutdiv =eval('menuitem'+i+'.thediv');
          shutdiv.style.visibility='hidden';
        }
      }
    }
    // -->
    </script>
    <style type="text/css">
    <!--
    body {
    	background-color: #CCCCCC;
    }
    -->
    </style></head>
    <body onmousemove="closesubnav(event);">
    <div id="masthead">
      <h1 id="siteName">&nbsp;</h1>
      <div id="globalNav"> <img alt="" src="gblnav_left.gif" height="32" width="4" id="gnl" /> <img alt="" src="glbnav_right.gif" height="32" width="4" id="gnr" />
        <div id="globalLink"> <a href="#" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">global link</a><a href="#" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">global link</a><a href="#" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">global link</a><a href="#" id="gl4" class="glink" onmouseover="ehandler(event,menuitem4);">global link</a><a href="#" id="gl5" class="glink" onmouseover="ehandler(event,menuitem5);">global link</a><a href="#" id="gl6" class="glink" onmouseover="ehandler(event,menuitem6);">global link</a><a href="#" id="gl7" class="glink" onmouseover="ehandler(event,menuitem7);">global link</a> </div>
        <!--end globalLinks-->
      </div>
      <!-- end globalNav -->
      <div id="subglobal1" class="subglobalNav"> <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> </div>
      <div id="subglobal2" class="subglobalNav"> <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> </div>
      <div id="subglobal3" class="subglobalNav"> <a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> </div>
      <div id="subglobal4" class="subglobalNav"> <a href="#">subglobal4 link</a> | <a href="#">subglobal4 link</a> | <a href="#">subglobal4 link</a> | <a href="#">subglobal4 link</a> | <a href="#">subglobal4 link</a> | <a href="#">subglobal4 link</a> | <a href="#">subglobal4 link</a> </div>
      <div id="subglobal5" class="subglobalNav"> <a href="#">subglobal5 link</a> | <a href="#">subglobal5 link</a> | <a href="#">subglobal5 link</a> | <a href="#">subglobal5 link</a> | <a href="#">subglobal5 link</a> | <a href="#">subglobal5 link</a> | <a href="#">subglobal5 link</a> </div>
      <div id="subglobal6" class="subglobalNav"> <a href="#">subglobal6 link</a> | <a href="#">subglobal6 link</a> | <a href="#">subglobal6 link</a> | <a href="#">subglobal6 link</a> | <a href="#">subglobal6 link</a> | <a href="#">subglobal6 link</a> | <a href="#">subglobal6 link</a> </div>
      <div id="subglobal7" class="subglobalNav"> <a href="#">subglobal7 link</a> | <a href="#">subglobal7 link</a> | <a href="#">subglobal7 link</a> | <a href="#">subglobal7 link</a> | <a href="#">subglobal7 link</a> | <a href="#">subglobal7 link</a> | <a href="#">subglobal7 link</a> </div>
      <div id="subglobal8" class="subglobalNav"> <a href="#">subglobal8 link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8 link</a> </div>
    </div>
    <!-- end masthead --><!--end pagecell1-->
    <br />
    <script type="text/javascript">
        <!--
          var menuitem1 = new menu(7,1,"hidden");
    			var menuitem2 = new menu(7,2,"hidden");
    			var menuitem3 = new menu(7,3,"hidden");
    			var menuitem4 = new menu(7,4,"hidden");
    			var menuitem5 = new menu(7,5,"hidden");
    			var menuitem6 = new menu(7,6,"hidden");
    			var menuitem7 = new menu(7,7,"hidden");
        // -->
        </script>
    </body>
    </html>
    the CSS:

    Code:
    #masthead{
    	position: absolute;
    	top: 0px;
    	left: 2%;
    	right: 2%;
    	width:95.6%;
    	
    }
    
    #siteName{
    	margin: 0px;
    	padding: 16px 0px 8px 0px;
    	color: #ffffff;
    	font-weight: normal;
    }
    
    
    #globalNav{
    position: relative;
    width: 100%;
    min-width: 640px;
    height: 32px;
    color: #cccccc;
    padding: 0px;
    margin: 0px;
    background-image: url(glbnav_background.gif);
    }
    
    #globalNav img{
    	margin-bottom: -4px;
     
    }
    
    #gnl {
    	position: absolute;
    	top: 0px;
    	left:0px;
    }
    
    #gnr {
    	position: absolute;
    	top: 0px;
    	right:0px;
    }
    
    #globalLink{
    	position: absolute;
    	top: 6px;
    	height: 22px;
    	min-width: 640px;
    	padding: 0px;
    	margin: 0px;
    	left: 10px;
    	z-index: 100;
    }
    
    
    a.glink, a.glink:visited{
      	font-size: small;
      	color: #000000;
    	font-weight: bold;
    	margin: 0px;
    	padding: 2px 5px 4px 5px;
    	border-right: 1px solid #8FB8BC;
    }
    
    a.glink:hover{
      	background-image: url(glblnav_selected.gif);
    	text-decoration: none;
    }
    
    /************ subglobalNav styles **************/
    
    .subglobalNav{
    	position: absolute;
    	top: 84px;
    	left: 0px;
    	/*width: 100%;*/
    	min-width: 640px;
    	height: 20px;
    	padding: 0px 0px 0px 10px;
    	visibility: hidden;
    	color: #ffffff;
    }
    
    .subglobalNav a:link, .subglobalNav a:visited {
    	font-size: 80%;
    	color: #ffffff;
    }
    
    .subglobalNav a:hover{
    	color: #cccccc;
    }
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    27
    Rep Power
    0
    Try this,
    add a .container{width:you want; margin:0 auto;} then navigation bar in center.
    Hope this helps.

IMN logo majestic logo threadwatch logo seochat tools logo