CSS : Sticky Footer Layout

CSS Sticky Footer Layout

It Sticks to the Bottom of the Page!

See that footer, way down there? It's stuck to the bottom of the page even when thin on content. Otherwise it would be floating halfway up the page.

Cross Browser Support for Sticky Footer Code

This sticky footer solution is working in all major browsers, including Chrome and IE 8! It works in HTML5 and with floated 2-column layouts and we don't get overlap in resized browser windows unlike older solutions you find when you Google sticky footer. You don't need an empty push div or cleafix hack. Here is how to use this sticky footer code.

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
 padding-bottom: 180px;}  /* must be same height as the footer */

#footer {position: relative;
 margin-top: -180px; /* negative value of footer height */
 height: 180px;
 clear:both;} 

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}



/* IMPORTANT

You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.

<!--[if !IE 7]>
 <style type="text/css">
  #wrap {display:table;height:100%}
 </style>
<![endif]-->

*/

Other Topics

CSS : Background-shortand property,CSS : Background image,CSS : Background color,CSS : Cascading order,CSS : Multiple style sheets,CSS : Inline styles,CSS : Internal style sheet,CSS : External style sheet,CSS : Class selector,CSS : Sticky Footer Layout,CSS : Collapse borders,CSS : List,CSS : Background color,CSS : Styling links,CSS : Padding properties,CSS : Padding-shorthand property,CSS : The lang pseudo class,CSS : MEDIA,CSS::STYLING FORMS, mechanical Engineering, English books,Photoshop tutorials,Harry potter,Best 100 english books,Mechanical-old-question-paper,CSS : Id Selector

CSS : MULTIPLE STYLE SHEETS

Multiple Style Sheets

If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet.

For example, an external style sheet has these properties for the h3 selector:

h3
{
color:red;
text-align:left;
font-size:8pt;
}

And an internal style sheet has these properties for the h3 selector:

h3
{
text-align:right;
font-size:20pt;
}

If the page with the internal style sheet also links to the external style sheet the properties for h3 will be:

color:red;
text-align:right;
font-size:20pt;

The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the internal style sheet.

Multiple Styles Will Cascade into One

Styles can be specified:

inside an HTML element
inside the head section of an HTML page
in an external CSS file

Tip: Even multiple external style sheets can be referenced inside a single HTML document.

Other Topics

CSS : BACKGROUND COLOR

Background Color

The background-color property specifies the background color of an element.

The background color of a page is defined in the body selector:

Example

body {background-color:#b0c4de;}

With CSS, a color is most often specified by:

a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"
a color name - like "red"

In the example below, the h1, p, and div elements have different background colors:

Example

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

Other Topics

CSS : BACKGROUND IMAGE

Background Image

The background-image property specifies an image to use as the background of an element.

By default, the image is repeated so it covers the entire element.

The background image for a page can be set like this:

Example

body {background-image:url('paper.gif');}

Below is an example of a bad combination of text and background image. The text is almost not readable:

Example

body {background-image:url('bgdesert.jpg');}

Background Image - Repeat Horizontally or Vertically

By default, the background-image property repeats an image both horizontally and vertically.

Some images should be repeated only horizontally or vertically, or they will look strange, like this:

Example

body
{
background-image:url('gradient2.png');
}

If the image is repeated only horizontally (repeat-x), the background will look better:

Example

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

Background Image - Set position and no-repeat

* When using a background image, use an image that does not disturb the text.

Showing the image only once is specified by the background-repeat property:

Example

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

Example

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;

Other Topics

CSS : BACKGROUND-SHORTAND PROPERTY

Background - Shorthand property

As you can see from the examples above, there are many properties to consider when dealing with backgrounds.

To shorten the code, it is also possible to specify all the properties in one single property. This is called a shorthand property.

The shorthand property for background is simply "background":

Example

body {background:#ffffff url('img_tree.png') no-repeat right top;}

When using the shorthand property the order of the property values is:

background-color
background-image
background-repeat
background-attachment
background-position

It does not matter if one of the property values is missing, as long as the ones that are present are in this order.

Other Topics

MECHANICAL,CSS,HTML

Friday 6 December 2013