CSS Dropdown menu for the header- With Categories!

[oceanturqiri]

Hello Shawn,

I should have mentioned that I did change the #headerWrapper... to 990099 to match the nav buttons. So it did work to eliminate the white space at the bottom of the buttons. I am so focused on that blasted space at the top of the image that I didn't give you credit for fixing the bottom bit. Anyway, I changed it to 000000, so that you can see the effect.

I also wanted to mention that I wasn't having this problem until I installed the dropdown menu, so it changed something.

Thank you for liking the new color scheme: ) I am putting this site together for a friend who is starting this ministry. She likes white, but I'll mention it to her.

Thanks again.

Ocean

[0be1]

Ocean;

What about this to stay consistent with the rest of the color scheme:

Search for h2.centerBox in your stylesheet.css

h2.centerBoxHeading {
font-size: 1.3em;
color: #000000;
background-color: #990099; // I added this line and matches your other color purple.
}


Just a thought ;o)

Keep up the good work!!!!

Sincerely,

0be1

[oceanturqiri]

Hello Obe1,

Thanks for the suggestion. I like it. My friend is in Costa Rica setting up another vocational center to help rescue women and kids; so, as soon as she gets back I'll see if she likes it.

The problem with that irritating space hasn't gone away, but I can make the best with what I've got. It's the unsolved mystery that bothers me.

Thanks again for your help.

Ocean

[jettrue]

Hello Shawn,

I should have mentioned that I did change the #headerWrapper... to 990099 to match the nav buttons. So it did work to eliminate the white space at the bottom of the buttons. I am so focused on that blasted space at the top of the image that I didn't give you credit for fixing the bottom bit. Anyway, I changed it to 000000, so that you can see the effect.

I also wanted to mention that I wasn't having this problem until I installed the dropdown menu, so it changed something.

Thank you for liking the new color scheme: ) I am putting this site together for a friend who is starting this ministry. She likes white, but I'll mention it to her.

Thanks again.

Ocean

Did you try adjusting the bottom padding here:

#navMain ul, #navSupp ul, #navCatTabs ul

[signagen]

Hi, Jade, very nice contribution.

I have a question. Do you know how to align level 2 menu in left? Also can you kindly let me know how to align level 1 blocks (I have 4 blocks) in right while keeping the menu text in each block align in center?

Your help will be greatly appreciated.

[jettrue]

Hi, Jade, very nice contribution.

I have a question. Do you know how to align level 2 menu in left? Also can you kindly let me know how to align level 1 blocks (I have 4 blocks) in right while keeping the menu text in each block align in center?

Your help will be greatly appreciated.

I'm not sure what you mean, sorry!

[signagen]

I mean how to align the drop-down submenu text (level 2) to left while keep level 1 text in center. Your code aligns all of them in center. If I change level 2 text alinment to left, the level 1 menue text will also be in the left.

Also the drop-down menu (not text) only occupies 80% width of the header, how to align the menu (not text) to right.

Thank you.

[WebBuilder]

Jet or any other zen master......

I'm currently building a site - you can view here
http://www.alltoppedoff.com/zc/index...&products_id=9

What I would like to achieve is ... Where you see the top level nav (graphics w/roll over) I would like to keep the top level graphics as they are and have the subcats drop down on hover over.

I am having some difficulty with the drop down menu. When I add in the code to my tpl_header.php , the menu shows up fine - but everything below the menu disappears.
--------------------------------------------------------------------
<?php require($template->get_template_dir('tpl_drop_menu.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_drop_menu.php');?>
<!--eof-drop down menu display-->
<div class="clearBoth"></div>
---------------------------------------------------------------------------------
I have played around with removing the (<div class="clearBoth"></div>) as well as moving positioning and checking for missing or extra code. I have even uploaed the tpl_header.php that came with the zip file and I get the same result...the menu shows up, but everything below it disappears.

I am sure I am missing something simple and obvious. I have read through the read me text throughly and surfed the forums here til my eyes bled.

I am using zen cart version 1.3.8a and CSS flyout menu 1.5

Here is the code for my tpl_header.php as it is now
------------------------------------------------------------------------------------
<?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-->
<div id="navMainWrapper">
<div id="navMain">
<ul class="back">
<li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>
<?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 HEADER_TITLE_LOGIN; ?></a></li>
<?php } } ?>

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

<!--bof-branding display-->
<div id="logoWrapper">


<div id="Layer2" style="position:relative; width:632px; height:38px; z-index:1; left: 300px; top: 56px;">
<table id="Table_01" width="632" height="38" border="0" cellpadding="0" cellspacing="0">
<tr>
<td> <img src="/images/topnav_01.gif" width="89" height="38" alt=""></td>
<td> <a href="http://www.alltoppedoff.com/zc/index.php?main_page=index&cPath=1&zenid=25d55ff515cdcadf6dd9f73466584a77"
onmouseover="MM_swapImage('topnav_02','','/images/topnav_02-over.gif',0)"
onmouseout="MM_swapImgRestore()"> <img name="topnav_02" src="/images/topnav_02.gif" width="99" height="38" border="0" alt="Capes"></a></td>
<td> <a href="http://www.alltoppedoff.com/zc/index.php?main_page=product_info&cPath=2&products_id=4"
onmouseover="MM_swapImage('topnav_03','','/images/topnav_03-over.gif',0)"
onmouseout="MM_swapImgRestore()"> <img name="topnav_03" src="/images/topnav_03.gif" width="114" height="38" border="0" alt="Toppers"></a></td>
<td> <a href="http://www.alltoppedoff.com/zc/index.php?main_page=product_info&cPath=3&products_id=3"
onmouseover="MM_swapImage('topnav_04','','/images/topnav_04-over.gif',0)"
onmouseout="MM_swapImgRestore()"> <img name="topnav_04" src="/images/topnav_04.gif" width="98" height="38" border="0" alt="Scarves"></a></td>
<td> <a href="http://www.alltoppedoff.com/zc/index.php?main_page=product_info&cPath=4&products_id=5"
onmouseover="MM_swapImage('topnav_05','','/images/topnav_05-over.gif',0)"
onmouseout="MM_swapImgRestore()"> <img name="topnav_05" src="/images/topnav_05.gif" width="99" height="38" border="0" alt="Knits"></a></td>
<td> <a href="http://www.alltoppedoff.com/zc/index.php?main_page=index&cPath=5"
onmouseover="MM_swapImage('topnav_06','','/images/topnav_06-over.gif',0)"
onmouseout="MM_swapImgRestore()"> <img name="topnav_06" src="/images/topnav_06.gif" width="133" height="38" border="0" alt="Accessories"></a></td>
</tr>
</table>
</div>

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

--------------------------------------------------------------------------------------------

I am really hoping someone will be able to point out my mistake and show me the light.

Thanks so much for your times folks :-)