Wednesday, May 6, 2009

Center a page horizontally using CSS

The following is an example of how to center a page without using the 'center' tag and using CSS.
Create a DIV tag and give it an id 'container'. Within this DIV, you can create your content or place whatever you like. This DIV container will contain all the elements that you would like to have in a centered block of the page, note: not the center of the page but a block that is centered on the page.

Then put the piece of code in your style section or file:


#container{
width:500px;
margin: auto; /*This makes the trick*/
}


The trick is simple, the width in combination with margin: auto; makes the container block be centered.

That is all!

Follow the link to see it in action.

Monday, May 4, 2009

Internet Explorer (IE) & Transparent png Images

IE version 6.0 and earlier versions do not do a good job display png files with Transparency. Below you will find the solution to the problem.


#bkgrnd{
width:100px;
height: 100px;
background-color: pink;
background-image:url('images/transparency.png');
_background-image:none; /*IE Fix*/
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/transparency.png');/*IE Fix*/
}


The fix is simple, the line:

_background-image:none;

makes IE remove the background image and then uses the one specified in the filter:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/transparency.png');

Follow the link to see it in action.

Saturday, May 2, 2009

WebSoulDesigns.com Launches New Site

WebSoul Designs, Inc. is proud to announce the launch of its new web site WebSoulDesigns.com. The site features the same products and services but offers a fresh look and feel that is more artistic and glamorous.

The new web site offers 4 main areas. These main areas are: About the Company, Blog, Portfolio and Contact Forms.

We invite you to visit the new www.websouldesigns.com today.