Archive for category css

X and Y Axis Page Layout

Posted by mcgelligot in Content Creation, css on January 25, 2012

The current manifestation of this blog has a column that runs up the right side and overlays the horizontal nav bar at the top. I admittedly like this look. I call it the X and Y axis page layout. This is because, for me, it resembles a cartesian plane with the column representing “y” and the nav bar representing “x”. I think I like it because it makes elegant use of the space available and over the years I have gotten tired of the same-ol’-same-ol’ with page layouts.

In any case, I decided to do a redesign of Learn Chess Rules. I decided to employ this design concept in the simplest manner possible, using something close to primary colors. I wanted to see the format in its essense. I also employed a fixed div at the bottom of the page. I like the effect, but the wife liked the ambiance of the site before I changed it. At this time many of the support pages are still in the old format, the FAQs for example, so you can see the difference.

I originally wrote the Chess Rules site in 1998. My memory has me starting at ten in the evening and working to four in the AM. If so, I was working fast. The redesign and rewrite took me two days.

The internet moves faster than a speeding bullet, and even faster than Superman. When I wrote the site it was all tables. Even though in the rewrite I employed a table here and there, where appropriate, the entire structure hangs on the <div> tag and the CSS behind it.

Learn Chess Rules

X and Y Axis at Learn Chess Rules

No Comments

CSS: Animated Gif Behind a Static Image

Posted by mcgelligot in css on December 9, 2011

Rock Paper Scissors

You can use HTML and CSS to create a neat little effect where you have a static image in front and action going on behind. It is pretty simple to do.

First create a png file for your foreground that is transparent where you want to see the action going on behind a scene. Then create an animated gif with the action. So far so good.

Now using html with css use the following outline:

<div id=”container”>
<div id=”action”>
<img src=”action-image.gif” />
</div>
<div id=”static-foreground”>
<img src=”static.png” />
</div>
</div>
div#container
{
position: relative;
}
div#action
{
position: absolute;
top: 0;
left: 0;
}
div#static-foreground
{
position: absolute;
top: 0;
left: 0;
}

The foreground must come before the animated gif or it will be totally masked by it. If you try to put the images in the background of the container using CSS the div will simply collapse and you will not see the image at all. The images must be in the html structure.

I discovered this while working on a Rock Paper Scissors app. The image above is a simple animated gif.

 

No Comments