The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.
|
 |
|
Dev Shed Forums
> Web Design
> CSS Help
|
How to centre a horizontal menu? Nothing seems to be working!
Discuss How to centre a horizontal menu? Nothing seems to be working! in the CSS Help forum on Dev Shed. How to centre a horizontal menu? Nothing seems to be working! Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.
|
|
 |
|
|
|
|

Dev Shed Forums Sponsor:
|
|
|

December 16th, 2012, 11:59 AM
|
|
Registered User
|
|
Join Date: Dec 2012
Posts: 3
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
|

December 17th, 2012, 12:08 AM
|
 |
For POny!
|
|
Join Date: Apr 2012
Location: Amsterdam
|
|
Do you got an online sample of this?
The trick probably is to give the menu container a fix width and center it with:
|

December 17th, 2012, 02:44 PM
|
|
Registered User
|
|
Join Date: Dec 2012
Posts: 3
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: |
the sample is: www. raulaltosaar.com
How would I go about doing this?
|

December 17th, 2012, 06:05 PM
|
 |
For POny!
|
|
Join Date: Apr 2012
Location: Amsterdam
|
|
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.
|

December 18th, 2012, 04:38 PM
|
|
Registered User
|
|
Join Date: Dec 2012
Posts: 3
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 
|
Developer Shed Advertisers and Affiliates
| Thread Tools |
Search this Thread |
|
|
|
| Display Modes |
Rate This Thread |
Linear Mode
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
|