Centerinb Menu

[DanAllkins]

I have created a menu with I have placed in my tpl_header.php file:
See below:

<?php
/**
 * Common Template - tpl_header.php
 *
 * this file can be copied to /templates/your_template_dir/pagename<br />
 * example: to override the privacy page<br />
 * make a directory /templates/my_template/privacy<br />
 * copy /templates/templates_defaults/common/tpl_footer.php to /templates/my_template/privacy/tpl_header.php<br />
 * to override the global settings and turn off the footer un-comment the following line:<br />
 * <br />
 * $flag_disable_header = true;<br />
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_header.php 4813 2006-10-23 02:13:53Z drbyte $
 */
?>

<?php
  // Display all header alerts via messageStack:
  if ($messageStack->size('header') > 0) {
    echo $messageStack->output('header');
  }
  if (isset($_GET['error_message']) && zen_not_null($_GET['error_message'])) {
  echo htmlspecialchars(urldecode($_GET['error_message']));
  }
  if (isset($_GET['info_message']) && zen_not_null($_GET['info_message'])) {
   echo htmlspecialchars($_GET['info_message']);
} else {

}
?>


<!--bof-header logo and navigation display-->
<?php
if (!isset($flag_disable_header) || !$flag_disable_header) {
?>

<div id="headerWrapper">

<!--bof-branding display-->
<div id="logoWrapper">
<!--    <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div> -->
<?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>
    <div id="taglineWrapper">
<?php
              if (HEADER_SALES_TEXT != '') {
?>
      <div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
<?php
              }
?>
<?php
              if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
                if ($banner->RecordCount() > 0) {
?>
      <div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
<?php
                }
              }
?>
    </div>
<?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>
</div>
<br class="clearBoth" />
<!--eof-branding display-->


<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
    <ul class="back">
    <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_TITLE_HOME_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_TITLE_HOME_IMAGE, HEADER_TITLE_HOME_ALT) . '</a>'; ?></a></li>

<!-- put extra header menu options here-->


<?php if ($_SESSION['customer_id']) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
<?php
      } else {
        if (STORE_STATUS == '0') {
?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_TITLE_L_I, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_TITLE_L_I, HEADER_TITLE_L_A) . '</a>'; ?></a></li>
<?php } } ?>
	<li><a href="http://www.myspace.com/badluckclothingcompany" title="Visit the Bad Luck Clothing MySpace page"><img src="includes/templates/badluck/images/menu_myspace.jpg" alt="MySpace" width="66" height="27" /></a></li>
	<li><a href="index.php?main_page=page&amp;id=2&amp;chapter=0"><img src="includes/templates/badluck/images/menu_bands.jpg" alt="Bad Luck Clothing bands" width="46" height="27" /></a></li>
	<li><a href="photography/index.html" title="Bad Luck Clothing Stickers"><img src="includes/templates/badluck/images/menu_stickers.jpg" alt="Stickers" width="60" height="27" /></a></li>
	<li><a href="artwork/index.html" title="Bad Luck Clothing Custom Work"><img src="includes/templates/badluck/images/menu_custom.jpg" alt="Custom Work" width="98" height="27" /></a></li>
	

<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
<?php }?>
</ul>
</div>
<div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>
<br class="clearBoth" />
</div>
<!--eof-navigation display-->

<!--eof-header logo and navigation display-->

<!--bof-optional categories tabs navigation display-->
<?php require($template->get_template_dir('tpl_modules_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_categories_tabs.php'); ?>
<!--eof-optional categories tabs navigation display-->

<!--bof-header ezpage links-->
<?php if (EZPAGES_STATUS_HEADER == '1' or (EZPAGES_STATUS_HEADER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?>
<?php require($template->get_template_dir('tpl_ezpages_bar_header.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_header.php'); ?>
<?php } ?>
<!--eof-header ezpage links-->
</div>
<?php } ?>

The problem is I'm unable to center it?!? - I have looked in the CSS files but no matter what I do to the navMain or navMainWrapper I cant get it to center.

Am I looking in the right place... and more so am I on the right road???

Cheers for any help

Dan

[gjh42]

Look at subsets of #navMain, like
#navMain ul li a {
to see what existing styling you have, and adjust as required.

[DanAllkins]

I have had a good look at that section and made many changes but nothing has worked.

Here is the section of my CSS that you were talking about

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
background-color: #abbbd3;
	background-image: url('../images/tile_back.gif');
	font-weight: bold;
	color: #000000;
	height: 1%; padding-left: 5em; padding-right:5em; padding-top:0em; padding-bottom:0em;
	white-space: nowrap;
/*	float: left;*/
}


#navCatTabsWrapper {
	background-color: #ffffff;
	color: #9a9a9a;
	background-image:url('none');
}

#navMain ul, #navSupp ul, #navCatTabs ul {
/*	margin: 0;*/
	padding: 0em 0em;
	list-style-type: none;
	white-space: nowrap;
	text-align: center;
	/*line-height: 1.5em;*/
display: inline-block;}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
	display:inline;
	padding: 0em; /*new*/
	}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
	padding: 0em;
	text-decoration:none;
	margin: 0;
	white-space: nowrap; padding-left:0em; padding-right:0em; padding-top:0em; padding-bottom:0em
	}

[gjh42]

A link to your site would let us play with it and more likely find the problem.

[DanAllkins]

Opps.... its here: http://www.badluckclothing.co.uk

Thanking you!

[gjh42]

Your links are currently centered horizontally, which is what first comes to mind when you say "centered".

The reason they do not look centered vertically is that the images are various heights and the text is located at various places within the height. You need to make all of those images consistent.

[DanAllkins]

Thats been done... I created a line of text in photoshop and then sliced the image up... so they should be all the same height.

[gjh42]

Now they look the same size & height to me, but off to the left instead of centered.

[DanAllkins]

You may have a point there.... you may have just pointed me in the right direction... I'll give ago what I'm thinking and get back to you.

Cheers
for the help (so-far)
Dan

[DanAllkins]

Now they look the same size & height to me, but off to the left instead of centered.

I have had a look at my CSS and I cant see that anything has been changed?! This is really bugging me now.. all I want is the menu to be centered.