Footer I searched for a long time for a simple CSS solution to the eternal "sticky footer" problem, where the footer goes down to the end of the page. Up to now I have resorted to JavaScript to achieve this, which is not really the most elegant solution. It should be simple, right?

The other day, I stumbled upon what looked like a basic HTML/CSS solution. I wanted CSS that would push the footer to the bottom of the page, irrespective of content height, in an ASP.NET Master Page setup. Thanks to Ryan Fait for this.

It was straightforward enough to get it working for IE7. Firefox 3.0 didn't play nice at first until I moved the wrapper and footer divs out to the master page. Feel free to download the sample below and try it out for yourself - VS 2008 solution. Ignore the red wigglies in the master page. It has been tested in IE7, Firefox 3.0 and Chrome 0.2.149.29.

CSS_Sticky_Footer.zip (19.91 kb)

UPDATE

With master pages you need to take account of the "form" element by  including it in the appropriate CSS selector.

Tags: ,

ASP.NET | CSS



Heart of CSS: The Box Model

by agrace 13. October 2007 06:51

Box Model I wanted to write about positioning in CSS but recently I realized that I needed to go back to the beginning before grappling with issues like the Position and Display properties.

The box model is the starting point to understanding positioning in CSS. In fact, every single element in your markup is actually a box. Make this your personal mantra. Every element on a page is a box described by the content, padding, border and margin properties. This is so simple as to be totally elusive. It isn't immediately obvious because the default value for the border element isn't visible and the background default setting is transparent. To the browser, even a single period is treated as a little box.

Since a box has four sides, the padding, border and margin properties each have four settings for the top, right, bottom and left sides; designers often use the word TRouBLe as a memory jog. For example:

 /*   Top Right Bottom Left   */
 padding: 5px 10px 5px 10px;

 

Box Model

 

In theory, padding, border and margin values are optional and should default to zero. In the real world, this is often not the case. The user-agent stylesheet of different browsers may add values for the padding and margin. To overcome this, I always add a universal selector rule to the start of my style sheets to zero these out:

* {
    margin: 0;
    padding: 0;
}

 

The visible dimensions of the box are the sum of the content + padding + border values. The margin values determine the distance between the elements, horizontally and vertically.

Collapsing Margins

Most designers won't admit to their original ignorance of this one. They may have set several block elements vertically, then added top and bottom margins to each element. When the elements didn't have the expected vertical spacing between them, I'll bet they just shrugged, stuck in a few <br /> tags and marched on. Of course, that never happened me ;-)

Here's how it works: when vertical margins meet, they will collapse to form a single margin whose height will equal the larger of the two combined margins. Mystery solved. Note however, that this rule only applies to boxes in the normal flow of the document.

You can also use negative margins, but that is beyond the scope of this article (I've always wanted to say that).

Margin and Padding Shorthand

You may have been confused in the past when viewing CSS and coming across margin or padding rules with less than four values. This is actually a shorthand syntax. You can use one, two, three or four values within a shorthand declaration:

 /*   Padding on all sides   */
 padding: 5px;

 /*   Top and Bottom: 5px, Left and Right: 10px   */
 padding: 5px 10px;

 /*   Top: 5px, Left and Right: 10px, Bottom: 15px   */
 padding: 5px 10px 15px;

 

To sum up, whenever you set the width of an element on the page, you are actually setting the width of the content within it. If you set values for margins, padding or borders, you increase the space this element occupies on the page. Understanding this is fundamental, and necessary, before attempting to handle the other issues of positioning in CSS.

 

Tags:

CSS



CSS Background Property Syntax

by agrace 19. August 2007 06:18

One of the trickier forms of CSS syntax is that of background properties, especially when using the shorthand form. This post will focus on the background-image property. When used correctly, the background-image property will enable you to create visually superior websites. Many of today's top Web 2.0 sites use this property, often combined with a repeating gradient image that blends into a background color.

First, an overview of the complete set of background properties and some brief descriptions:

Property Description
background Shorthand to set all background properties
background-attachment Sets background image as fixed or scrolled
background-color Sets background color of element
background-image Sets an image as the background
background-position Sets starting position of background image
background-repeat Sets how background image is repeated

 

For a more detailed breakdown, please see the W3Schools website.

The background properties can be brought together into a single line of shorthand CSS. We do not need to specify all the property values; we can use any one or more of them as follows:

background
Values [background-attachment] || [background-color] || [background-image] || [background-position] || [background-repeat]

 

If you have two values for the background-position property, they must appear together. And if we use length or percentage values, they must appear as horizontal first and vertical second. As long as you have at least one value present, you can omit all the rest. Other than that, there isn't any restriction on the order or particular properties to be included. If you omit any property values, then their default values are applied automatically. So, the following two declarations render the same output:

body { background: white url(test.gif); }
body { background: white url(test.gif) top left repeat scroll; }

 

The page you are looking at had its left navigation and main content area colors set by using a single 780 X 5 pixel, vertically-repeating image. The following CSS was employed:

background: url(img/main.gif) repeat-y;

 

This shorthand syntax is faster to type and easier to use than the full version. Using background images is an incredibly powerful way to take control of the overall look of your website.

Tags:

CSS