Themes

Sticky footer appears in edit mode but hides behind elements when viewing normally?

Permalink July 03, 2012 at 3:16 AM

Hi guys,

I'm sure this is ridiculously simple, but its driving me wild! I have a site which is built with divs that uses the sticky footer, a footer I've used before with no issue.. but when i view the site in edit mode i can see the footer underneath the body container, when i view the page the footer is sitting behind the slider (above the body container div!?

My full.php template looks like this:

<?php 
defined('C5_EXECUTE') or die("Access Denied.");
$this->inc('elements/header.php'); ?>
<div class="slider"><?php $a = new Area('HeaderImages'); $a->display($c);?></div>
<div class="bodycontainer">
<?php $a = new Area('Main'); $a->display($c);?>
</div>
<div> </div>
<?php  $this->inc('elements/footer.php'); ?>

and the css looks like this:

html {
   height:100%!important;
   margin:0px;
   padding:0px;
   background-color:#000;
}
body {
   height:100%!important;
   margin:0px;
   padding:0px;
}
.wrapper {
   min-height: 100%;
   height: auto !important;
   height: 100%;

Viewing 15 lines of 85 lines. View entire code block.

 
html {
   height:100%!important;
   margin:0px;
   padding:0px;
   background-color:#000;
}
body {
   height:100%!important;
   margin:0px;
   padding:0px;
}
.wrapper {
   min-height: 100%;
   height: auto !important;
   height: 100%;
   margin: 0 auto -4em;
   /*min-height: 100%;
   /*height: auto !important;
   height: 100%;
   margin: 0 auto;*/
}
.head {
   width:100%;
   height:165px;
   background-image:url(images/headerbg2.png);
   border-bottom: 2px solid #fff;
   background-repeat:repeat;
}
.headlogo {
   margin:0 auto!important;
   width: 425px;
   height: 65px;
   padding: 30px 0px 30px 0px;
}
.nav {
   text-align:center;
   width:980px;
   height:35px;
   margin:0 auto;
   /*background-color:#ccc;*/
}
.slider {
   text-align:left;
   width:980px;
   height:350px;
   margin:0 auto;
   background-color:#fff;
   margin-bottom:0px;
   margin-top:7px;
}
.bodycontainer {
   text-align:left;
   clear:both;
   width: 970px!important;
   padding: 5px!important;
   margin:0 auto;
   background-color:#FFF;
   overflow:hidden;
}
/*Footer Content*/
 
.push2 {
height: 4em;
clear: both;
}
.footer2{
height: 80px;
margin-top:-30px;
width: 970px!important;
background-color: #222;
clear: both;
margin:0 auto;
padding:5px;
}
.footerleft {
   padding-top: 10px;
   float:left;
   width:400px;
   text-align:left!important;
}
.footerright {
   padding-top: 10px;
   float:right;
   width:550px;
   text-align:right!important;
}

my footer.php looks like this

<?php  defined('C5_EXECUTE') or die("Access Denied."); ?>
</div>
<div class="push2"></div>
</div>
 <div class="footer2">
 <div class="footercontent">
 <div class="footerleft">
<span class="footertext">© <?php echo date('Y')?> <a href="<?php echo DIR_REL?>/" class="footertext"><?php echo SITE?></a>
content here
</div>
<div class="footerright">
footer right content 
</div>
</div>
</div>

Viewing 15 lines of 18 lines. View entire code block.

 
<?php  defined('C5_EXECUTE') or die("Access Denied."); ?>
</div>
<div class="push2"></div>
</div>
 <div class="footer2">
 <div class="footercontent">
 <div class="footerleft">
<span class="footertext">© <?php echo date('Y')?> <a href="<?php echo DIR_REL?>/" class="footertext"><?php echo SITE?></a>
content here
</div>
<div class="footerright">
footer right content 
</div>
</div>
</div>
<?php Loader::element('footer_required'); ?>
</body>
</html>

anyone got any ideas on how to make the div sit nicely under the bodycontainer

thanks for looking!

jero replied on Jul 3, 2012 at 3:28 am Permalink Reply

I'd be suspicious of the height values in the CSS. You might try switching to an different style sheet when the page is in edit mode - one that doesn't use heights, but uses min-height in px instead

In your template try this *after* the regular css.
[code]
if ($c=>isEditMode()){ ?
<link rel="stylesheet" href="<?php echo $this->getThemePath()?>/edit/css" />
<?php } ?>

You could of course substitute a completely different css instead of overriding just the elements with height.

I've found also that if you've got any absolute or fixed position elements, you can override their positioning in the edit.css too. This is vital sometimes, if you have an area positioned on top of another.

obaluba replied on Jul 3, 2012 at 3:34 am Permalink Reply

Thanks for your reply Jero, In edit mode it all looks OK, its when i publish the page that the footer vanishes! is this to do with the heights of elements do you think?

thanks for looking

jero replied on Jul 3, 2012 at 3:45 am Permalink Reply

When in edit mode, you've got a cleared <div> around the areas, and a
trailing "add to area" <div> too.

You could try adding a dollop of clear:both after various areas.

You could try adding <div style="clear:both"></div> in various places,
particularly before/after the two floated footer divs.

On 03/07/2012 19:34, concrete5 Community wrote:

mnakalay replied on Jul 3, 2012 at 3:48 am Permalink Reply

Could you show us the whole html generated (not the php) I think it would be easier to see what's going on

obaluba replied on Jul 3, 2012 at 4:29 am Permalink Reply

no problem guys, thanks for looking

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>About</title>
<meta name="generator" content="concrete5 - 5.5.2.1" />
<script type="text/javascript">
var CCM_DISPATCHER_FILENAME = '/index.php';
var CCM_CID = 118;
var CCM_EDIT_MODE = false;
var CCM_ARRANGE_MODE = false;
var CCM_IMAGE_PATH = "/concrete/images";
var CCM_TOOLS_PATH = "/index.php/tools/required";
var CCM_BASE_URL = "http://www.domain.co.uk";

Viewing 15 lines of 86 lines. View entire code block.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
 
 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>About</title>
<meta name="generator" content="concrete5 - 5.5.2.1" />
 
<script type="text/javascript">
var CCM_DISPATCHER_FILENAME = '/index.php';
var CCM_CID = 118;
var CCM_EDIT_MODE = false;
var CCM_ARRANGE_MODE = false;
var CCM_IMAGE_PATH = "/concrete/images";
var CCM_TOOLS_PATH = "/index.php/tools/required";
var CCM_BASE_URL = "http://www.domain.co.uk";
var CCM_REL = "";
 
</script>
 
 
<link rel="stylesheet" type="text/css" href="/concrete/css/ccm.base.css?v=1c7b027ffabee4befa71a47e569df0c9" />
<script type="text/javascript" src="/concrete/js/jquery.js?v=1c7b027ffabee4befa71a47e569df0c9"></script>
<script type="text/javascript" src="/concrete/js/ccm.base.js?v=1c7b027ffabee4befa71a47e569df0c9"></script>
<style type="text/css"> 
#blockStyle110Main6 {background-repeat:no-repeat; padding:0 0 0 10px; } 
</style>
<link rel="stylesheet" type="text/css" href="/packages/simple_image_gallery/blocks/simple_image_gallery/view.css?v=1c7b027ffabee4befa71a47e569df0c9" />
<link rel="stylesheet" type="text/css" href="/packages/simple_image_gallery/blocks/simple_image_gallery/fancybox/jquery.fancybox-1.3.1.css?v=1c7b027ffabee4befa71a47e569df0c9" />
<script type="text/javascript" src="/packages/simple_image_gallery/blocks/simple_image_gallery/fancybox/jquery.fancybox-1.3.1.pack.js?v=1c7b027ffabee4befa71a47e569df0c9"></script>
<link rel="stylesheet" type="text/css" href="/packages/herent_backstretch/blocks/herent_backstretch/css/backstretch.css?v=1c7b027ffabee4befa71a47e569df0c9" />
<script type="text/javascript" src="/packages/herent_backstretch/blocks/herent_backstretch/js/jquery.backstretch.min.js?v=1c7b027ffabee4befa71a47e569df0c9"></script>
<link rel="stylesheet" type="text/css" href="/packages/amiant_css3_menu/blocks/amiant_css3_menu/view.css?v=1c7b027ffabee4befa71a47e569df0c9" />
 
<!-- Site Header Content //-->
<link rel="stylesheet" media="screen" type="text/css" href="/index.php/tools/css/themes/Theme/style.css" />
<link rel="stylesheet" media="screen" type="text/css" href="/index.php/tools/css/themes/Theme/typography.css" />
 
</head>
<body>
<div class="container">
       <div class="head">
<div class="headlogo"><img src="/themes/images/logo.png"/></div>
<div class="nav">
   <div class="amiant-css3-menu-navigation-bar">
 
<ul class="navigation-menu nav"><li><a href="/"  >Home</a></li><li class="nav-selected nav-path-selected"><a class="nav-selected nav-path-selected"  href="/about/">About</a></li><li><a href="/services/"  >Services</a></li><li><a href="/valuations/"  >Valuations</a></li><li><a href="/contact-us/"  >Contact Us</a></li></ul>
   </div>
</div>
 
      <div class="spacer"></div>
 
      <div class="slider"><img border="0" class="ccm-image-block" alt="" src="/files/1913/4027/6410/gt7.jpg" width="980" height="350" /></div>
<div class="bodycontainer">
<div class="rsb_container">   <div id="blockStyle110Main6" class=" ccm-block-styles" >
<h1>About us</h1>
content here
</div><script type="text/javascript">
   $.backstretch("http://www.domain.co.uk/files/5813/4027/5799/about.jpg", {speed: 150, centeredX: 1, centeredY: 1 });
</script>
</div>
<div class="rsb_right"><h2>Gallery</h2>
<p>Right Side Bar Content</p>
</div>
 
<script type="text/javascript">
$(document).ready(function(){
   $('a[rel="fancybox105"]').fancybox({
      'transitionIn' : 'elastic',
      'transitionOut' : 'elastic',
      'titleShow' : false,
      'titlePosition' : 'none'
   });
});
</script>
 
</div>
</div>
<div style="clear:both"></div>
</div>
<div class="push2"></div>
</div>
 <div class="footer2">
 <div class="footercontent">
 <div style="clear:both"></div>
 <div class="footerleft">
<span class="footertext">© 2012 <a href="/" class="footertext"></a>
<br />
content here</span>
</div>
<div class="footerright">
 <span class="footertext"> content here</span></div>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>

jero replied on Jul 3, 2012 at 4:33 am Permalink Reply

According tohttp://validator.w3.org/

you have an extra closing </div>

<div class="push2"></div>
</div><=============

Maybe that's the issue?

obaluba replied on Jul 3, 2012 at 4:37 am Permalink Reply

thanks Jero,

removed that but no luck! still not showing the footer!

frustrating!

jero replied on Jul 3, 2012 at 4:43 am Permalink Reply

Can't see anything obvious from looking at the code. Any chance of posting the URL, or failing that, PM me.

jero replied on Jul 3, 2012 at 5:10 am Permalink Best Answer Reply

I used Firebug to remove teh 165px height from your .head class allowing the head to grow to its natural height, and the footer pops out at the bottom.

Looking at your html, you've got your slider and bodycontainer within the head, and they are overflowing the containing head, by a rather large amount. The footer isn't within the head, and thus is sitting just below the head.

obaluba replied on Jul 3, 2012 at 5:23 am Permalink Reply

Thanks Jero, thats sorted it, thanks for your time looking at this, much appreciated!

jero replied on Jul 3, 2012 at 5:25 am Permalink Reply

You're welcome.

Forums

Themes

Sticky footer appears in edit mode but hides behind elements when viewing normally?

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?