Hi, I'm working on a WordPress theme and customizing it a bit and I'm trying to get a table to center within the header... and it won't. I've tried everything and probably too much!
You'll see there's actually a table within a table because there's a background image I want displayed at 100% and then the table inside should be centered and only 960px.
Here's the code as it is now...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" <?php language_attributes('xhtml'); ?>>
<head profile="
http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="distribution" content="global" />
<meta name="language" content="en" />
<title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' :'; } ?> <?php bloginfo('name'); ?></title>
<link rel="Shortcut Icon" href="<?php echo bloginfo('template_url'); ?>/images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
if (!document.getElementsByTagName) return false;
var sfEls = document.getElementById("nav").getElementsByTagNam e("li");
// if you only have one main menu - delete the line below //
var sfEls1 = document.getElementById("subnav").getElementsByTag Name("li");
//
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
// if you only have one main menu - delete the "for" loop below //
for (var i=0; i<sfEls1.length; i++) {
sfEls1[i].onmouseover=function() {
this.className+=" sfhover1";
}
sfEls1[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover1\\b"), "");
}
}
//
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
</head>
<body>
<div id="wrap">
<div id="header">
<table class="main.header" cellpadding="0" cellspacing="0" style="background-image:url('images/bg.png')"style="width: 100%; height: 170px">
<tr>
<td valign="top" align="center">
<table align="center" width="960px" cellpadding="0" cellspacing="0" style="height: 130px; background-image:url(images/header.png')">
<tr>
<td style="height: 100px"><div class="headerleft">
<?php $chrome_header = get_option('chrome_header'); ?>
<?php if($chrome_header == 'Text'): ?>
<h1><a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<p><?php bloginfo('description'); ?></p>
<?php else : ?>
<?php endif; ?>
</div>
<div class="headerright">
<p><a href="<?php bloginfo('rss_url'); ?>">Subscribe to News</a><br /><a href="<?php bloginfo('comments_rss2_url'); ?>">Subscribe to Comments</a></p>
<form id="searchformheader" method="get" action="<?php echo get_option('home') ?>/">
<input type="text" value="Search this website..." name="s" id="searchbox" onfocus="if (this.value == 'Search this website...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this website...';}" />
<input type="submit" id="searchbutton" value="GO" /></form>
</div></td>
</tr>
<tr>
<td align="center" style="height: 30px"><div id="navbar">
<ul id="nav">
<li><a href="<?php echo get_option('home'); ?>">Home</a></li>
<?php wp_list_pages('title_li=&depth=4&sort_column=menu_ order'); ?>
</ul>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div style="clear:both;"></div>
<div id="subnavbar">
<ul id="subnav">
<?php wp_list_categories('orderby=name&title_li=&depth=4 '); ?>
</ul>
</div>
<div style="clear:both;"></div>
. I've seen few WP themes done in tables.
