How to center this menu?

Shaye87 · 12 May 2009 at 15:20

I have placed an HTML menu on top of my phpbb3 forums.
Everything is OK except the fact that it won't center, and always stay at the left of the page.
Screenshot:
http://img413.imageshack.us/img413/945/notworking.jpg
I have tried finding what is causing it with no luck so far.
anyone willing to try and see where the problem is?

CSS: it is most likely something with the #sitenav part, as this is the CSS that the html menu uses.

Code:

* {
	/* Reset browsers default margin, padding and font sizes */
	margin: 0;
	padding: 0;
}

.right { float: right; }

body {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #4B4B4B;
	background: #5B5B5B url("{T_THEME_PATH}/images/bg.jpg") top repeat-x;
	font-size: 10px;
}

#logo {
	display: block;
	width: 100%;
}

#topnav {
	height: 39px;
	padding-top: 4px;
}

    #wrap {  
       padding: 0 20px;  
       min-width: 650px;  
       width: 970px;  
       margin: 0 auto;  
    }  


#wrapcentre {
	padding: 6px;
}

#wrapfooter {
	padding: 6px;
	text-align: center;
	clear: both;
}

#findbar {
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
}

.forumrules {
	background-color: #F9CC79;
	border-width: 1px;
	border-style: solid;
	border-color: #BB9860;
	padding: 4px;
	font-weight: normal;
	font-size: 1.1em;
	font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

.forumrules h3 {
	color: red;
}

.clear { clear: both; }

/* Navigation
 --------------------- */


ul.sitenav { margin: 0 }

/* Main sitenavigation */
#sitenav {
    height: 38px;
    width: 750px;
    position: absolute;
    top: 10px; left: 0;
}

#sitenav, #sitenav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 1;
    z-index: 100;
}

#sitenav a {
    color: #e7e7e7;
    font-size: 14px;
    font-weight: bold;
    display: block;
    text-decoration: none;
    padding: 9px 15px;
    text-transform: uppercase;
}

#sitenav a:hover {
    color: #fff;
    background: url(http://www.killing-floor.co.uk/wp-content/themes/irresistible/images/bg-nav.png);
    -moz-border-radius: 6px;
    -khtml-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

#sitenav li {
    float: left;
}

/* Style drop down list */

#sitenav li ul {
    position: absolute;
    width: 200px;
    left: -999em;
}

#sitenav li:hover ul, #sitenav li.sfhover ul {
    left: auto;
}

#sitenav li ul li a {
    background: url(http://www.killing-floor.co.uk/wp-content/themes/irresistible/images/bg-nav.png);
    line-height: 18px;
    font-size: 11px;
    color: #fff;
    width: 150px;
    -moz-border-radius: 6px;
    -khtml-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;   
}

#sitenav li ul li a:hover {
    background: #FFF;
    color:#222;
}

#sitenav li ul li a {
}

#sitenav li ul ul {
    margin: -35px 0 0 180px;
}

#sitenav li:hover ul ul, #sitenav li.sfhover ul ul {
    left: -999em;
}

#sitenav li:hover ul, #sitenav li li:hover ul, #sitenav li.sfhover ul, #sitenav li li.sfhover ul {
    left: auto;
}



#navcontainer {
	width: 100%;
	padding-bottom: 1px;
	background: url("{T_THEME_PATH}/images/nav.gif") top repeat-x;
}

#navcontainer ul { padding: 0; }
#navcontainer ul li { display: inline; }

#navcontainer ul {
	margin: 0;
	height: 42px;
	padding: 0 10px 0 10px;
	font-size: 1.1em;
}

#navcontainer ul li a {
	padding: 12px 10px 0 10px;
	height: 30px;
	color: #53473F;
	text-decoration: none;
	float: left;
}

#navlist li a:hover, #navlist li a:active {
	text-decoration: none;
	text-align: left;
	background: url("{T_THEME_PATH}/images/nav_hover.gif") top repeat-x;
}

/* Search box
 --------------------- */
#search-box {
	color: #FFFFFF;
	display: block;
	float: right;
	text-align: right;
	white-space: nowrap; /* For Opera */
	border: 0;
}

#search-box input {
	border: 0;
	width: 139px;
	height: 17px;
	padding: 3px 5px 0 5px;
	background: url("{T_THEME_PATH}/images/search.gif") top no-repeat;
	color: #929292;
	border: 0;
}

#search-box fieldset {
	border: 0;
	background: none;
}

#search-box input:hover, #search-box input:focus {
	color: #BBBBBB;
	background: url("{T_THEME_PATH}/images/search.gif") no-repeat;
	background-position: 0 -20px;
}

/* Round cornered boxes and backgrounds
 --------------------------------------------------------- */

#header_bg {
	height: 102px;
	background: url("{T_THEME_PATH}/images/header_right.gif") top right no-repeat;
}

#header_container { 
	background: url("{T_THEME_PATH}/images/header_bg.gif") top repeat-x;
	display: block;
	width: 100%;
}

.b { 
	background: #F3F3EE url("{T_THEME_PATH}/images/footer_bg.gif") bottom repeat-x;
}

.bl { 
	background: url("{T_THEME_PATH}/images/footer_left.gif") bottom left no-repeat;
}

.br { 
	background: url("{T_THEME_PATH}/images/footer_right.gif") bottom right no-repeat;
	padding-bottom: 55px;
}

.navbar {
	background-color: #D7D7C2;
	padding: 10px 20px 10px 5px;
	margin-bottom: 15px;
	display: block;
}

ul.linklist li {
	list-style-type: none;
}

/*  Text
 --------------------- */
h1 {
	color: black;
	font-family: "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
	font-weight: bold;
	font-size: 1.8em;
	text-decoration: none;
}

h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1.5em;
	text-decoration: none;
	line-height: 120%;
}

h3 {
	font-size: 1.3em;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 120%;
}

h4 {
	margin: 0;
	font-size: 1.1em;
	font-weight: bold;
}

p {
	font-size: 1.1em;
}

p.moderators {
	margin: 0;
	float: left;
	color: black;
	font-weight: bold;
}

.rtl p.moderators {
	float: right;
}

p.linkmcp {
	margin: 0;
	float: right;
	white-space: nowrap;
}

.rtl p.linkmcp {
	float: left;
}

p.breadcrumbs {
	margin: 0;
	float: left;
	color: black;
	font-weight: bold;
	white-space: normal;
	font-size: 1em;
}

.rtl p.breadcrumbs {
	float: right;
}

p.datetime {
	margin: 0;
	float: right;
	white-space: nowrap;
	font-size: 1em;
}

.rtl p.datetime {
	float: left;
}

p.searchbar {
	white-space: nowrap;
} 

p.searchbarreg {
	margin: 0;
	float: right;
	white-space: nowrap;
}

.rtl p.searchbarreg {
	float: left;
}

p.forumdesc {
	padding-bottom: 4px;
}

p.topicauthor {
	margin: 1px 0;
}

p.topicdetails {
	margin: 1px 0;
}

.postreported, .postreported a:visited, .postreported a:hover, .postreported a:link, .postreported a:active {
	margin: 1px 0;
	color: red;
	font-weight:bold;
}

.postapprove, .postapprove a:visited, .postapprove a:hover, .postapprove a:link, .postapprove a:active {
	color: green;
	font-weight:bold;
}

.postapprove img, .postreported img {
	vertical-align: bottom;
}

.postauthor {
	color: #000000;
}

.postdetails {
	color: #000000;
}

.postbody {
	font-size: 1.3em;
	line-height: 1.4em;
	font-family: "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
}

.postbody li, ol, ul {
	margin: 0 0 0 1.5em;
}

.rtl .postbody li, .rtl ol, .rtl ul {
	margin: 0 1.5em 0 0;
}

.posthilit {
	background-color: yellow;
}

.nav {
	margin: 0;
	color: black;
	font-weight: bold;
}

.pagination {
	padding: 4px;
	color: black;
	font-size: 1em;
	font-weight: bold;
}

.cattitle {

}

.gen {
	margin: 1px 1px;
	font-size: 1.2em;
}

.genmed {
	margin: 1px 1px;
	font-size: 1.1em;
}

.gensmall {
	margin: 1px 1px;
	font-size: 1em;
}

.copyright {
	color: #444;
	font-weight: normal;
	font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

.titles {
	font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 1.3em;
	text-decoration: none;
}

.error {
	color: red;
}


/* Tables
 ------------ */
th {
	color: #511314;
	font-size: 1.1em;
	font-weight: bold;
	background: url('{T_THEME_PATH}/images/cellpic3.gif') top repeat-x;
	white-space: nowrap;
	padding: 0 5px;
	height: 25px;
}

td {
	padding: 2px;
}
td.profile {
	padding: 4px;
}

.tablebg {
	background-color: #B8B89B;
}

.catdiv {
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	background: white url('{T_THEME_PATH}/images/cellpic2.jpg') repeat-y scroll top left;
}
.rtl .catdiv {
	background: white url('{T_THEME_PATH}/images/cellpic2_rtl.jpg') repeat-y scroll top right;
}

.cat {
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	background: #E8E8E3 url('{T_THEME_PATH}/images/cellpic1.gif') repeat-x;
	text-indent: 4px;
}

.row1 {
	background: #DEDECA url('{T_THEME_PATH}/images/row1.gif') repeat-x;
	padding: 4px;
	border-top: 1px #EEEEE2 solid;
	border-left: 1px #F4F4EB solid;
}

.row2 {
	background: #D8D8C2 url('{T_THEME_PATH}/images/row2.gif') repeat-x;
	padding: 4px;
	border-top: 1px #EEEEE2 solid;
	border-left: 1px #F4F4EB solid;
}

.row3 {
	background: #DEDECA url('{T_THEME_PATH}/images/row1.gif') repeat-x;
	padding: 4px;
	border-top: 1px #EEEEE2 solid;
	border-left: 1px #F4F4EB solid;
}

.spacer {
	background: #E0E0E0 url('{T_THEME_PATH}/images/space.gif') repeat-x;
}

hr {
	height: 1px;
	border-width: 0;
	background-color: #D1D7DC;
	color: #D1D7DC;
}

.legend {
	text-align:center;
	margin: 0 auto;
}

/* Links
 ------------ */
a:link	{ color: #5B3818; text-decoration: none; }
a:visited	{ color: #5B3818; text-decoration: none; }
a:hover	{ color: #8C651A; text-decoration: underline; }
a:active	{ color: #8C651A; text-decoration: none; }

a.forumlink {
	font-weight: bold;
	font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
	font-size: 1.2em;
}

a.topictitle, a.topictitle:visited {
	margin: 1px 0;
	font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 1.2em;
}

th a,
th a:visited {
	color: #511314 !important;
	text-decoration: none;
}

th a:hover {
	text-decoration: none;
}


/* Form Elements
 ------------ */
form {
	margin: 0;
	padding: 0;
	border: 0;
}

input {
	color: #3D3D3F;
	font-family: "Lucida Grande", Verdana, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: normal;
	padding: 2px;
	border: 1px solid #B2B296;
	background-color: #F2F2F2;
	vertical-align: middle;
}

input:hover, input:focus, select:hover, select:focus {
	border: 1px solid #78786E;
	background-color: #FFF;
}

textarea {
	background: #EEEEEE url("{T_THEME_PATH}/images/textarea.gif") top repeat-x;
	color: #333333;
	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	font-size: 1.3em; 
	line-height: 1.4em;
	font-weight: normal;
	border: 1px solid #B2B296;
	padding: 2px;
	vertical-align: middle;
}

textarea:hover, textarea:focus {
	border: 1px solid #78786E;
}

select {
	color: #333333;
	background-color: #FAFAFA;
	font-family: "Lucida Grande", Verdana, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: normal;
	border: 1px solid #B2B296;
	padding: 1px;
	vertical-align: middle;
}

option {
	padding: 0 1em 0 0;
}

option.disabled-option {
	color: graytext;
}

.rtl option {
	padding: 0 0 0 1em;
}

input.radio {
	border: none;
	background-color: transparent;
	vertical-align: middle;
}

.post {
	background-color: white;
	border-style: solid;
	border-width: 1px;
}

.btnbbcode {
	color: #000000;
	font-weight: normal;
	font-size: 1.1em;
	font-family: "Lucida Grande", Verdana, Helvetica, sans-serif;
}

.btnmain {
	font-weight: bold;
	cursor: pointer;
	padding: 1px 5px;
	font-size: 1.1em;
}

.btnlite {
	font-weight: normal;
	cursor: pointer;
	padding: 1px 5px;
	font-size: 1.1em;
}

.btnfile {
	font-weight: normal;
	padding: 1px 5px;
	font-size: 1.1em;
}

.btnmain, .btnlite, .btnfile {
	background: url("{T_THEME_PATH}/images/submit.gif") top repeat-x;
	color: #575757;
}

.btnmain:hover, .btnmain:focus, .btnlite:hover, .btnlite:focus, .btnfile:hover, .btnfile:focus {
	background-position: 0 -40px;
	border: 1px #93937B solid;
	color: #363636;
}

.btnbbcode {
	background: url("{T_THEME_PATH}/images/bbcode.gif") top repeat-x;
	color: #575757;
}

.btnbbcode:hover, .btnbbcode:focus {
	background-position: 0 -40px;
	border: 1px #9B8A72 solid;
	color: #363636;
}

.helpline, .helpline:hover, .helpline:focus  {
	background: transparent;
	border-style: none;
}


/* BBCode
 ------------ */
.quotetitle, .attachtitle {
	margin: 10px 5px 0 5px;
	padding: 4px;
	border-width: 1px 1px 0 1px;
	border-style: solid;
	border-color: #ABAB9C;
	color: #333333;
	font-size: 0.85em;
	font-weight: bold;
	background: #EEEEEE url("{T_THEME_PATH}/images/cellpic1.gif") top repeat-x;
}

.quotetitle .quotetitle {
	font-size: 1em;
}

.quotecontent, .attachcontent {
	margin: 0 5px 10px 5px;
	padding: 5px;
	border-color: #A9B8C2;
	border-width: 0 1px 1px 1px;
	border-style: solid;
	font-weight: normal;
	font-size: 1em;
	line-height: 1.4em;
	font-family: "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
	background: #EEEEEE url("{T_THEME_PATH}/images/textarea.gif") top repeat-x;
	color: #4B5C77;
}

.attachcontent {
	font-size: 0.85em;
}

.codetitle {
	margin: 10px 5px 0 5px;
	padding: 2px 4px;
	border-width: 1px 1px 0 1px;
	border-style: solid;
	color: #333333;
	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	font-size: 0.8em;
	border-color: #ABAB9C;
	background: #EEEEEE url("{T_THEME_PATH}/images/cellpic1.gif") top repeat-x;
}

.codecontent {
	direction: ltr;
	margin: 0 5px 10px 5px;
	padding: 5px;
	border-color: #A9B8C2;
	border-width: 0 1px 1px 1px;
	border-style: solid;
	font-weight: normal;
	color: #006600;
	font-size: 0.85em;
	font-family: Monaco, 'Courier New', monospace;
	background: #EEEEEE url("{T_THEME_PATH}/images/textarea.gif") top repeat-x;
}

.syntaxbg {
	color: #FFFFFF;
}

.syntaxcomment {
	color: #FF8000;
}

.syntaxdefault {
	color: #0000BB;
}

.syntaxhtml {
	color: #000000;
}

.syntaxkeyword {
	color: #007700;
}

.syntaxstring {
	color: #DD0000;
}


/* Private messages
 ------------------ */
.pm_marked_colour {
	background-color: #000000;
}

.pm_replied_colour {
	background-color: #A9B8C2;
}

.pm_friend_colour {
	background-color: #007700;
}

.pm_foe_colour {
	background-color: #DD0000;
}

/* Buttons
 --------------- */

a.fontsize {
	display: block;
	overflow: hidden;
	height: 18px;
	text-indent: -5000px;
	text-align: left;
	background-repeat: no-repeat;
	background-image: url("{T_THEME_PATH}/images/icon_fontsize.gif");
	background-position: 0 -1px;
	width: 29px;
	position: absolute;
	top: 6px;
	left: 0px;
}

a.fontsize:hover {
	background-position: 0 -20px;
	text-decoration: none;
}

.reply-icon	{ 
	float: left; display: block; width: 96px; height: 25px;
	background: url("{IMG_BUTTON_TOPIC_REPLY_SRC}") 0 0 no-repeat;
	margin-right: 10px;
}
.post-icon	{ 
	float: left; display: block; width: 96px; height: 25px;
	background: url("{IMG_BUTTON_TOPIC_NEW_SRC}") 0 0 no-repeat;
	margin-right: 10px;
}
.locked-icon { 
	float: left; display: block; width: 96px; height: 25px;
	background: url("{IMG_BUTTON_TOPIC_LOCKED_SRC}") 0 0 no-repeat;
	margin-right: 10px;
}
.newpm-icon { 
	float: left; display: block; width: 96px; height: 25px;
	background: url("{IMG_BUTTON_PM_NEW_SRC}") 0 0 no-repeat;
	margin-right: 10px;
}

.reply-icon span, .post-icon span, .locked-icon span, .newpm-icon span {
	display: none; text-indent: -5000px;
}

.reply-icon:hover, .post-icon:hover, .locked-icon:hover, .newpm-icon:hover {
	background-position: 0 -25px;
}

/* Misc
 ------------ */
img {
	border: none;
}

.sep {
	color: black;
	background-color: #FFA34F;
}

table.colortable td {
	padding: 0;
}

pre {
	font-size: 1.1em;
	font-family: Monaco, 'Courier New', monospace;
}

.nowrap {
	white-space: nowrap;
}

.username-coloured {
	font-weight: bold;
}

.simple {
    background-color: #FFFFFF;
}

Dj_Jestar · 12 May 2009 at 15:26

It'll need to be contained in a fixed-width block (div or some such) before you can start centering properly (with margins)

can you provide a link rather than a pic? that way people like me can firebug it rather than guess or write our own markup.

Shaye87 · 12 May 2009 at 15:43

It's still locally so can't link.
Someone on IRC helped me out.

had to change:
top: 10px; left: 0;

with:
left: 50% margin-left: - 485px

Thanks though.

tsinc80697 · 12 May 2009 at 16:11

Why are you positioning it absolutely?

Really are some strange coding methods from members on these forums lol

Deleted User 234324 · 12 May 2009 at 17:33

wrap it in a container with the following css

#sitenav {
height: 38px;
margin: 0 auto;
width: 750px;
}

.menu {
width: 100%;
}

Adjust container width to what ever your site is.

Tiger33 · 13 May 2009 at 14:26

tsinc80697 said:
Why are you positioning it absolutely?

Really are some strange coding methods from members on these forums lol

positioning absolutely isnt a issue but trying to center absolutetly?

strange

MadMossy's tip will do the job nicely

may be worth adding some important tags in to make sure it works just in case u get some other css overriding

tsinc80697 · 13 May 2009 at 16:43

Tiger33 said:
positioning absolutely isnt a issue but trying to center absolutetly?

Exactly what I meant, its usually the last port of call or if something has to be overlaid and in this case its neither!

Just seen a growing number of strange ways to code things over the past few months on forums, wonder where everyone is learning their completely different techniques from!

Deleted User 234324 · 13 May 2009 at 17:59

tsinc80697 said:
Exactly what I meant, its usually the last port of call or if something has to be overlaid and in this case its neither!

Just seen a growing number of strange ways to code things over the past few months on forums, wonder where everyone is learning their completely different techniques from!

A majority of what ive learnt is through trial and error, so more than likely not the most efficient way of doing something.