CODEWITHSUNDEEP
htmlcssorchardcms
Zerloke
Zerloke

Reputation: 69

Sticky footer Orchard CMS

I am trying to apply a sticky footer but having problems to implement this within Orchard.

In a previous website I have applied the following sticky footer method successfully: http://www.cssstickyfooter.com/using-sticky-footer-code.html

I just cannot get a sticky footer to work within Orchard, nor can I find anything about it.

Already tried deleting all the existing CSS to attempt to find out why its not working without any success. Not getting any wiser when inspecting the HTML with firebug either.

Template used: Custom theme based Theme Machine (structure wise unchanged).

Problem:

The zone padding in site.css is giving these odd problems. But how can i remain the padding from this so i can achieve a sticky footer?

Because without the zone padding all the necessary padding for all the zones is gone.

/* Zones */
.zone 
{
    padding: 10px;
}

Or is there a other method more suited for Orchard to achieve a sticky footer?

Side note question

What exactly is the purpose of @tag.StartElement and @tag.EndElement ?

CSS: (My footer is exactly 40px in height)

html, body
{
  height: 100%;
}

#layout-wrapper { min-height: 100%; }

#layout-footer 
{
    position: relative;
    margin-top: -40px; /* negative value of footer height */
    clear:both;
    background-color: #030e27;
}

Layout.cshmtl:

@tag.StartElement
@if (Model.Header != null) 
{
    <header>
        <div id="layout-header" class="group">
            <div id="header">
                @Zone(Model.Header)
            </div>
        </div>
        <div id="layout-header-bottom"></div>
    </header>   

}

@if (Model.Navigation != null) 
{
    <div id="layout-navigation" class="group">
        <div id="navigation">
            @Zone(Model.Navigation)
        </div>
    </div>
}


@if (Model.Featured != null) {
<div id="layout-featured" class="group">
    @Zone(Model.Featured)
</div>
}
@if (Model.BeforeMain != null) {
<div id="layout-before-main" class="group">
    @Zone(Model.BeforeMain)
</div>
}

<div id="layout-main-container">
<div id="layout-main" class="group">
    @if (Model.AsideFirst != null) {
    <aside id="aside-first" class="aside-first group">
        @Zone(Model.AsideFirst)
    </aside>
    }
    <div id="layout-content" class="group">
        @if (Model.Messages != null) {
        <div id="messages">
            @Zone(Model.Messages)
        </div>
        }
        @if (Model.BeforeContent != null) {
        <div id="before-content">
            @Zone(Model.BeforeContent)
        </div>
        }
        @* the model content for the page is in the Content zone @ the default position (nothing, zero, zilch) *@
        @if (Model.Content != null) {
        <div id="content" class="group">
            @Zone(Model.Content)
        </div>
        }
        @if (Model.AfterContent != null) {
        <div id="after-content">
            @Zone(Model.AfterContent)
        </div>
        }
    </div>
    @if (Model.AsideSecond != null) {
    <aside id="aside-second" class="aside-second">
        @Zone(Model.AsideSecond)
    </aside>
    }
</div>
</div>

@if (Model.AfterMain != null) {
<div id="layout-after-main" class="group">
    @Zone(Model.AfterMain)
</div>
}
@if (Model.TripelFirst != null || Model.TripelSecond != null || Model.TripelThird != null) {
<div id="layout-tripel-container">
<div id="layout-tripel" class="group">@* as in beer *@
    @if (Model.TripelFirst != null) {
    <div id="tripel-first">
        @Zone(Model.TripelFirst)
    </div>
    }
    @if (Model.TripelSecond != null) {
    <div id="tripel-second">
        @Zone(Model.TripelSecond)
    </div>
    }
    @if (Model.TripelThird != null) {
    <div id="tripel-third">
        @Zone(Model.TripelThird)
    </div>
    }
</div>
</div>
}
@tag.EndElement
<div id="layout-footer" class="group">
    <footer id="footer">
        <div id="footer-quad" class="group">
            @if (Model.FooterQuadFirst != null) {
            <div id="footer-quad-first">
                @Zone(Model.FooterQuadFirst)
            </div>
            }
            @if (Model.FooterQuadSecond != null) {
            <div id="footer-quad-second">
                @Zone(Model.FooterQuadSecond)
            </div>
            }
            @if (Model.FooterQuadThird != null) {
            <div id="footer-quad-third">
                @Zone(Model.FooterQuadThird)
            </div>
            }
            @if (Model.FooterQuadFourth != null) {
            <div id="footer-quad-fourth">
                @Zone(Model.FooterQuadFourth)
            </div>
            }
        </div>
        @if(Model.Footer != null) {
        <div id="footer-sig" class="group">
            @Zone(Model.Footer)
        </div>
        }
    </footer>
</div>

Update

Derk's solution combined with removing the following Orchard CSS seems to be doing the trick:

/* Clearing Floats
***************************************************************/

.group:after 
{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}


.zone:after, .widget-control:after /* .zone:after self clears every zone container - .widget-control:after self clears any floats used in a widget */
{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Update 2

Instead of removing the clear floats css changing content: "." to content: "" seems also to be having the same effect.

A explanation to the cause of this would be greatly appreciated, cheers.

Regards, Zer.

Upvotes: 2

Views: 1042

Answers (1)

sheriffderek
sheriffderek

Reputation: 9043

For that padding issue, I would encourage you to check out this border-box method. It moves the padding inside the div instead of outside. So you don't have to calculate padding and div widths etc. in the whole project. It's so helpful!

/* apply a natural box layout model to all elements */
* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

Just drop it at the top of your styles! It might take some adjusting to get a site molded back into shape, but It will be worth it.

but for now: add it just to your .zone thing: 

.zone {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    padding: 10px;
}

You can read more about that here: Paul Irish talks about border-box

For the footer:

Check out this pen: Weighted Footer

You already have html and body in your code - but do you have a wrapper of some sort?

If not, you need to put one in:

<div class="main-wrapper">

    <header></header>

    <section class="main-content"></section>

    <div class="footer-buffer">(BUFFER)</div>

</div> <!-- end .main-wrapper -->

<footer></footer>

The very basic structure is here. So check that it, or something similar is in place on your theme.

html, body {
  height: 100%;
}

.main-wrapper {
  min-height: 100%;
  height: auto !important; /* for IE 6 */
  height: 100%; /* for IE 6 */
  margin: 0 auto -4em;

  /* new addition */
  overflow: hidden;
}

footer, .footer-buffer {
  height: 4em;
}

I would personally put width: 100%; and float: left; on all of these... But you need to make it as simple as possible to figure out the problem. Then you'll probably want another div like .inner {max-width: 980px; margin: 0 auto;} Inside each section to make that standard column website look. I would back up your CSS file and do some more testing like you were doing.

I hope that helps! I had spent so many hours and day fighting that sticky footer!

Upvotes: 3

Related Questions