Header customisation

[Xaria]

Before anyone asks for a link... I am sorry I am not able to provide a link to the website as I am working on localhost.

I want to customise the header and I am not able to get the desired results. I have attached jpegs of what I want to achieve and what I have been able to do so far.
What I Want: 1st attachment
What I Have: 2nd attachment

The styesheet for the header components:
#navheader{
float: right;
width: 150px;
margin: 0em;
padding: 0em;
}
#navHeader ul{
font-size: 10px;
list-style-type: none;
width: 150px;
}

#navHeader ul li {
color: #000000;
/*display: inline;*/
width: 150px;
}

#navHeader ul li a {
display: block;
text-decoration: none;
margin: 0em;
color: #FFF;
white-space: nowrap;
font-weight: bold;
padding: 1em;
background: #353535;
border-bottom: 1px solid #5F5F5F;
}

#headerWrapper, #logoWrapper {
margin: 0em;
padding: 0em;
}

#logoWrapper{
float:left;
background-repeat: repeat-x;
background-color: #c22c2c;
height:250px;
width:600px;
}

Following is the tpl_header.php

<?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-navigation display-->

<!--eof-navigation display-->
<div id="navHeader">
<ul>
<li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_ABOUT_US, '', 'SSL'); ?>"><?php echo HEADER_TITLE_ABOUT; ?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_PAGE_4, '', 'SSL'); ?>"><?php echo HEADER_TITLE_SERVICES; ?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_PAGE_2, '', 'SSL'); ?>"><?php echo HEADER_TITLE_PORTFOLIO; ?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_PAGE_3, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CAREERS; ?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_CONTACT_US, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CONTACT; ?></a></li>
</ul>
</div>
<!--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-->

<!--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 } ?>

Thanks

[kobra]

This looks like a Template Monster Template - if so do a search here for them and the issues....

I did not see any background image entry nor a #logoWrapper tag for your style sheet.

You might check the FAQ's for these common issues

[Xaria]

This looks like a Template Monster Template - if so do a search here for them and the issues....

I did not see any background image entry nor a #logoWrapper tag for your style sheet.

You might check the FAQ's for these common issues

What backround imageare you talking about? There is no background image!!!!!! it is a background color. and logo!
I have not posted the entire stylesheet. And no it is not a monster template. I did include the logwrapper id in the stylesheet I posted. I am customising the zen stylesheet itslef. I added the navheader id and its relevant ul , li tags.I only posted the tags that I have modified in the original stylesheet.css

[kobra]

#logoWrapper{
float:left;
background-repeat: repeat-x;
background-color: #c22c2c;
height:250px;
width:600px;
}

I did not see any background image entry nor a #logoWrapper tag for your style sheet.

The highlighted entry missing so no image(adjust to your image name)...

#logoWrapper{
float:left;
background-image:  url(../images/bg_header.jpg);
background-repeat: repeat-x;
background-color: #c22c2c;
height:250px;
width:600px;
}

[Xaria]

I do not want to use a background image therefore I delete it. Is it necessary to include that?

[Xaria]

adding the image has no effect, the alignment is till the same, with the image now.

[Xaria]

I see Kobra and clydejones come n go but no replies..

[Xaria]

Edited.

[kobra]

Before anyone asks for a link... I am sorry I am not able to provide a link to the website as I am working on localhost.

Very difficult to assist imn this situation as seeing this makes 200% difference as to what you misht have or be attempting.

If you can get this uploaded to a web accessible location so that we as a community can see it and your assistance will increase several fold

[clydejones]

I have to agree with kobra on this.

much better if we could access a url for the site.

trying to duplicate what you have already done based on just what you've posted may or may not lead to a solution.