CSS layout: 100% height with header and footer

Sometimes things that used to be really simple with tables can still appear pretty hard with CSS. This layout for instance would consist of 3 cells; two with a fixed height, and a third one in the center filling up the remaining space. Using CSS, however, you have to take a different approach.

Min-height

The #container element of this page has a min-height of 100%. That way, if the content requires more height than the viewport provides, the height of #content forces #container to become longer as well. Possible columns in #content can then be visualised with a background image on #container; divs are not table cells, and you don't need (or want) the fysical elements to create such a visual effect. If you're not yet convinced; think wobbly lines and gradients instead of straight lines and simple color schemes.

Relative positioning

Because #container has a relative position, #footer will always remain at its bottom; since the min-height mentioned above does not prevent #container from scaling, this will work even if (or rather especially when) #content forces #container to become longer.

Padding-bottom

Since it is no longer in the normal flow, padding-bottom of #content now provides the space for the absolute #footer. This padding is included in the scrolled height by default, so that the footer will never overlap the above content.

here is the css

/**
* 100% height layout with header and footer
* ----------------------------------------------
* Feel free to copy/use/change/improve
*/

html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:gray;

font-family:arial,sans-serif;
font-size:small;
color:#666;
}

h1 {
font:1.5em georgia,serif;
margin:0.5em 0;
}

h2 {
font:1.25em georgia,serif;
margin:0 0 0.5em;
}
h1, h2, a {
color:orange;
}

p {
line-height:1.5;
margin:0 0 1em;
}

div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:750px;
background:#f0f0f0;

height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/

min-height:100%; /* real browsers */
}

div#header {
padding:1em;
background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
border-bottom:6px double gray;
}
div#header p {
font-style:italic;
font-size:1.1em;
margin:0;
}

div#content {
padding:1em 1em 5em; /* bottom padding for footer */
}
div#content p {
text-align:justify;
padding:0 1em;
}

div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#ddd;
border-top:6px double gray;
}
div#footer p {
padding:1em;
margin:0;
}

Click to Activate" solution!

here is the solution .

History of this problem:
These are a result of Microsoft losing a lawsuit with a company called Eolas. MS decided to not pay for a patent license and instead patched their browser to work in a way that does not infringe on the Eolas patent.

Solution One:
Visit www.Adobe.com and download the "fix" for Flash called "Active Content Update". This fix adds a publishing option, and also a new "Command". You must use this publishing option and use the Command in order to "add" the fix to your HTML page.

Solution Two:
http://blog.deconcept.com/swfobject/


Solution three:

http://www.webreference.com/programming/ie/

flash over the div tag problem

* By default, Flash is always on top.
* Applying a wmode of opaque (or, in some cases, transparent) is the solution.

Opaque mode allows your DHTML drop down menus to stay in front of your Flash movie as well as hiding non-essential Flash from screen readers. Yes, transparent mode will also allow your DHTML drop down menus to render properly and will hide non-essential Flash, but due to possible performance issues, that's best left for opaque mode. Use transparent mode to show elements stacked beneath your Flash movie and when actual transparency is needed.

another solution.. check the link below

http://nickcowie.com/2006/layering-flash-and-html-tutorial/

http://www.boldfishclient.co.uk/go/flash
(uses the UFO embedding method with wmode set to transparent)

Browsercam link to screen grabs to see cross browser efficiency:
http://www.browsercam.com/public.aspx?proj_id=344019

css layouts

http://www.code-sucks.com/css%20layouts/


http://blog.html.it/layoutgala/

Pre-loading sound within a flash animation

if you want to display a preloader, load the sound in combination with onEnterFrame. Something like

Code:

Sound mySound = new Sound();
mySound.loadSound("my.mp3", true); //stream it
onEnterFrame = function()
{
bTotal = mySound.getBytesTotal();
bLoaded = getBytesLoaded();
if (bLoaded >= bTotal)
delete onEnterFrame;
// do the animation here, based on the percentage represented by bLoaded
}

Sound.loadSound

Availability
Flash Player 6.

Usage
mySound.loadSound(" url ", isStreaming )

Parameters
url - The location on a server of an MP3 sound file.
isStreaming - A Boolean value that indicates whether the sound is a streaming or event sound.

Returns
Nothing.

Description

Method; loads an MP3 file into an instance of the Sound object. You can use the isSteaming parameter to indicate whether the sound is an event or a streaming sound.

Event sounds are completely loaded before they play. They are managed by the ActionScript Sound object and respond to all methods and properties of this object.

Streaming sounds play while they are downloading. Playback begins when sufficient data has been received to start the decompressor.

All MP3s (event or streaming) loaded with the Sound.loadSound method are saved in the browser's file cache on the user's system.

Example
The following example loads an event sound:

s.loadSound( "http://serverpath:port/mp3filename", false);

The following example loads a streaming sound:

s.loadSound( "http://serverpath:port/mp3filename", true);