Centering Footer Text

I have tried everything I know to center my footer text to match the front end of the website. I suspect it's something easy.

You can see a live page in action here: http://www.lasilhouettelingerie.com/shop/privacy (I am only trying to center the footer text to match this page: http://www.lasilhouettelingerie.com/).

The first thing you should know is that I removed most of my tpl_footer.php css rules and added my own (to match the front end of my website). On the front end it's centered, on the zen cart pages it is not.

Here is my tpl_footer.php that shows the css rules:

<?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-2010 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license [URL]http://www.zen-cart.com/license/2_0.txt[/URL] GNU Public License V2.0
 * @version $Id: tpl_footer.php 15511 2010-02-18 07:19:44Z drbyte $
 */
?>
<?php
if (!isset($flag_disable_footer) || !$flag_disable_footer) {
?>
<!--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 -->
<!--This is where I enter all my custom footer information from the front end -->
<div style="position: relative; background: url('/images/news_bg.gif') no-repeat; width: 808px; height: 100px; margin: auto; font-size: 10px; clear: both;">
 <? if (strtolower($_SERVER['PHP_SELF']) != '/awards-news.php') { ?>
  <a href="/awards-news.php"><img src="/images/awards_news.gif" width="218" height="18" alt="Awards & News" style="position: absolute; top: 0px; left: 410px;" /></a>
 <? } ?>
 
 <div style="position: absolute; top: 25px; right: 5px; width: 570px; font-size: 8px;">
  <span style="font-weight: bold; color: #bf1e2d; font-size: 10px; line-height: 18px;">We Carry the World's Finest Lingerie Brands...</span><br />
  Arlotta, Andre Sarda, B.Up, Bagley Mischka, BedHead, Betsey Johnson, Cass and Co., Chantelle, Cosabella, do mi, Elle Macpherson, Feraud, Foxers, Francis Smiley, Hanky Panky, Huit, Jane Woolrich, Jay Cris, Josie Natori, KayAnna, La Perla, Luisa Stefano, Lou Paris, Marie Jo, Maria Scotto, Natori, Oscar de la Renta, Prima Donna, Roseta, Simone Perele, Teccia, Verena, Wolford, and more.
 </div>
</div>
<div style="clear: both; height: 10px;"></div>
<div id="box-wrapper">
 <div id="box-top"></div>
 
 <strong>For Fashion and Sale News</strong><br />
 <form name="subscribe" action="[URL]http://www.lasilhouettelingerie.com/shop/index.php?main_page=subscribe[/URL]" method="post">
 <input type="hidden" name="act" value="subscribe" />
 <input type="text" name="email" size="18" maxlength="90" value="Enter email address" onfocus="if (this.value == 'Enter email address') this.value = '';" />
    <input type="image" src="/shop/includes/templates/latemplate1/buttons/english/button_subscribe.gif" alt="Subscribe" title=" Subscribe " value="Subscribe" />
</form>
 
 <a href="[URL]http://www.facebook.com/pages/La-Silhouette/125747210777833?ref=sgm[/URL]" target="_blank"><img src="/images/facebook.gif" width="72" height="24" alt="Find Us On Facebook" style="margin: 7px;" /></a>
 <a href="[URL]http://twitter.com/La_Silhouette[/URL]" target="_blank"><img src="/images/twitter.gif" width="57" height="24" alt="Follow Us On Twitter" style="margin: 7px;" /></a>
 
 <div id="box-bot"></div>
</div>
<div id="footer">
 <a href="/shop/accessories-c-157">Accessories</a> | 
    <a href="/shop/bustier-c-144">Bustier</a> |
    <a href="/shop/dresses-c-172">Dresses</a> | 
 <a href="/shop/hosiery-c-141">Hosiery</a> | 
 <a href="/shop/tops-c-145">Tops</a> | 
 <a href="/shop/bras-c-1">Bras</a> | 
 <a href="/shop/panties-c-66">Panties</a> | 
 <a href="/shop/matching-sets-c-103">Matching Sets</a> | 
 <a href="/shop/loungewear-c-68">Loungewear</a> | 
 <a href="/shop/nightwear-c-67">Nightwear</a> |
 
 <br />
 
 <a href="/shop/bodysuits-c-70">Bodysuits</a> | 
 <a href="/shop/bridal-c-140">Bridal</a> | 
    <a href="/shop/sale-c-71">Sale</a> | 
 <a href="/shop/shop-by-designer-c-72">Shop by Designer</a> | 
 <a href="/shop/shop-by-price-c-82">Shop by Price</a> | 
 <a href="/shop/gift-certificates-c-21">Gift Certificates</a> | 
 <a href="/awards-news.php">Awards and News</a> | 
 <a href="/">Home</a>
 
 <br />
 <a href="/shop/shippinginfo">Shipping & Returns</a> | 
 <a href="/shop/privacy">Privacy Notice</a> | 
 <a href="/shop/conditions">Conditions of Use</a>
 
 <br />
 
 <div style="margin-top: 7px; line-height: 14px;">
  <?= date('Y') ?> © La Silhouette, LLC<br />
  <span style="font-size: 8px;">Website Hosted at: Host Leopard Ohio ~ Designed By: Diana Puppin / dp Design</span>
 </div>
</div>
<div style="clear: both; height: 10px;"></div>
<!--This is where I enter all my custom footer information from the front end -->
<?php
} // flag_disable_footer
?>

Here are my css rules that apply to this tpl_footer.php file:

#box-wrapper {
 float: left;
 background: url("/images/box_mid.gif") repeat-y;
 width: 183px;
 margin: 10px 0 10px 37px;
 font-size: 10px;
 line-height: 20px;
 text-align: center;
}
#box-wrapper p {
 margin: 0 15px;
 font-size: 10px;
 text-align: left;
}
#box-top {
 background: url("/images/box_top.gif") no-repeat;
 height: 9px;
}
#box-bot {
 background: url("/images/box_bot.gif") no-repeat;
 height: 11px;
}
 
#footer {
 float: right;
 width: 575px;
 margin: 10px 0 0 0;
 font-size: 9px;
 line-height: 16px;
}

All of the css rules are shown above. Any ideas would be greatly appreciated.

Did you read the FAQ's? They was very helpful when I started 2 months ago. I looked at a link for ref so here is the link in the FAQ's
https://www.zen-cart.com/tutorials/index.php?article=257

Thank you David I did read the FAQ's. There are not instructions for the layout that I am trying to achieve. This is a css setting that I am not familair with.

Here is my tpl_footer.php that shows the css rules:
You are hacking this all up by styling inline in the php file
Styling belongs in the stylesheet

Kobra,

Someone else designed the front few pages of the website that look like this: http://www.lasilhouettelingerie.com/ This person had no idea as to how to customize zen cart to match their template.

So I the older webmaster who knows zen cart cusomization (especially with your help) had to fix their template and implement it into Zen Cart.

I am not that good in css but usually I can manage. Trying to match their specifications in zen cart is backwards. This should have all been done in Zen Cart and then the front pages should have been done.

I am stuck trying to match their template when I know just enough css to make me dangerous (usually through trial and error).

So unfortunately (just like the header) the only way I could get them to match was use some of their inline css. I almost have their template matched, I just need to get this bottom text centered.

Find in the cart stylesheet your entry for footer

#footer {
    float: right;
    width: 575px;
    margin: 10px 0 0 0;
    font-size: 9px;
    line-height: 16px;
}

Try adding the highlighted entry to it

#footer {
    float: right;
    text-align: center;
    width: 575px;
    margin: 10px 0 0 0;
    font-size: 9px;
    line-height: 16px;
}

That was it? I thought I had tried that and it did not work. It works now thank you!

Do you know how to center the text right above that footer text (in the gray box) and says this:

[B]We Carry the World's Finest Lingerie Brands...[/B]
Arlotta, Andre Sarda, B.Up, Bagley Mischka, BedHead, Betsey Johnson, Cass and Co., Chantelle, Cosabella, do mi, Elle Macpherson, Feraud, Foxers, Francis Smiley, Hanky Panky, Huit, Jane Woolrich, Jay Cris, Josie Natori, KayAnna, La Perla, Luisa Stefano, Lou Paris, Marie Jo, Maria Scotto, Natori, Oscar de la Renta, Prima Donna, Roseta, Simone Perele, Teccia, Verena, Wolford, and more. 

Somehow they have it centered between the image and the right side of the page.

Do you know how to center the text right above that footer text (in the gray box)

That is in an un-named div so I would name it and strip the inline styling out of it
Being named you can use the stylesheet

<div style="position: absolute; top: 25px; right: 5px; width: 570px; font-size: 8px;">
        <span style="font-weight: bold; color: #bf1e2d; font-size: 10px; line-height: 18px;">We Carry the World's Finest Lingerie Brands...</span><br />
        Arlotta, Andre Sarda, B.Up, Bagley Mischka, BedHead, Betsey Johnson, Cass and Co., Chantelle, Cosabella, do mi, Elle Macpherson, Feraud, Foxers, Francis Smiley, Hanky Panky, Huit, Jane Woolrich, Jay Cris, Josie Natori, KayAnna, La Perla, Luisa Stefano, Lou Paris, Marie Jo, Maria Scotto, Natori, Oscar de la Renta, Prima Donna, Roseta, Simone Perele, Teccia, Verena, Wolford, and more.
    </div>

Thank you for your guidance Kobra! I don't understand why this designer can write clean .php with includes and css stylesheet, then get lazy and put inline code.

I have it and it looks nice. Best of all, per your suggestion it's probably coded better now.

I dont have a #footer in my stylesheet :shocking:

Where can I find it? I want to center my footer text...

@dddmx3

Add it to your tpl_footer.php file in the common folder of your template, if not there copy it from template_default and put it in there.

Add the #footer either before

or

Then add the #footer to your stylesheet, and style it.

dddmx3:

I dont have a #footer in my stylesheet :shocking:

Where can I find it? I want to center my footer text...

That depends on which template you use. Custom templates are modified by different people so one may say footer, another may say bottom, another may say whatever the person wants. So it may be the template you are using that may be the problem. (although I would guess most have a footer in the stylesheet)

Figured it out.

I removed
float: left;
and added
text-align: center;
from the rule .legalCopyright {