Posted on

CSS – How to keep footers at the bottom of the page

How to keep footers at the bottom of the page?

HTML:
<div id="container"> <div id="header"></div> <div id="body"></div> <div id="footer"></div> </div>
CSS:
html, body { margin:0; padding:0; height:100%; }
#container { min-height:100%; position:relative; }
#header { background:#ff0; padding:10px; }
#body { padding:10px; padding-bottom:60px; /* Height of the footer */ }
#footer { position:absolute; bottom:0; width:100%; height:60px; /* Height of the footer */ background:#6cf; }

Resource:
https://pixel2pixeldesign.com/footers-bottom-page/

Posted on

CSS – Dimming Screen, waiting for Ajax Call

To dim the screen while waiting for an Ajax call to finish:

CSS

#loading-ajax {
    background: rgba(0,0,0,.2) url('/images/ajax-loader.gif') no-repeat 50% 50%;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}

html

<div id="loading-ajax" style="display:none"></div>
(...)
<a href="javascript:;" onclick="start_ajax();"><img src="/images/my_img.gif" /></a>

javascript

function start_ajax()
{       jQuery("#loading-ajax").show();
        jQuery.get( "my_ajax_url", {
                action: "do_something"
                } )
        .done(function( data ) {
                jQuery("#loading-ajax").hide();
                if(data == 'error') alert('error detected')
                else alert(data);
        });
}

Resource:
http://stackoverflow.com/questions/7046484/dim-the-page-and-show-a-loading-indicator

Posted on

CSS – Two Divs Side by Side

How to put two divs side by side?

<style type="text/css">
#my-container {
    width: 80%;
    margin: 20px auto 10px auto;
}
/* FIXED WIDTH DIVISION */
.my-left-div {
    float: left;
    width: 285px;
    background-color: #555;
    color: #fff;
    padding: 20px;
}
/* VARIABLE WIDTH DIVISION */
.my-right-div {
    margin-left: 335px;
    background-color: #400;
    color: #fff;
    padding: 20px;
}
</style>
<div id="my-container">
  <div class="my-left-div">Duis scelerisque dapibus purus, sodales mollis urna iaculis vel. Vestibulum a tortor eu metus rutrum laoreet at vitae urna.</div>
  <div class="my-right-div">Cras sagittis diam ligula, vel tincidunt tellus auctor non. Fusce nec lacus viverra, interdum mauris nec, rutrum nibh. Ut vitae pellentesque ligula. Morbi eu urna vitae lorem gravida imperdiet. Nulla laoreet tortor eget enim elementum hendrerit. Ut gravida, diam non lobortis finibus, ligula sapien rutrum magna, quis ultrices augue dui at nisi. Donec pellentesque, nisl a sollicitudin condimentum, libero magna varius velit, nec blandit ex lorem eu nulla. Proin nisl leo, vehicula nec gravida sit amet, viverra in lectus. Praesent vitae urna in massa interdum auctor. Phasellus ultricies risus non mauris sodales, eget gravida erat sagittis. Aliquam erat volutpat. Phasellus euismod eu mauris a mattis. Sed pellentesque ex vitae lacus porttitor molestie. Maecenas hendrerit vel leo ut lacinia.</div>
</div>
Posted on

CSS – Position a Div on top of another Div

How to position a <div> on top of another <div>?

<style type="text/css">
#container {
    position: relative;
    left: 40px;
    top: 40px;
}
#back {
    position: relative;
    top: 0px;
    left: 0px;
    background-color: #C60;
    width: 300px;
    height: 300px;
}
#front {
    position: absolute;
    top: 50px;
    left: 50px;
    color: #FFF;
    background-color: #930;
    font-size: 36px;
    border: solid 1px #FFF;
    padding: 20px;
}
</style>
<div id="container">
  <div id="back"></div>
  <div id="front">FRONT</div>
</div>

The code above will look like this:

div_on_div

Posted on

CSS – Align a Div on a Page

Align a <div> on a page (based on the width of the content):

<style type="text/css">
.outerdiv {
    margin-top: 40px;
    text-align: center;
}
.innerdiv {
    display: inline-block;
    *display: inline; /* Hack for IE7+ */
    zoom: 1; /* Hack for IE7+ */
    background-color: #CCC;
    padding: 20px;
    text-align: left;
}
</style>
<div class="outerdiv">
  <div class="innerdiv">This is the dynamic text!<br />
    <br />
    Enjoy this example.</div>
</div>

Resources:
http://stackoverflow.com/questions/6544852/ie7-does-not-understand-display-inline-block