adding images and links to the footer

ok, so i have had some decent success thanks to this post:
http://www.zen-cart.com/forum/showthread.php?t=91865&highlight=remove+home+footer
especially with DivaVocals "summary"...

I have sucessfully used this technique to add 3 links so far to my footer, including image links as well...

however, the last link to my business facebook page, is for some reason picking up code from 'about us' link further down... ??

site is here:
https://www.customk9design.com/catalogzen

code from tpl_footer.php is:

<?php
/**
 * Common Template - tpl_footer.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_footer.php<br />
 * to override the global settings and turn off the footer un-comment the following line:<br />
 * <br />
 * $flag_disable_footer = true;<br />
 *
 * @package templateSystem
 * @copyright Copyright 2003-2005 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_footer.php 4821 2006-10-23 10:54:15Z drbyte $
 */
require(DIR_WS_MODULES . zen_get_module_directory('footer.php'));
?>

<?php
if (!isset($flag_disable_footer) || !$flag_disable_footer) {
?>
<!--bof-navigation display -->
<div id="navSuppWrapper">
<div id="navSupp">
<ul>
<li><a href='http://www.hsus.org/'><img src="http://www.customk9design.com/catalogzen/includes/templates/darkness/images/humanesociety.gif" alt="Humane Society" /></a></li>
<li><a href='http://www.justhost.com/ecertified?domain='+document.domain+'','JustHost','target="_blank" toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=570,height=680,left=300,top=200');"><img src="http://www.customk9design.com/catalogzen/includes/templates/darkness/images/greenbadge.gif" alt="Green Verified" width="65" height="65"/></a></li>
<li><a href='http://www.facebook.com/home.php?#/pages/Custom-K9-Design/72436717447?ref=mf><img src="http://www.customk9design.com/catalogzen/includes/templates/darkness/images/facebook_48.gif" alt="Facebook" width="65" height="65"/></a></li>
<br />
<?php if (EZPAGES_STATUS_FOOTER == '1' or (EZPAGES_STATUS_FOOTER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?>
<li><?php require($template->get_template_dir('tpl_ezpages_bar_footer.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_footer.php'); ?></li>
<?php } ?>
</ul>
</div>
</div>
<!--eof-navigation display -->

<!--bof-ip address display -->
<?php
if (SHOW_FOOTER_IP == '1') {
?>
<div id="siteinfoIP"><?php echo TEXT_YOUR_IP_ADDRESS . '  ' . $_SERVER['REMOTE_ADDR']; ?></div>
<?php
}
?>
<!--eof-ip address display -->

<!--bof-banner #5 display -->
<?php
  if (SHOW_BANNERS_GROUP_SET5 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET5)) {
    if ($banner->RecordCount() > 0) {
?>
<div id="bannerFive" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>
<?php
    }
  }
?>
<!--eof-banner #5 display -->
<li><a href='http://customk9design.com/catalogzen/index.php?main_page=page&id=2'>About Us</a></li>
<!--bof- site copyright display -->
<div id="siteinfoLegal" class="legalCopyright"><?php echo FOOTER_TEXT_BODY; ?></div>
<!--eof- site copyright display -->

<?php
} // flag_disable_footer
?>

You left out a single quote here:
<a href='http://www.facebook.com/home.php?#/pages/Custom-K9-Design/72436717447?ref=m>

Should be:
<a href='http://www.facebook.com/home.php?#/pages/Custom-K9-Design/72436717447?ref=m'>

bah! such a simple answer... thanks!! :)

Always those tiny thing that cause us to pull our hair out :wink:

ok, gettin there with some of this stuff now... a couple of questions regarding my footer however...
https://www.customk9design.com/catalogzen

1. how do i eliminate the spaces between my 5 objects on my footer?

2. where is the file located that is describing the footer "background"? i just want to make it all black....

3. (somewhat related) i am doing basically the same on the header to imput static links (no dropdown or flyout). when i added this to the header, you can see it works, but it stacked one on top of the other, and has that small white dot to the left? i imagine that question #1 and #3 might have similar solutions??

Eagerly awaiting more help! thanks to you all....

footer code below:

<?php
/**
 * Common Template - tpl_footer.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_footer.php<br />
 * to override the global settings and turn off the footer un-comment the following line:<br />
 * <br />
 * $flag_disable_footer = true;<br />
 *
 * @package templateSystem
 * @copyright Copyright 2003-2005 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_footer.php 4821 2006-10-23 10:54:15Z drbyte $
 */
require(DIR_WS_MODULES . zen_get_module_directory('footer.php'));
?>

<?php
if (!isset($flag_disable_footer) || !$flag_disable_footer) {
?>
<!--bof-navigation display -->
<div id="navSuppWrapper">
<div id="navSupp">
<ul>
<li><a href='http://www.hsus.org/'><img src="http://www.customk9design.com/catalogzen/includes/templates/darkness/images/humanesociety.gif" alt="Humane Society" width="275" height="55"/></a></li>
<li><a href="javascript:void(0);" onclick="window.open('http://www.justhost.com/ecertified?domain='+document.domain+'','JustHost','toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=570,height=680,left=300,top=200');"><img style="border:0px;" src="http://www.justhost.com/img/greenbadges/badge4.gif" alt="Green Web Hosting" /></a></li>
<li><a href='http://www.facebook.com/home.php?#/pages/Custom-K9-Design/72436717447?ref=mf'><img src="http://www.customk9design.com/catalogzen/includes/templates/darkness/images/facebook_48.gif" alt="Facebook" width="55" height="55"/></a></li>
<li><a href="http://www.mozilla.com/en-US/firefox/organic/?from=sfx&uid=0&t=353"><img border="0" alt="Spreadfirefox Affiliate Button" src="http://www.customk9design.com/catalogzen/includes/templates/darkness/images/organicfirefox.jpg"width="100" height="55"/></a></li>
<img src="http://www.customk9design.com/catalogzen/includes/templates/darkness/images/paymentoptions.png" width="85" height="55">
<?php if (EZPAGES_STATUS_FOOTER == '1' or (EZPAGES_STATUS_FOOTER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?>
<li><?php require($template->get_template_dir('tpl_ezpages_bar_footer.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_footer.php'); ?></li>
<?php } ?>
</ul>
</div>
</div>
<!--eof-navigation display -->

<!--bof-ip address display -->
<?php
if (SHOW_FOOTER_IP == '1') {
?>
<div id="siteinfoIP"><?php echo TEXT_YOUR_IP_ADDRESS . '  ' . $_SERVER['REMOTE_ADDR']; ?></div>
<?php
}
?>
<!--eof-ip address display -->

<!--bof-banner #5 display -->
<?php
  if (SHOW_BANNERS_GROUP_SET5 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET5)) {
    if ($banner->RecordCount() > 0) {
?>
<div id="bannerFive" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>
<?php
    }
  }
?>
<!--eof-banner #5 display -->
<li><a href='http://customk9design.com/catalogzen/index.php?main_page=page&id=2'>About Us</a></li>
<!--bof- site copyright display -->
<div id="siteinfoLegal" class="legalCopyright"><?php echo FOOTER_TEXT_BODY; ?></div>
<!--eof- site copyright display -->

<?php
} // flag_disable_footer
?>

1. how do i eliminate the spaces between my 5 objects on my footer?
   In your stylesheet.css add the following:
   #navSupp img {
   margin-left:-10px;
   }
   change -10px to whatever value you need. If you go too far negative, your images will overlap.

2. where is the file located that is describing the footer "background"? i just want to make it all black....
   In your stylesheet.css
   catalog\includes\templates\YOUR_CUSTOM_TEMPLATE\css\stylesheet.css
   somewhere below about line 260, add:
   #navSuppWrapper {
   background: #000000;
   }

3. (somewhat related) i am doing basically the same on the header to imput static links (no dropdown or flyout). when i added this to the header, you can see it works, but it stacked one on top of the other, and has that small white dot to the left? i imagine that question #1 and #3 might have similar solutions??
   #headerWrapper li {
   display:inline;
   list-style-type:none;
   }
   This will target the problem in the header, however you have malformed XHTML. Your list has <li> tags but no <ul> tags.
   You should really make sure your XHTML is formed properly or you will be asking for trouble down the road.
   You can check the validation of your code at:
   http://validator.w3.org

ok, making progress...

so, what i want to happen, is for the image to call a webpage, but for it to open in a new smaller window on top...

this works when i use the code provided for my host for the "click to verify green"...

however when i try to apply this formula to the other links on the bottom like this, it opens in a completely new firefox tab...

Also, it is my understanding that a href="javascript:void(0) is not a particularly good coding to use, how should i do this in a more browser friendly way?

https://www.customk9design.com/catalogzen

THANKS!

okokokokkookkkkk....

so i think i know the answer, but not sure how to fix it...

when i got the code from my host for the green button, i just inserted it as told... and "assumed" (you know what that will do to you) that (li) ment link.. (though i should have realized that the ahref is doing that... so why did i need the li?

after you questioning my use of li, i looked it up, and it is for list, not link... <link> should be used instead? this would also explain the dots... because it is bullet pointing a list! (A HA!)

**so, what should i use? **

1. delete "li" altogether
2. replace "li" with "link"
3. use "li" but define the lists with "ul" tags (but then i would still have the dots??
4. a blunt object
5. gps navigation

thanks!

This one:

3. use "li" but define the lists with "ul" tags (but then i would still have the dots??

For most purposes if you have a list of links you want to display, whether horizontally or vertically, you should put them inside a list. That way any other links added later within <li> tags will naturally fall inline with the rest. And it helps to assign an id or class to the list to give you something to attach styles to, like so:

Then, if you want to remove the bullets and display the list inline you add the following to your stylesheet

#topMenuStyle li {
display: inline;
list-style-type: none; /removes the bullets/
}

makes perfect sense...

thanks! glad i didnt have to resort to the blunt object approach... :laugh:

i'll post again if i have more issues...

oh, still need to tackle the issue of using the
a href="javascript:void(0) and it opening in a new window... from a few posts up..

if you have a chance to answer this for me too, that would be great.. :)

additional ?s...

1. still need better solution to the opening in a new window (see previous post)

2. i am trying to center align the type at the bottom... the "about us, contact us, legal stuff... etc"

i have assigned a name to the ul, and coded it in the css, but it isnt moving.. whats a better way to do this?

below is the footer code, and the css..

THANKS!

<ul id="bottomMenuStyle2">
<li><a href='http://customk9design.com/catalogzen/index.php?main_page=page&id=2'>About Us</a></li>   
<li><a href='http://customk9design.com/catalogzen/index.php?main_page=contact_us'>Contact Us</a></li>  
<li><a href='http://customk9design.com/catalogzen/index.php?main_page=page&id=7'>Legal Stuff</a></li>  
<li><a href='http://customk9design.com/catalogzen/index.php?main_page=page&id=8'>Shipping, Returns and Availability</a></li>  
<li><a href='http://customk9design.com/catalogzen/index.php?main_page=site_map'>Site Map</a></li>
</ul>
<!--bof- site copyright display -->
<div id="siteinfoLegal" class="legalCopyright"><?php echo FOOTER_TEXT_BODY; ?></div>
<!--eof- site copyright display -->

<?php
} // flag_disable_footer
?>

#bottomMenuStyle2 li {
display: inline;
position:relative;
left:100px
list-style-type: none; /*removes the bullets*/
} 

Add another property to #bottomMenuStyle2

#bottomMenuStyle2{
text-align: center;
}

You should start a new thread for the javascript issue as it is off topic to this thread. But, I will give you a hint as to where to look.
Look at the small help link on your shopping cart page. Look at the source code and note that there is a javascript snippet in the head section. Look at that and how the javascript for the link is formatted.