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

    Join Date
    Dec 2012
    Posts
    3
    Rep Power
    0

    How to centre a horizontal menu? Nothing seems to be working!


    I am using the indexhibit CMS. I would like to center a horizontal menu. How would I do this? The style.css code is below:
    Code:
    /* ---------- ONLY EDIT BELOW THIS LINE ---------- */
    body {
    	font-size: 11.5px;
    	font-family: Helvetica, sans-serif;
    	background: #fff;
    	color: #000;
    	line-height: 10em;
    }
    
    /* the general link scheme */
    /* 'index' links are governed further down the file - #index */
    a:link { text-decoration: none; color: #000; }
    a:active { text-decoration: none; color: #00cc00; }
    a:visited { text-decoration: none; color: #999; }
    a:hover { text-decoration: underline; }
    a img { border: none; }
    
    .clL { clear: left; }
    
    /* this is to prevent some background colors on links in exhibits */
    /* maybe this is no longer necessary */
    #img-container span.backgrounded a,
    #img-container a.thickbox, 
    #img-container a.thumb-img, 
    #img-container #d-col1 a { background: transparent; }
    
    #index {
    width: 100%;
    	z-index: 2;
    	position: fixed;
    	top: 0;
    	left: 0;
            center: 0;
    	background: #fff;
    	overflow: visible;
    	height: 90px; /* adjust this if needed */  
    }
    
    /* PRE NAV TEXT - Name Of The Site / Your Logo - Can be accessed in the Exhibit Settings */
    #index .top-section
    {
    	text-align: right;
    	position: fixed;
    	z-index: 1;
    	right: 40px;
    	top: 25px;
    	width: 
    }
    /* END PRE NAV STYLING */
    /* STYLING THE INDEX - via #index */
    /* all menu parts */
    #index nav {  }
    #index ul {
        display: inline-block;
        float: left;
        list-style-type: none;
        margin: 0 auto;
        overflow: visible;
        width: auto;
        text-align: center;
      
    }
    
    #index ul.section {
        margin: 0px 10px 2px 0;
    }
    /*#index ul.section ul { margin-bottom: 9px; }
    #index ul.section ul ul.subsection { margin-bottom: 0px; } */
    
    /* styles for the section titles */
    #index ul.section span.section_title, 
    #index ul.section span.section_title a 
    { text-decoration: none; cursor: pointer; font-weight: bold; text-align: left; width: auto; }
    #index ul.section span.section_title:hover, #index ul.section span.section_title a:hover 
    { text-decoration: underline; }
    
    /* active section titles */
    #index ul.active_section { }
    
    /* sub-section titles */
    #index ul.section span.subsection_title, 
    #index ul.section span.subsection_title a 
    { line-height: 1.3em; text-decoration: none; cursor: pointer; width: auto; text-align: left; }
    #index ul.section span.subsection_title, #index ul.subsection span.subsection_title a 
    { /* font-weight: bold; */ }
    #index ul.section span.subsection_title:hover, #index ul.section span.subsection_title a:hover 
    { text-decoration: underline; }
    /* indent if using chronological or tag groups */
    ul.subsection { /* padding-left: 5px; */ }
    
    /* exhibit titles */
    /* NEED TO REVIEW ALL OF THESE STILL */
    #index ul.section li.exhibit_title { width: auto; text-align: center; margin: 0px 0px 0px 0px; }
    #index ul.section li.exhibit_title a:link { text-decoration: none; }
    #index ul.section li.exhibit_title a:hover { text-decoration: underline; }
    #index ul.section li.exhibit_title a:active {  }
    #index ul.section li.exhibit_title a:visited {  }
    #index ul.sectino li.section-link {  }
    #index ul.section li#ndxz-searcher {  }
    
    /* for 'all tags' display */
    #index ul.all_tags { list-style-type: none; margin-bottom: 9px; }
    #index ul.all_tags li { display: inline; margin-right: 3px; }
    #index ul.all_tags li a {  }
    
    /* need to review this still */
    /* active parts */
    li.active a:link, li a.active, 
    li.active a:hover, li a.active, 
    li.active a:active, li a.active, 
    li.active a:visited, li a.active, 
    li span.active, 
    #index ul.section li.active a:link, 
    #index ul.section li.active a:hover, 
    #index ul.section li.active a:active, 
    #index ul.section li.active a:visited
    { width: auto; text-align: left; }
    #index p { width: auto; text-align: left; }
    
    /* additional #index options */
    #index ul li .password a { /* background: url(../img/locked.gif) right center no-repeat; */ padding-right: 18px; }
    /* "new" */
    #index ul li sup { color: #0c0; font-weight: bold; text-transform: uppercase; font-size: 8px; vertical-align: top; }
    /* END INDEX STYLING */
    
    #hmplusnet-credit
    {
    	position: fixed;
    	bottom: 0;
    	left: 0;
    	padding: 0 0 14px 40px;
    	width: 200px;
    }
    
    #hmplusnet-credit a
    {
    	background: #fff;
    }
    
    /* INDEXHIBIT CREDIT : Always good to credit the CMS that gives you these possibilities */
    #copy.bottom-section { /* sets the properties for the "Built with" part  */
    z-index : 100;
    right : 0;
    bottom : 0;
    margin : 0 0 0 0;
    padding : 0px 40px 14px 0px;
    text-align : right; }
    #copy  {
      /* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
      position: absolute; }
    body > #copy  {
      /* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb 4.5+, iCab, ICEbrowser */
      position: fixed; }
    #copy.bottom-section  {
      /* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
      position: absolute; }
    body > #copy.bottom-section  {
      /* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb 4.5+, iCab, ICEbrowser */
      position: fixed; }
    /* END INDEXHIBIT CREDIT STYLING */
    
    #exhibit { 
    	margin-top: 115px;
    	margin-bottom: 65px;
    }
    
    /* links styles for the #exhibit region */
    #exhibit a:link {  } 
    #exhibit a:hover {  } 
    #exhibit a:active {  } 
    #exhibit a:visted {  } 
    
    /* this is where you adjust your paddings for #index and #container */
    .container { padding: 27px 9px 25px 27px; }
    
    /* if the needed is to have different paddings in each region */
    #index .container {
        padding: 25px 0 0 20px;
    }
    #exhibit .container {  padding: 30px 0px 0px 40px;  }
    
    #index .top { height: 36px; float: left; }
    #exhibit .top { display: none; }
    #show .top { height: 36px; }
    
    
    /* headings - if you use them - you should be */
    h1 { font-size: 12px; margin-bottom: 9px; font-weight: bold; }
    
    h2 {
    	font-size: 160px;
    	line-height: 120%;
    	letter-spacing: -16px;
    	font-weight: bold;
    	padding: 0px 0px 10px 0px;
    }
    
    h3 {
    	font-size: 53px;
    	line-height: 100%;
    	letter-spacing: -5px;
    	font-weight: bold;
    	padding: 0px 0px 10px 0px;
    }
    
    h4 {
    	font-size: 27px;
    	line-height: 100%;
    	letter-spacing: -2px;
    	font-weight: bold;
    	padding: 0px 0px 10px 0px;
    }
    
    /* paragraphs - for the most part */
    #exhibit p, #ndxz-media p { width: 600px;
    	margin: 0px 0px 5px 0px;
    	position: static;
    	line-height: 1.3em; }
    
    p, object, .flash-apl, .flash-flv { margin: 0 0 9px 0; width: 600px; }
    object { display: block; }
    .flash-flv { display: inline; }
    
    .copyrighted { margin-top: 18px; padding-top: 220px; }
    
    /* generic #img-container - but remember that exhibtion formats can override these */
    #img-container { margin: 0; padding: 0; }
    #img-container p { width: 600px; margin: 0; padding: 0 0 12px 0; }
    
    /* some generic oft used rules */
    .highlight { background: #ccff00; color: #000; }
    small { font-size: 9px; }
    .once { clear: left; }
    Last edited by Kravvitz; December 16th, 2012 at 07:58 PM. Reason: added [code] tags
  2. #2
  3. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Do you got an online sample of this?
    The trick probably is to give the menu container a fix width and center it with:
    Code:
    margin: 0 auto;
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    3
    Rep Power
    0
    Originally Posted by aeternus
    Do you got an online sample of this?
    The trick probably is to give the menu container a fix width and center it with:
    Code:
    margin: 0 auto;
    the sample is: www. raulaltosaar.com

    How would I go about doing this?
  6. #4
  7. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Did you create the mark up?

    A bit of a dirty solution (which wont work for IE7 and lower) is the following.

    Code:
    #container{display:table; margin: 0 auto}
    To be honest though I would completely redo the mark-up for the menu. It extremely inefficient. There are more elegant solutions to fix this.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    3
    Rep Power
    0
    Originally Posted by aeternus
    Did you create the mark up?

    A bit of a dirty solution (which wont work for IE7 and lower) is the following.

    Code:
    #container{display:table; margin: 0 auto}
    To be honest though I would completely redo the mark-up for the menu. It extremely inefficient. There are more elegant solutions to fix this.
    Thank you so much! That worked

IMN logo majestic logo threadwatch logo seochat tools logo