Jump to content

Archived

This topic is now archived and is closed to further replies.

nickvdt14

Height of content area

Recommended Posts

nickvdt14    1
nickvdt14

I managed to find an old topic similar to what I'm looking to achieve, but wasn't sure if it'd still apply to DMS.

 

Some of my pages do not have enough content to fill up the screen height. And in these cases the footer appears in the middle of the screen with white underneath. I'd like the footer to be stuck to the bottom of the page in these instances. 

 

Any help would be much appreciated!

Share this post


Link to post
Share on other sites
Jake    74
Jake

Hi nickvdt14 - I think a similar way to accomplish this in DMS would be to add the following custom CSS. Let is know if that does the trick!

 

#page-main {min-height: xxxpx;}


Have you searched the forums yet or checked out the DMS user docs?

PageLines geek, blogging at MyUntangledLife.com

Share this post


Link to post
Share on other sites
nickvdt14    1
nickvdt14

Hey Jake!

 

Apologies, I don't think I explained it properly. I want the page to size to the browser window, so that if the content isn't longer than the height of the page the footer won't be stuck in the middle of the page with a white blank space underneath.

Share this post


Link to post
Share on other sites
Rob    547
Rob

Add this sort of CSS and adjust accordingly:

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:300px;
   width:100%;
}

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
nickvdt14    1
nickvdt14

Thanks guys! The footer is sticky now, but it's still getting pushed to the middle of the page with a white gap underneath on pages without much content.

Share this post


Link to post
Share on other sites
nickvdt14    1
nickvdt14

Also, the footer is in the same position on each page, stuck around the middle of the page slightly more towards the bottom.

Share this post


Link to post
Share on other sites
Rob    547
Rob

I think you're going to need a developer's help for this. DMS isn't designed to work with sticky footers.  The CSS solution was an attempt to help, but honestly, I'm not a programmer.

 

The problems you're experiencing are possibly caused by a plugin.  Can we have a link to the site?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
nickvdt14    1
nickvdt14

That's no problem! You guys support is always top notch :) 

 

http://dreamerphotos.com/nightlife/  <--- normal page

 

http://dreamerphotos.com/info/bio-calvin/  <--- page without a lot of content

 

The footer doesn't have to be sticky, just thought that'd be the best way to get it to stay at the bottom of the browser window for pages that don't have much content. It's also quite possible I broke something with some inelegant custom code that I added.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

 

To my knowledge, you won't be able to achieve a sticky footer without the use of a hook. You will probably need to use filters too. Its more complex than you think. You will need to most likely, empty your footer and use a hook that is outside of the #site div. Then you can use CSS to accommodate your sticky footer. 

 

If you're unsure how to achieve this, I think the best course of action would be to contact one of our third party developers.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

I haven't tried that, give it a go and see how it works, regardless of the outcome reply here and let us know.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
nickvdt14    1
nickvdt14

Okay sure! Will give it a run.

Share this post


Link to post
Share on other sites
sheilahoff+    63
sheilahoff

Looks like that worked! Please share exactly what you did that made this work in DMS! Congrats!


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
nickvdt14    1
nickvdt14

Hey again!

 

Didn't manage to get the footer to stay at the bottom without it becoming sticky, but managed to make it stick at the bottom, which I'm happy with. I think Rob's code works fine, it's just that when I was in editor mode it didn't look like it had worked. You have to turn off editor mode to be able to see it. I was dumb and never bothered to check on a different computer until later.

 

Here's the code I added, of course just ignore the shadow bit.

 

 

html,body
{
  height: 100%;
  padding: 0px;
  margin: 0px;
}
 
footer {
position: fixed;
bottom: 0;
width: 100%;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.25);
}
 
Hope this helps someone else in the future!

Share this post


Link to post
Share on other sites
Rob    547
Rob

Great!


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

×