CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me

The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.

Go Back   Dev Shed ForumsWeb DesignCSS Help

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old December 16th, 2012, 11:59 AM
bernard666 bernard666 is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Dec 2012
Posts: 3 bernard666 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 7 m 40 sec
Reputation 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 06:58 PM. Reason: added [code] tags

Reply With Quote
  #2  
Old December 17th, 2012, 12:08 AM
aeternus's Avatar
aeternus aeternus is offline
For POny!
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Apr 2012
Location: Amsterdam
Posts: 416 aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level) 
Time spent in forums: 5 Days 4 h 56 m 43 sec
Reputation Power: 114
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;
__________________
PHP Tutorial

Reply With Quote
  #3  
Old December 17th, 2012, 02:44 PM
bernard666 bernard666 is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Dec 2012
Posts: 3 bernard666 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 7 m 40 sec
Reputation Power: 0
Quote:
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?

Reply With Quote
  #4  
Old December 17th, 2012, 06:05 PM
aeternus's Avatar
aeternus aeternus is offline
For POny!
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Apr 2012
Location: Amsterdam
Posts: 416 aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level) 
Time spent in forums: 5 Days 4 h 56 m 43 sec
Reputation Power: 114
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.

Reply With Quote
  #5  
Old December 18th, 2012, 04:38 PM
bernard666 bernard666 is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Dec 2012
Posts: 3 bernard666 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 7 m 40 sec
Reputation Power: 0
Quote:
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

Reply With Quote
Reply

Viewing: Dev Shed ForumsWeb DesignCSS Help > How to centre a horizontal menu? Nothing seems to be working!

Developer Shed Advertisers and Affiliates



Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.

© 2003-2013 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap