Can I Use HTML/CSS To Do This?

[icu222much]

I have a graphical website where the content will be displayed using Flash and will be placed on the center of the screen. On either side, I will have some trees and above I'll have some clouds floating from the right to the left. I am wondering if this can be done using HTML/CSS, or do I have to use a scripting language such as JavaScript?

If the user has their browser set 600X800, then they will just be able to see the Flash content and not the trees. However, if they widen their browser to lets say 800X800, then they will be able to see the trees. As they further widen their browser, the website will automatically slide the trees across the page so that the trees do not stack up on top of each other, stack on top of the content, and are not clipped off on the edges of the browser. In addition, I am wondering if for every 100 pixels or so if a tree can also be placed in as well?

I am also wondering how I would get the clouds to float from right to left. I remember there was a HTML tag <marquee>. Would this be the best option for me, or is there an alternative?

[Airshow]

Intensive Care Unit (ICU),

Suggest you create your clouds as a flash movie, with a "stop" button for folks with low powered processors/graphics cards - thus they will stand a chance of seeing accepatable performance in the main content.swf.

Another approach would be to create the clouds as an animated gif.

In either case, it will need to be stretched/compressed/clipped? to fit the window width. A good flash person should be able to advise as to how to accommodate a swf. Gif width can be specified in CSS - inline {style="width:100%;"} would probably suffice.

I think your trees might best be implemented as a background image to a <div> in which your content.swf will sit. The div's css will be something like { width:100%; height:200px; background:url('mytrees.gif'); background-repeat: repeat-x;} .

Whichver way you do it, you'll have to play around with the ideas and the settings until you get exactly what you want.

Good luck.

Airshow

[icu222much]

I was thinking of putting the clouds in Flash, but I want to experiment with another technique.

I also thought about tiling the trees as part of the background image but then but then I realized I may have some problems. The content will be placed in a container in the middle of the screen which is on top of the background. As the user continues to expand the width of the browser, the background would just continue to tile while the content container will remain in the middle of the page. At some point, the content container will end up on part of the trees thus showing half a tree.

[Airshow]

ICU,

Re trees, I agree, you have spotted the pitfalls of doing it the simple way. There may be other ways - involving a mix of HTML and CSS.

If you want to see some good, creative use of CSS, plus a chance of contributing your own then I strongly recommend www.csszengarden.com. There you will find lots of examples of exactly the same page of XHTML, each with its own style sheet to give a unique design. You can see what other people have done and how they did it - it's a great way to learn.

Airshow

[icu222much]

Thanks. I'll take a look through that site.

[codejoust]

Take a look at the clouds on Cheer Us Up.com for an example of this, using jQuery, although it can easily be done with pure javascript (setTimeout/setInterval on the background-position).