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);

Flash CS3 (P)reviewed

Although this is the third iteration of Adobes Creative Suite, for many of us, this is the first true test of the acquisition of Macromedia by Adobe a year and half ago. And based on what we have had a chance to see, it appears the first thing on the agenda was integration. Read our first review here.

With the next version of Flash, the integration is especially evident with both PhotoShop and Illustrator importers. And when they decided to finally bridge that gap, the engineers at Adobe did it right with custom designed panels that give you full control over importing layers, assigning instance names and even allowing for individual compression controls. And as an extra degree of integration, you can also copy and paste right from Illustrator into Flash.

But the integration was not unilateral. Illustrator now has the ability to have symbol names, type (movie clip or graphic), registration points and even enabling it for 9-slice scaling. And all of these options import directly into Flash as if the symbol were created there. Continuing the integration with Illustrator and Flash, users who are used to drawing in Illustrator, the premiere choice for vector-based artwork, can now find the same level of control in Flash. With the newly upgraded pen tool, users now have tighter control over image manipulation on the stage. Even the shortcut key-commands are the same for this tool. And you can not mention integration without talking about the new look and feel for user interface across most of the new CS3 applications including Flash. Not only is the new look very clean, but it also is very functional with the new iconic mode, allowing for more screen real-estate and less clutter. And after integration, Adobe went right to streamlining a lot of different workflows starting with the Actions Panel. Collapsible code chunks is nothing new to other code editors, but in this case it is slightly different in that the Actions panel does not decide where to collapse your code, you do. You simply highlight the section you want to collapse, and click on one of the triangles at either end of the highlighted section. But that is not all you can do with selected code, you can also instantly comment it out as a line-by-line comment, or as a group comment. And removing comments are just as easy.

But that is not where the upgrades to the Actions panel end. When errors occurred in Flash, they would generally appear in the Output panel, and they still do, but now there is a Compile Errors panel that allows users to double click on the error and be taken right to that line of code. And Adobe has even upgraded the debugger to be more inline with the Flex debugger for even more debugging control. Next up is a feature mentioned back at Flash Forward in Austin. Taking the ease and flexibility of timeline based motion tweens and converting them to well structured XML data that can actually sit right within the rest of the code is much more powerful than it first appears. Because the animation is now part of an AS object, it has methods, events and properties of its own including the ability to set the number of loops and be notified when the animation is complete. This is something that is a bit more complicated with traditional tweens. And I thought I might have found something that Adobe had missed when I set the tween to a motion guide, but sure enough when I copied it as AS 3 and pasted it into the Actions panel, I noticed it picked up every position in the motion guide, so the animation still matched identically.

And in the continuing evolution from smart objects to components, I think this set is finally what we have been waiting for. Good functionality is not necessarily new to components, but how about easily being able to skin them? Well it doesn't get any easier than this. You simply double click the component on the stage, and you are presented with the different states of that component that you can quickly re-skin to look the way you want.

And I didn't forget about ActionScript 3 and the new virtual machine that puts to shame the performance of all previous Flash players, but I do not think that it is any surprise to anyone. What might be a surprise is an upgrade to the export abilities of Flash. Up until now, if you wanted to create an animation, and then export it to Quicktime, you had to have everything piece of animation on the main timeline, no sub-movie clip animations or animations controlled by code. But now, you can setup sub-animations and have animations controlled with ActionScript because the export acts more like a screen record than simply exporting the frames. You can even set it to export for a certain amount of time, or when it reaches the final frame.

Flash CS3 makes workspace customization easy. The new panel system lets you keep them open (in this case) or hide them to expand the workspace area.
A few more random things about the next version of Flash:

• It boots up and compiles files much faster than previous versions. As an example, I took a large sized file, with well over 250 images in it and compiled it in Flash 8 and Flash CS3. Flash 8 took about 40 seconds, Flash CS3 took about 18 seconds.
  
• The scroll wheel works on the stage and in the timeline. This may not seem like much, but when you have a ton of layers, and a large stage size it really makes a difference.
  
• The object hierarchy has moved from above the timeline to beneathe it. Not really sure why, but it is pretty annoying at first if you're used to it being above.
  
• Switching between different workspaces is pretty easy now with a workspace drop down right underneath the timeline.
  

This version of Flash not only marks a truly integrated application, but also a sign of things to come from Adobe.

(This review is based on a beta version of Flash CS3 so it may not represent the final product to ship later this year. That is why we call this a preview or a "first look". The version tested is however expected to be feature complete and this article explains what we see as the biggest enhancements.)

Fast Rollovers Without Preload

When using CSS image rollovers, two, three, or more images must be loaded (and often be preloaded for best results). We've got one image for each state (normal, hover, active, visited etc). Putting all states into one image makes dynamic changes faster and requires no preload.

Let's have a simple example. The menu items are the a-elements with display:block. Proper padding and background image for a, a:hover and a:active make the rollover. To simplify the rollover, I used only one picture containing three states of a button — normal, :hover, and :active.

Usually, in CSS rollovers, we use background images in this way:

#menu a { ... background: url("button.gif") top left no-repeat; }
#menu a:hover { ... background-image: url("button-over.gif"); }
#menu a:active { ... background-image: url("button-active.gif"); }
/* etc... */

Using one common picture, we don't need to change the background image. We just change its background-position. The :hover state will use the background image moved proper count of pixels (in the example the shift is 157px to the left), the :active state will use bigger shift (by 314px in the example).

#menu a { background: url("button.gif") 0 0 no-repeat; ... }
#menu a:hover { background-position: -157px 0; ... }
#menu a:active { background-position: -314px 0; ... }

That's all. Just one image is used. No preload is needed. State switching is as fast as possible (moving background position is much faster than replacing background image). AFAIK, it works in every CSS2 capable browser (IE5+, Mozilla, Opera, Safari etc.)