Trying to achieve modern footer appearance.

[DieuxSoldat_04]

Zen Cart v1.3.8a clean install. No add-ons have been installed. Server is running PHP 5.2.8 and MySQL 5.0 configured to have all green during pre-installation check. I did look through the Tutorials but as for searching the forums, I wasn't quite sure how to word this inquiry. Just wanted to first point out, I can't use return for some reason while making a post so I apologize if this paragraph jumps from topic to topic randomly. I was wondering how I could modify Zen Cart to allow a three columned footer appearance like most modern sites. Here are two examples, Aqua Desiree and New Egg (granted New Egg has 5 columns where as I only need three like the former site). As you can see they aren't exactly the copyright portion of the footer but appear right above it, I guess some what like a site map or shortcuts if you don't want too many tabs at the top but organized into columns. So how can I achieve this appearance on Zen Cart? Thanks in advance for any help Zenners. Warm Regards, Jason Xiao

[kobra]

Use div Id's that exist or create ones and a total of 3. Define one as a class of .back, another without a class and last one as a class of .forward.

Through css you give each a width of say 32%.
The back will align left the forward will align right and when in proper order the center will be centered

[DieuxSoldat_04]

Hey kobra,

I have another site and it has the same setup; JxH Network. Here is the code I used:

<div id="footer">
        <div id="footer-left">
            <h1 class="green">CONTACT US</h1>
            <ul>
                <li>
                <div id="div_initiate" style="position:absolute; z-index:1; top: 40%; left:40%; visibility: hidden;">
                    <a href="javascript:Live.initiate_accept();"><img src="http://jxhnetwork.com/livechat/templates/G/images/initiate.gif" border="0"></a>
                    <br>
                    <a href="javascript:Live.initiate_decline();"><img src="http://jxhnetwork.com/livechat/templates/G/images/initiate_close.gif" border="0"></a>
                </div>
                <script type="text/javascript" language="javascript" src="http://jxhnetwork.com/livechat/class/js/include.php?live&text"></script></li>
                <li>E-Mail: support@jxhnetwork.com</li>
                <li>MSN: JxHNetwork##########################</li>
            </ul>
        </div>
        <div id="footer-middle">
            <h1 class="green">COMPANY INFO</h1>
            <ul>
                <li><a href="#">RSS Feed</a></li>
                <li><a href="#">Affiliates</a></li>
                <li><a href="#">Testimonials</a></li>
                <li><a href="#">FAQ</a></li>
                <li><a href="#">Terms of Service</a></li>
                <li><a href="#">Privacy Policy</a></li>
            </ul>
        </div>
        <div id="footer-right">
            <h1 class="green">AFFILIATES</h1>
            <ul>
                <li><a href="#">Site Name</a></li>
                <li><a href="#">Site Name</a></li>
                <li><a href="#">Site Name</a></li>
            </ul>
        </div>
    </div>

The CSS rules are as follows:

#footer {
    clear: both;
    background-image: url(../images/footer.jpg);
    background-repeat: no-repeat;
    background-color: #121212;
    background-position: top;
    height: 250px;
    padding-bottom: 5px;
    }
#footer h1 {
    font-size: 18px;
    font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
    font-weight: bold;
    padding: 0px 0px 3px 0px;
    border-bottom: dotted;
    border-bottom-color: #333333;
    }
#footer ul {
    list-style-type: none;
    font-size: 13px;
    }
#footer ul li {
    line-height: 26px;
    border-bottom: dotted;
    border-bottom-color: #333333;
    text-decoration: none;
    color: #666666;
    display: block;
    padding: 0px 10px;
    }
#footer ul li a {
    text-decoration: none;
    color: #666666;
    display: block;
    }
#footer ul li a:hover {
    background-color: #212525;
    color: #FFCC00;
    }
#footer-left, #footer-middle, #footer-right {
    float: left;
    width: 301px;
    padding: 20px;
    }

I'm assuming I can add the CSS code to style.css but I'm not sure where I should place the HTML code.

Thanks for the response kobra.

Warm Regards,
Jason Xiao

[kobra]

Try looking at the structure for tpl_footer.php
and styles are added to your stylesheet.css

[DieuxSoldat_04]

Would my codes as is be fine or are there modification needed for it to display on Zen Cart properly?

- Jason Xiao

[kobra]

I would have to put it up the same as you to answer this