MyBB Community Forums

I'm having trouble with my forum and making it W3C valid . I need to center both the banner and the links below (blog, irc, twitter, youtube, members, calendar etc.) This is how I've currently done it, but i know it's incorrect. What is the correct/valid way to do it? Could you please post back showing the full code and how it should look.

this is the header template.

<div id="container">
		<a name="top" id="top"></a>
		<div id="header">
			<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>

			<div class="menu"> 
				<ul>
<div align="center">
                                              <li><a href="" target="_blank"><img src="" alt="" title="Donate" />Donate</a></li>
                                              <li><a href="" target="_blank"><img src="" alt="" title="Blogspot" />Blog</a></li>
                                              <li><a href="" target="_blank"><img src="" alt="" title="YouTube" />YouTube</a></li>
                                              <li><a href="" target="_blank"><img src="" alt="" title="Chat" />#IRC</a></li>
                                              <li><a href=""  target="_blank"><img src="" alt="" title="Google" />Google</a></li>
                                              <li><a href=""  target="_blank"><img src="" alt="" title="Facebook" />Facebook</a></li>
                                              <li><a href="" target="_blank"><img src="" alt="" title="Twitter" />Twitter</a></li>              
                                              <li><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/search.png" alt="" title="" /><a href="$settings[bburl]/search.php">Search</a></li>
                                <li><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/memberlist.png" alt="" title="" /><a href="$settings[bburl]/memberlist.php">Members</a></li>
                                <li><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/calendar.png" alt="" title="" /><a href="$settings[bburl]/calendar.php">Calendar</a></li>
                                <li><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/help.png" alt="" title="" /><a href="$settings[bburl]/misc.php?action=help">Help</a></li>

                        
				</ul>
			</div>
			

<hr class="hidden" />
			<div id="panel">
				{$welcomeblock}
			</div>
		</div>
		<hr class="hidden" />
		<br class="clear" />
		<div id="content">
			{$pm_notice}
			{$bannedwarning}
			{$bbclosedwarning}
			{$unreadreports}
			<navigation>
			<br />

If i need to post another template or something let me know and i will.

The }} is probably in your headerinclude template.

The correct way to center stuff would be to put this in the CSS.

text-align: center;

this is my header include template.

<link rel="alternate" type="application/rss+xml" title="{$lang->latest_threads} (RSS 2.0)" href="{$mybb->settings['bburl']}/syndication.php" />
<link rel="alternate" type="application/atom+xml" title="{$lang->latest_threads} (Atom 1.0)" href="{$mybb->settings['bburl']}/syndication.php?type=atom1.0" />
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/prototype.js?ver=1400"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/general.js?ver=1400"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=1400"></script>
{$stylesheets}
<script type="text/javascript">
<!--
	var cookieDomain = "{$mybb->settings['cookiedomain']}";
	var cookiePath = "{$mybb->settings['cookiepath']}";
	var cookiePrefix = "{$mybb->settings['cookieprefix']}";
	var deleteevent_confirm = "{$lang->deleteevent_confirm}";
	var removeattach_confirm = "{$lang->removeattach_confirm}";
	var loading_text = '{$lang->ajax_loading}';
	var saving_changes = '{$lang->saving_changes}';
	var use_xmlhttprequest = "{$mybb->settings['use_xmlhttprequest']}";
	var my_post_key = "{$mybb->post_code}";
	var imagepath = "{$theme['imgdir']}";
// -->
</script>
{$newpmmsg}

advanced mode. this is my full style sheet, global.css


body {
	background: #000000 url(images/greygreenbb/w0rm.gif) repeat;
	text-align: center;
	line-height: 1.4;
	
	color: #000;
	font-family: Verdana, Arial, Sans-Serif;
	font-size: 13px;
}

a:link {
	color: #fff;
	text-decoration: none;
}

a:visited {
	color: #fff;
	text-decoration: none;
}

a:hover, a:active {
	color: #fff;
	text-decoration: underline;
}

#container {
	width: 1000px;
	background: #000000;
	border: 2px solid #0aa206;
	color: #fff;
	margin: auto auto;
	padding: 20px;
	text-align: left; /* IE 5 fix */
}

#content {
	/* FIX: Make internet explorer wrap correctly */
	width: auto !important;
}

.menu ul {
	color: #fff;
	font-weight: bold;
	text-align: right;
	padding: 4px;
}

.menu ul a:link {
	color: #fff;
	text-decoration: none;
}

.menu ul a:visited {
	color: #fff;
	text-decoration: none;
}

.menu ul a:hover, .menu ul a:active {
	color: #1bb207;
	text-decoration: none;
}

#panel {
	background: #3f3f3f;
	color: #fff;
	font-size: 11px;
	border: 1px solid #097b06;
	padding: 8px;
}

table {
	color: #fff;
	font-family: Verdana, Arial, Sans-Serif;
	font-size: 13px;
}

.tborder {
	background: #077304;
	width: 100%;
	margin: auto auto;
	border: 1px solid #077304;
}

.thead {
	background: #077304 url(images/greygreenbb/thead_bg.gif) top left repeat-x;
	color: #ffffff;
}

.thead a:link {
	color: #ffffff;
	text-decoration: none;
}

.thead a:visited {
	color: #ffffff;
	text-decoration: none;
}

.thead a:hover, .thead a:active {
	color: #ffffff;
	text-decoration: underline;
}

.tcat {
	background: #000000;
	color: #fff;
	font-size: 12px;
}

.tcat a:link {
	color: #fff;
}

.tcat a:visited {
	color: #fff;
}

.tcat a:hover, .tcat a:active {
	color: #fff;
}

.trow1 {
	background: #3f3f3f;
}

.trow2 {
	background: #3f3f3f;
}

.trow_shaded {
	background: #ffdde0;
}

.trow_selected td {
	background: #7e7e7e;
}

.trow_sep {
	background: #e5e5e5;
	color: #000;
	font-size: 12px;
	font-weight: bold;
}

.tfoot {
	background: #0aa206 url(images/greygreenbb/thead_bg.gif) top left repeat-x;
	color: #ffffff;
}

.tfoot a:link {
	color: #ffffff;
	text-decoration: none;
}

.tfoot a:visited {
	color: #ffffff;
	text-decoration: none;
}

.tfoot a:hover, .tfoot a:active {
	color: #ffffff;
	text-decoration: underline;
}

.bottommenu {
	background: #3f3f3f;
	color: #000000;
	border: 1px solid #077304;
	padding: 10px;
}

.navigation {
	color: #000000;
	font-size: 13px;
	font-weight: bold;
}

.navigation a:link {
	text-decoration: none;
}

.navigation a:visited {
	text-decoration: none;
}

.navigation a:hover, .navigation a:active {
	text-decoration: none;
}

.navigation .active {
	color: #0aa206;
	font-size: small;
	font-weight: bold;
}

.smalltext {
	font-size: 11px;
}

.largetext {
	font-size: 16px;
	font-weight: bold;
}

input.textbox {
	background: #fff;
	color: #000;
	border: 1px solid #000000;
	padding: 1px;
}

textarea {
	background: #3f3f3f;
	color: #fff;
	border: 1px solid #0f5c8e;
	padding: 2px;
	font-family: Verdana, Arial, Sans-Serif;
	line-height: 1.4;
	font-size: 13px;
}

select {
	background: #fff;
	border: 1px solid #1b1b1b;
}

.editor {
	background: #f1f1f1;
	border: 1px solid #ccc;
}

.editor_control_bar {
	background: #fff;
	border: 1px solid #0f5c8e;
}

.autocomplete {
	background: #fff;
	border: 1px solid #000;
	color: black;
}

.autocomplete_selected {
	background: #adcee7;
	color: #000;
}

.popup_menu {
	background: #ccc;
	border: 1px solid #000;
}

.popup_menu .popup_item {
	background: #fff;
	color: #000;
}

.popup_menu .popup_item:hover {
	background: #C7DBEE;
	color: #000;
}

.trow_reputation_positive {
	background: #ccffcc;
}

.trow_reputation_negative {
	background: #ffcccc;
}

.reputation_positive {
	color: green;
}

.reputation_neutral {
	color: #444;
}

.reputation_negative {
	color: red;
}

.invalid_field {
	border: 1px solid #f30;
	color: #f30;
}

.valid_field {
	border: 1px solid #0c0;
}

.validation_error {
	background: url(images/greygreenbb/invalid.gif) no-repeat center left;
	color: #f30;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

.validation_success {
	background: url(images/greygreenbb/valid.gif) no-repeat center left;
	color: #00b200;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

.validation_loading {
	background: url(images/greygreenbb/spinner.gif) no-repeat center left;
	color: #555;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

/* Additional CSS (Master) */
img {
	border: none;
}

.clear {
	clear: both;
}

.hidden {
	display: none;
	float: none;
	width: 1%;
}

.float_left {
	float: left;
}

.float_right {
	float: right;
}

.menu ul {
	list-style: none;
	margin: 0;
}

.menu li {
	display: inline;
	padding-left: 5px;
}

.menu img {
	padding-right: 5px;
	vertical-align: top;
}

#panel .links {
	margin: 0;
	float: right;
}

.expcolimage {
	float: right;
	width: auto;
	vertical-align: middle;
	margin-top: 3px;
}

img.attachment {
	border: 1px solid #E9E5D7;
	padding: 2px;
}

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

#copyright {
	font: 11px Verdana, Arial, Sans-Serif;
	margin: 0;
	padding: 10px 0 0 0;
}

#debug {
	float: right;
	text-align: right;
	margin-top: 0;
}

blockquote {
	border: 1px solid #ccc;
	margin: 0;
	background: #fff;
	padding: 4px;
}

blockquote cite {
	font-weight: bold;
	border-bottom: 1px solid #ccc;
	font-style: normal;
	display: block;
	margin: 4px 0;
}

blockquote cite span {
	float: right;
	font-weight: normal;
}

blockquote cite span.highlight {
	float: none;
	font-weight: bold;
	padding-bottom: 0;
}

.codeblock {
	background: #fff;
	border: 1px solid #ccc;
	padding: 4px;
}

.codeblock .title {
	border-bottom: 1px solid #ccc;
	font-weight: bold;
	margin: 4px 0;
}

.codeblock code {
	overflow: auto;
	height: auto;
	max-height: 200px;
	display: block;
	font-family: Monaco, Consolas, Courier, monospace;
	font-size: 13px;
}

.subforumicon {
	border: 0;
	vertical-align: middle;
}

.separator {
	margin: 5px;
	padding: 0;
	height: 0px;
	font-size: 1px;
	list-style-type: none;
}

form {
	margin: 0;
	padding: 0;
}

.popup_menu .popup_item_container {
	margin: 1px;
	text-align: left;
}

.popup_menu .popup_item {
	display: block;
	padding: 3px;
	text-decoration: none;
	white-space: nowrap;
}

.popup_menu a.popup_item:hover {
	text-decoration: none;
}

.autocomplete {
	text-align: left;
}

.subject_new {
	font-weight: bold;
}

.highlight {
	background: #FFFFCC;
	padding: 3px;
}

.pm_alert {
	background: #FFF6BF;
	border: 1px solid #FFD324;
	text-align: center;
	padding: 5px 20px;
	font-size: 11px;
}

.red_alert {
	background: #FBE3E4;
	border: 1px solid #A5161A;
	color: #A5161A;
	text-align: center;
	padding: 5px 20px;
	font-size: 11px;
}

.high_warning {
	color: #CC0000;
}

.moderate_warning {
	color: #F3611B;
}

.low_warning {
	color: #AE5700;
}

div.error {
	padding: 5px 10px;
	border-top: 2px solid #FFD324;
	border-bottom: 2px solid #FFD324;
	background: #FFF6BF;
	font-size: 12px;
}

div.error p {
	margin: 0;
	color: #000;
	font-weight: normal;
}

div.error p em {
	font-style: normal;
	font-weight: bold;
	padding-left: 24px;
	display: block;
	color: #C00;
	background: url(images/greygreenbb/error.gif) no-repeat 0;
}

div.error.ul {
	margin-left: 24px;
}

.online {
	color: #15A018;
}

.offline {
	color: #C7C7C7;
}

.pagination {
	font-size: 11px;
	padding-top: 10px;
	margin-bottom: 5px;
}

.tfoot .pagination, .tcat .pagination {
	padding-top: 0;
}

.pagination .pages {
	font-weight: bold;
}

.pagination .pagination_current, .pagination a {
	padding: 2px 6px;
	margin-bottom: 3px;
}

.pagination a {
	border: 1px solid #81A2C4;
}

.pagination .pagination_current {
	background: #F5F5F5;
	border: 1px solid #81A2C4;
	font-weight: bold;
}

.pagination a:hover {
	background: #F5F5F5;
	text-decoration: none;
}

.thread_legend, .thread_legend dd {
	margin: 0;
	padding: 0;
}

.thread_legend dd {
	padding-bottom: 4px;
	margin-right: 15px;
}

.thread_legend img {
	margin-right: 4px;
	vertical-align: bottom;
}

.forum_legend, .forum_legend dt, .forum_legend dd {
	margin: 0;
	padding: 0;
}

.forum_legend dd {
	float: left;
	margin-right: 10px;
}

.forum_legend dt {
	margin-right: 10px;
	float: left;
}

.success_message {
	color: #00b200;
	font-weight: bold;
	font-size: 10px;
	margin-bottom: 10px;
}

.error_message {
	color: #C00;
	font-weight: bold;
	font-size: 10px;
	margin-bottom: 10px;
}

.post_body {
	padding: 5px;
}

.post_content {
	padding: 5px 10px;
}

.quick_jump {
	background: url(images/greygreenbb/jump.gif) no-repeat 0;
	width: 13px;
	height: 13px;
	padding-left: 13px; /* amount of padding needed for image to fully show */
	vertical-align: middle;
	border: none;
}

simple mode. http://img809.imageshack.us/img809/4155/simplec.png

In the global.css find:

.menu ul

Find:

text-align: right;

Replace with:

text-align: center;

(2010-08-09, 03:14 AM)AJS Wrote: [ -> ]In the global.css find:
.menu ul
Find:
text-align: right;
Replace with:
text-align: center;

Awesome, that worked! Big Grin

Now i just have this 1 error on W3C.

Line 30, Column 28: character data is not allowed here
<!-- end: headerinclude -->}
✉
You have used character data somewhere it is not permitted to appear. Mistakes that can cause this error include:

putting text directly in the body of the document without wrapping it in a container element (such as a <p>aragraph</p>), or
forgetting to quote an attribute value (where characters such as "%" and "/" are common, but cannot appear without surrounding quotes), or
using XHTML-style self-closing tags (such as <meta ... />) in HTML 4.01 or earlier. To fix, remove the extra slash ('/') character. For more information about the reasons for this, see Empty elements in SGML, HTML, XML, and XHTML.

I don't know how to edit/correct that. Sleepy

Looks like it may be in your index template as it doesn't appear anywhere else.

(2010-08-09, 03:37 AM)AJS Wrote: [ -> ]Looks like it may be in your index template as it doesn't appear anywhere else.

this is my index template.

<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}}
{$metag}}
<script type="text/javascript">
<!--
	lang.no_new_posts = "{$lang->no_new_posts}";
	lang.click_mark_read = "{$lang->click_mark_read}";
// -->
</script>
</head>
<body>
{$header}
{$forums}
{$boardstats}


<dl class="forum_legend smalltext">
	<dt><img src="{$theme['imgdir']}/on.gif" alt="{$lang->new_posts}" title="{$lang->new_posts}" style="vertical-align: middle; padding-bottom: 4px;" />
</dt>
	<dd>{$lang->new_posts}</dd>

	<dt><img src="{$theme['imgdir']}/off.gif" alt="{$lang->no_new_posts}" title="{$lang->no_new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>
	<dd>{$lang->no_new_posts}</dd>

	<dt><img src="{$theme['imgdir']}/offlock.gif" alt="{$lang->forum_locked}" title="{$lang->forum_locked}" style="vertical-align: middle;" /></dt>
	<dd>{$lang->forum_locked}</dd>
</dl>
<br style="clear: both" />
{$footer}
</body>
</html>

Thanks dude, your a beast, i fixed it Big Grin

{$headerinclude}}
{$metag}}

{$headerinclude}}
{$metag}}

Remove the extra } on these two lines. Smile

As requested.

/Closed

Ants

Alan S.

Ants

Alan S.

Ants

Alan S.

Ants

Alan S.

Conor C.