Announcement

Collapse
No announcement yet.

Fixed Footer problems! Need help with footer!

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Fixed Footer problems! Need help with footer!

    Does anyone know how to 'fix' the footer at the bottom of your site?

    My footer seems to sit where the end of the product/section list content ends. Therefore, when there is little content on the page, the footer moves up so is directly below the product or section boxes.

    As I have side-banner section containing a side menu etc. it will not sit below this unless there is enough content on the page.

    This could be tricky making sure there is enough content on every page to make it sit in the right place!

    The only other way I have been able to put the footer down the bottom is with a full-width fragment layout which makes the fragment sit below the end of the left side-banner area.

    The problem with this is that it leaves a gap if there are not enough products or sections to fill it.

    I have looked at a few 'sticky footer' css tutorials, which mostly talk about changing the CSS for the footer, body, container etc. but I can't seem to apply the theory to my site!

    If anyone has any idea I would be so grateful! I have attached a word document to this post with scree shots of the various pages, showing where the footer sits. I have also included the code in the CSS for the footer and in my main layout.
    Attached Files

    #2
    A footer may move if not cleared other elements. Try: .footer{width: 900px;margin-top: 0 auto;color: #5a5a5a;font-size: 12px;clear:both;} Or in the layout: <div style="clear:both;"></div>
    Peblaco

    Comment


      #3
      Thank you

      Hi,

      Thank you that seems to have worked perfectly!

      I know this is a little unrelated - but you wouldn't by any chance know how to layout two different fragments in different ways on top of eachother?

      The 'full-width' layout I created (as seen in the pictures on the pdf I uploaded before) is useful for adding extra content to the bottom of the page, but when I put a fragment which is right-aligned above it, the right-aligned fragment then gets pushed to the bottom and becomes full width....

      My 'Right-Aligned Layout' looks like this:
      <div style="width: 100%">
      <actinic:block if="%3cactinic%3avariable%20name%3d%22FragmentImageFileName%22%20%2f%3e%20%21%3d%20%22%22">

      <actinic:block if="%3cactinic%3avariable%20name%3d%22IsFragmentImageALink%22%20%2f%3e" >
      <actinic:block if="%3cactinic%3avariable%20name%3d%22IsFragmentLinkToURL%22%20%2f%3e" >
      <a href="<actinic:variable name="FragmentLinkedItemID" />">
      </actinic:block>
      <actinic:block if="%3cactinic%3avariable%20name%3d%22IsFragmentLinkToProduct%22%20%2f%3e" >
      <a rel="nofollow" href="<actinic:variable name="SearchCGIURL"/>?PRODREF=<actinic:variable name="FragmentLinkedItemID" /><actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e">&amp;SHOP=<Actinic:Variable Name="ShopID"/></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e">&amp;NOLOGIN=1</actinic:block>">
      </actinic:block>
      <actinic:block if="%3cactinic%3avariable%20name%3d%22IsFragmentLinkToSection%22%20%2f%3e" >
      <a rel="nofollow" href="<actinic:variable name="SearchCGIURL"/>?SECTIONID=<actinic:variable name="FragmentLinkedItemID" /><actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e">&amp;SHOP=<Actinic:Variable Name="ShopID"/></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e">&amp;NOLOGIN=1</actinic:block>">
      </actinic:block>
      </actinic:block>
      <img src="<actinic:variable name="FragmentImageFileName" />"
      alt="<actinic:variable name="FragmentTitle" encoding="strip" />"
      title="<actinic:variable name="FragmentTitle" encoding="strip" />"
      border="0"
      width="<actinic:variable name="FragmentImageWidth" />"
      height="<actinic:variable name="FragmentImageHeight" />"
      class="image_float_right" />
      <actinic:block if="%3cactinic%3avariable%20name%3d%22IsFragmentImageALink%22%20%2f%3e" >
      </a>
      </actinic:block>

      </actinic:block>

      <actinic:block if="%3cactinic%3avariable%20name%3d%22FragmentAnchor%22%20%2f%3e%20!=%20%22%22">
      <a name="<actinic:variable name='FragmentAnchor' />"></a>
      </actinic:block>
      <h1><actinic:variable Name="FragmentTitle"/></h1>
      <p><actinic:variable Name="FragmentText"/></p>

      </div>


      and the full-width layout:

      <div style="width: 870px; margin-bottom: 20px; padding-top: 10px; padding-bottom: 10px; padding-left: 15px; padding-right: 15px; background: url('http://www.climbingframes.com/images/text-box-top.png') no-repeat top, url('http://www.climbingframes.com/images/text-box-bottom.png') no-repeat bottom, url('http://www.climbingframes.com/images/text-box-side.png');">
      <actinic:block if="%3cactinic%3avariable%20name%3d%22FragmentAnchor%22%20%2f%3e%20!=%20%22%22">
      <a name="<actinic:variable name='FragmentAnchor' />"></a>
      </actinic:block>
      <table width="100%" cellspacing="0" cellpadding="10" border="0">
      <tr>
      <td align="left" valign="top">
      <h1><actinic:variable Name="FragmentTitle"/></h1>
      <br>
      <actinic:variable Name="FragmentText"/>
      </td>
      </tr>
      </table>
      </div>



      Is it possible to stop the 'full-width' layout from affecting the 'right-aligned' layout when they are on top of eachother?

      They both work correctly when used on their own.

      Thanks for your help...

      Abbi

      Comment

      Working...
      X