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

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