CSS - Centered Tableless Template & Opacity
- Posted by Lina on July 29th, 2008 filed in Web Template
Commonly if we wanna center the website template using table, we will always add the ‘align’ property of table and give its value with ‘center’. With this kind of property, the template will surely view in center align and without do anything else.
<table align=”center”>
<tr><td>example</td></tr>
</table>
The above is a way for us to center the template while we are using table in developing template. How about developing a template using tableless concept? We still got solution here. hehe…
We use <div> tag with CSS controlling to replace table in developing tableless template. How does tableless template will be formed then? Maybe i will write about the basic development of tableless template in my next post. Now i will only show you how to centered the tableless template. Look into following script :
<style type=”text/css”>
#container{
width:800px;
margin-top:0px;
margin-left:auto;
margin-bottom:0px;
margin-right:auto;
padding:0px;
}
</style><html>
<head></head>
<body>
<div id=”container”>The layout centered</div>
</body>
</html>
In the above script, width & margin properties of id container play important role in centered the layout. Width property defines the wide of your layout you want to form. Margin property helps in setting the margin surrounded id container within width 800px. Margin at the top and bottom side will remain 0px (you can set whatever you want according to your needs), while Margin at the left and right side have to remain auto because within ‘auto’ value in these two properties, the layout will automatically set a balance margin between the left and the right side for you. Therefore you will have a centered layout with width 800px.
Ok… we continue with the opacity matter by using CSS. I found out the opacity property was very usefull for me in developing HerlinaWijaya.com template. It makes my template become more artistic, hehe… do you agree with me? That’s just some trick i put it into my template css and blink… amazing… It’s look like i have done some slicing with photoshop. Look at my print screen below.
Here i will show you the opacity tricks in CSS those support in browser Internet Explorer, Mozilla, and also Opera. Do take in mind, use the opacity property in the id or class that you wanna its layout looks more transparancy.
/* Opacity in Internet Explorer */
filter: alpha(opacity=80);
zoom: 1;
/* Opacity in Mozilla */
-moz-opacity: 0.8;
/* Opacity in Opera*/
opacity:0.8;
Practice makes perfect. Do more practice and you will learn more. 
Maybe you have any other trick according this topic, kindly put your comment below 
July 29th, 2008 at 11:29 am
Great tips! Tweaking the element’s opacity is somewhat an interesting design.
By the way, can you also share about how to make PNG alpha transparency works in IE6? I’ve googled a lot of tricks recently, but they seems not so looking good for me. I am sick with those messy code that very difficult to understand, if possible, I prefer the little code one.
July 29th, 2008 at 4:03 pm
wah.. maap… bahasa lingisnya kacau, jadi komen dalam indo aja ya.
INTINYA..
NICE TIPS
July 30th, 2008 at 9:52 pm
Wow! Thanks for your tips.
But here I have a question, most people say that using tableless layout is better than layout that using table element. So, what is the benefit by using tableless layout rather than using table?
August 1st, 2008 at 10:12 pm
@little star, axing
thanks for your praising
i’m interesting to answer your both question and trick in my next post. So be patient
Do often come and check out the new post.
@endri
Gapapa lar
Gw juga lagi belajar b.inggris kok.
Thx banget ya uda kunjungi website gw
Sering2 mampir ya.
August 10th, 2008 at 11:45 am
Ok! I will be waiting for your next post.
Cheer!