Sticky footer? got the header to work, but footer : nope

  • 8 June 2013
  • 4 replies
  • 30 views
F

hi guys:
thank you for your time in advance.

(dont worry about the navigation of the following URL being all over the place. i got that under control. the problem is the “Sticky footer” that is not working.

i got the “sticky header” (as you can see) to work. Not my script. got it from somewhere. am not a programmer, but a snippet-er.

So does anybody know why this snippet is not working for the footer? and yes, i know: preview doesnt quite do it. have to publish to see solid results on custom css. and i did publish - change it - publish - change it - publish,…

http://giveaway.fpverlag.de/_labor_tests

sticky footer not working.
hoping on insights.

#lp-pom-box-119 {
position:fixed!important;
left:0px!important;
bottom:0px!important;
height:40px!important;
width:100%!important;
background:#999!important;
}

/* IE 6 */
* html #lp-pom-box-119 {
position:absolute!important;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+‘px’)!important;
}
–>

4 replies

F

figured it out.

  1. Sticky navigation on top works fine (coincidence?)
    here the CSS to make it stick:

#lp-pom-box-87 {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 99;
width: 100%!important;

  1. not all CSS works on items created within the editor (or - CSS works not on all items created within the editor … i am not sure. but …)

using the ID of items (boxes, sections,…) that were created within the editor will not accept any of the neccessary CSS to make the footer stick.

so:
WORKAROUND:

a) create two landingpages:
a1) one will contain only whatever it is you want to show in your sticky footer.
a2) the other will be your main site (page) that will house (call into itself) the sticky footer.

  1. within the landinpage that houses your sticky footer (the main page) Draw your own box using CSS and a custom HTML item in the editor. that way you get to completely control every aspect of the item instead of the ones created from within the editor.
  2. within the div: draw an iframe.
  3. into the iframe pull the contents that you created in step a1) above

here is the CSS and the custom html

CSS for stickyfoot:

.stickyfoot
{
height: 40px; /*Specify Height*/
width: 760px; /*Specify Width*/

background-color: orange; /*Add a background color to the box*/
text-align:center; /*Align the text to the center*/
z-index:99;
position:fixed!important;
left:center!important;
bottom:0px!important;
}

AND HERE COMES THE CUSTOM HTML:

F

sorry: forgot to paste:
here the custom html that will pull the content of the sticky-footer

…

would love to hear back from you guys if there is an easier way of accomplishing this.

thanks anyway for an awesome product, that hast helped more than you know.

F

for some reason its not taking the html:
one more try:

"

F

welll… it wont let me.

anyway, just make an iframe within a div. the div gets the class of whatever you call your stickyfoot CSS (see above)

Reply


Terms & ConditionsCookie settings