Layout Customization

[Meshach]

Dear Meshach,

Thanks for your suggestion. I will create a separate css for IE, but how to make these 3 objects line on the same row? Any idea?

Thank you and have a nice day!

Try putting margin-left:50px; on the banner div. (In your IE only stylesheet).

[faithtong]

Hi,

Thanks for your suggestion! I have already inserted the margin-left to this banner six. However, it still can't pull the banner to the same row with 2 of my images but just giving some space before the banner show in a new line.

[Meshach]

Ahh..

I see.

Try putting clear:left; on the banner.

[tony_sar]

my suggestion would be to create a <div></div> tag in your footer where you want your SSL images to appear. currently images are applied directly into body tag .

make sure you also add ID as well
<div id = "footerLogo"></div>

this way using CSS you can control position of your images without effecting other elements such as your banner .

[limelites]

Hi,

I'm no expert here but I took a quick look at your page source and I see you're using a few position: absolute commands.... Those are no good for you as the position of the object will change from screen size to screen size.

On my 24" monitor, your footer banner is aligned way off your main page to the left.

Try replacing the word 'absolute' with 'relative' and then re-postion the coordinates.

I'm not sure why you're using a position command to control your banner though? Why not wrap it in <center></center> tabs?

This is my tpl_footer.php file for limelites.co.uk which achieves what you're looking for:

<!--bof- site copyright display -->
<div id="siteinfoLegal" class="legalCopyright"><?php echo FOOTER_TEXT_BODY; ?> Designed by <a target="_blank" href="URL_TO_YOUR_HOMEPAGE">YOUR_STORE</a></div>
<!--eof- site copyright display -->

<!--bof- CARDS display -->
<center>
<a href="URL_TO_PAYMENTS_PAGE"><?php echo zen_image(DIR_WS_TEMPLATE.'images/YOUR_CARDSIMAGE.jpg'); ?></a>
</center> 
<!--eof- CARDS display -->

[faithtong]

Hi,

I'm no expert here but I took a quick look at your page source and I see you're using a few position: absolute commands.... Those are no good for you as the position of the object will change from screen size to screen size.

On my 24" monitor, your footer banner is aligned way off your main page to the left.

Try replacing the word 'absolute' with 'relative' and then re-postion the coordinates.

I'm not sure why you're using a position command to control your banner though? Why not wrap it in <center></center> tabs?

This is my tpl_footer.php file for limelites.co.uk which achieves what you're looking for:

<!--bof- site copyright display -->
<div id="siteinfoLegal" class="legalCopyright"><?php echo FOOTER_TEXT_BODY; ?> Designed by <a target="_blank" href="URL_TO_YOUR_HOMEPAGE">YOUR_STORE</a></div>
<!--eof- site copyright display -->

<!--bof- CARDS display -->
<center>
<a href="URL_TO_PAYMENTS_PAGE"><?php echo zen_image(DIR_WS_TEMPLATE.'images/YOUR_CARDSIMAGE.jpg'); ?></a>
</center> 
<!--eof- CARDS display -->

Hi,

I tried to set all to "relative" eventually it messed up all the position and still, the third image (SSL logo) is not appearing!

[faithtong]

my suggestion would be to create a <div></div> tag in your footer where you want your SSL images to appear. currently images are applied directly into body tag .

make sure you also add ID as well
<div id = "footerLogo"></div>

this way using CSS you can control position of your images without effecting other elements such as your banner .

Hello,

I put all these 3 objects (paypal logo, bannersix & ssl logos) in tpl_footer.php as below,

<!--bof paypal image display -->
<img src="images/paypal_horizontal.gif" border="1" width="155" height="66" alt="paypal solution" align="left" valign="center">
<!--eof paypal image display -->

<!--bof-banner #6 display -->
<?php
  if (SHOW_BANNERS_GROUP_SET6 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET6)) {
    if ($banner->RecordCount() > 0) {
?>
<div id="bannerSix" style="position:absolute; left:420px; width:468px; height:60px;" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>
<?php
    }
  }
?>
<!--eof-banner #6 display -->

<!--bof SSL logo display -->
<html>
<IMG STYLE="position:absolute; left:893px; width:85px; height:46px; border:1px;" SRC="images/ssl.gif" ALT="SSL Secured Site"></html>
<!--eof SSL logo display -->

Is there anyway to improve this? Sorry, I am really new and not familiar with all these codings. Whenever I need a code, I just google it then paste to my file. I don't understand them well and that's why I kept asking stupid question!

[faithtong]

Hi,

BTW, I found out that I can't navigate to the link of my first item appeared at my left Category Box in Firefox. No matter which item (Categories_Products or any sideboxes) move to the top, it will not show the link in Firefox, when the mouse move over, it will not show the hover color either.

Any idea how to to fix this bug?

[limelites]

Hi,

BTW, I found out that I can't navigate to the link of my first item appeared at my left Category Box in Firefox. No matter which item (Categories_Products or any sideboxes) move to the top, it will not show the link in Firefox, when the mouse move over, it will not show the hover color either.

Any idea how to to fix this bug?

One thing at a time FaithTong, let's fix your footer first :-) Can you copy and paste your entire tpl_footer.php file code here? This should be relatively simple to fix first.

[faithtong]

Ahh..

I see.

Try putting clear:left; on the banner.

I have put this clause in my css stylesheet as below,
#bannerSix (
clear:left;
)

But it still can't work. HELP~~~~