Coding Your Html/css File For Swishmax, CSS - Beginner Options

[RedDragon]

Here I'll show you how I coded my html page in order to get a result like this: click

You see I have a background image with a centered area with a solid colour. The swf is placed within this area. Because viewers use different resolutions I have to make sure it is always centered, and the both sides are always covered by the background shape! I therefore used a shape with height: 1px and width: 1600 px

1. Open notepad and add the following css script. I will discuss it beneath.

CODE

body {  
background: #D3D3AF url(back.gif) repeat-y 50% 0;
background-attachment: fixed;
margin: 0;
padding: 0;
}

#container {
border: none;
margin: 0px;
margin-left: auto;
margin-right: auto;
width: 758px;
height: 100%;
}

background color is given, I specified the backgroundimage and entered settings so that it will only repeat vertically and it its always centered! That is very important since the swf will be placed in the middle part of the background graphic, as can be seen in the example site I posted above. Margin and padding both 0

The swf will be placed in a container. The width specifies the width of the swf, the other settings make sure it is centered.


Now for your html file:

Link to your external css by adding the following in your head tags, remember to change the link to your own .css ofcourse.

CODE

<link rel="stylesheet" href="bali.css" type="text/css">

In the body tags, place the following code with the swf code in between (in swishmax click File > Export > Copy HTML to clipboard).

CODE

<div id="container">
</div>

You are done! No additional coding is required since the css takes care of the background color and image, and centers the swf in the page

[*D*]

Thankyou for adding will be of great use to newbies starting out.

BTW http://www.helpingbali.com/ very nice great cause.

[Eddie_K]

I don't quite understand what the site is about, but it rocks great work Red.

Nice use of CSS.

Eddie

[josephine]

Thanks for adding this tut red!very understandable!

I haven't used css with flash,i'll start from now on :)looks kewl


Eddie: it's a website for an orphanage in Bali!

[RedDragon]

do you read dutch?

oh I think I explained it somewhere lol. English version in the next two weeks as promised...


Thx for the comments!

[oliverp]

hey thanx! helped me a lot ;o)

[kingivan]

thx u help me

[vidoman]

Alright Johnny!!! Excellant, and perfect timing for me, I've been trying to figure out how to do this... Many thanks..

[jandebouwman]

very nifty red, it's much easier then the 'table-in-table-center' code, seen on motiongerm.com.

Good tut, easy to follow.

- Dennis

[RedDragon]

thx for the kind words guys

Alright Johnny!!! Excellant, and perfect timing for me, I've been trying to figure out how to do this... Many thanks..

not a problem ron, glad to be of any help