Showing posts with label Multiple style sheets. Show all posts

Friday, 6 December 2013

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 : EXTERNAL STYLE SHEET

External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:

An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}

* Do not add a space between the property value and the unit (such as margin-left:20 px). The correct way is: margin-left:20px

CSS : INTERNAL STYLE SHEET

Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this:

<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

CSS : CASCADING ORDER

Cascading order

What style will be used when there is more than one style sp

ecified for an HTML element?

Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:

1. Browser default

2. External style sheet

3. Internal style sheet (in the head section)

4. Inline style (inside an HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value).

* Note: If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the external style sheet will override the internal style sheet!

CSS background properties are used to define the background effects of an element.

CSS properties used for background effects:

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

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