CSS Positioning, Absolute

Here are a few tips for absolute positioning with CSS:

1) Default Position
By default, if you don't give values for the top and left styles, they are set to show the element where it would normally be displayed on the page.

2) Position Relative to a Parent
The element is positioned relative to a parent container. By default, the container is the browser window, but if a parent element has position: relative or absolute set on it, then that will act as the parent for positioning coordinates for its children.

3) Centering an Absolute Element
Here's one way to do it:

#absolute_centered {
height: 100px;
width: 140px;
border: 1px solid #333;
background-color: #CCC;

position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -70px;
}

The div is given a position of 50% top and left. This positions the div's top left corner in the very center of it's parent container (see point #2).

Using margins to further position the div, we set "margin-top: -50px;" 50px is half the height of the div. The left margin is set in the same fashion.

This places the div in the center of the parent container.

Read More

Featured Website - Planescape Online

The Planescape Online website has been a labor of love. Since the beginning of my time at Conestoga College, in the Web Design and Development program, I have been working very hard on this personal project.
I'm happy to announce that the website is now in regular use (by my friends and I), and we're quite happy with how it works!
To understand exactly what this website is capable of, it helps to know what the basic idea of a table-top role playing game is. The Planescape Online site was named after a Dungeons&Dragons campaign setting.
Table-top role playing games have complex rule systems that can easily fill 400 page books. Translating the Pathfinder role playing game system into an online web-based system has been challenging, and a lot of fun. It's an ongoing process.

One of the more interesting aspects of Planescape Online is the encounter page, because it has a battle-map that I designed using Flash AS3. You can click on the characters on this mini-map and move them about using the arrow keys on the keyboard. It's a neat little feature that will surely see improvement and additional features as I continue to work on the site.

Read More

Preloading Images and Removing Screen Flicker While SWF Loads

There are many options to preload images in HTML pages. The simplest would be to create a div and move it off the screen.

In this div, I created a list to preload background images into (using CSS). The other images that are loaded up are header images for the other pages in the website. Once loaded they stay in the cache, thus the header images appear instantly when the user navigates to those pages.

 <div id="img_preloader">
  <ul>
   <li>button hover</li>
  </ul>
  <img src="images/contact.jpg" />
  <img src="images/fabulous.jpg" />
  <img src="images/fabulous_text.jpg" />
  <img src="images/new_me.jpg" />
  <img src="images/nutrition.jpg" />>
  <img src="images/services.jpg" />
 </div>

I used the following CSS rules:

#img_preloader
{
width:200px;
position:absolute;
left:-9999px;
top:-9999px;
}
#img_preloader ul li {
background-image:url("../images/button_hover.png");
}


Flash SWF content may show a block of white in it's place until it had finished loading. To remove the white box, I added the following parameter to the OBJECT tag:

 <param name="wmode" value="transparent">

For more information about editing HTML tags manually for SWF content, see Object Tag Syntax.

And here is a link to the Adobe support page: Create a transparent background in a SWF file

Read More