css နဲ႔ template တစ္ျပဳလုပ္ဖို႔အတြက္ div tag ကို သံုးရပါမယ္။css နဲ႔ ျပဳလုပ္တဲ႔ template ေတြက html table template ေတြထက္အားသာခ်က္ေတြ ရွိေနတဲ႔အတြက္ ေနာက္ပိုင္းမွာ css template ေတြကိုသာသံုးလာၾကပါတယ္။
ကၽြန္ေတာ္တို႔ အရင္ ဒီမွာ table နဲ႔ ဖန္တီးခဲ႔တဲ႔ template ေလးကိုဘဲ ျပန္ၿပီး css နဲ႔လုပ္ၾကတာေပါ႔။


အရင္ဆံုး body tag အတြက္ css ကိုေရးၾကပါမယ္။ သူမွာေတာ႔ margin ကို 0 လုိ႔ ထားပါမယ္။ ထိပ္ဆံုးမွာ ကပ္ၿပီးေပၚေစခ်င္လို႔ပါ။ ေနာက္ background-color ကိုမီးခိုးေရာင္အျဖစ္ ေၾကညာပါမယ္။

body{
margin:0;
background-color:#CCCCCC;
}

ေနာက္ continer ဆိုတဲ႔ div အတြက္ css ကုိဖန္တီးၾကပါမယ္။ သူကေတာ႔ site တစ္ခုလံုးနဲ႔ ဆိုင္တဲ႔ div ပါ။ site ကဲ႔ width တို႔ margin တို႔ကို သူမွာထည့္ေပးရပါမယ္။

#continer{
width:800px;
margin: 0 auto;        /*top right bottom left*/
background-color:#FFFFFF;
}

ကၽြန္ေတာ္တို႔ site တစ္ခုလံုးရဲ႕ width ကို 800 pixel ေပးထားပါတယ္။ ၿပီးေတာ႔ margin မွာ top ကို 0 ေပးထားတဲ့အတြက္ screen ရဲ႕ ထိပ္ဆံုးကေန စေပၚပါလိမ့္မယ္။ right ကုိေတာ႔ auto လို႔ေပးထားတဲ႔အတြက္ browser screen ရဲ႕ size ကိုလုိက္ၿပီးေတာ႔ အလယ္ေရာက္ေနေအာင္ အတိုးအေလ်ာ႔လုပ္ပါလိမ့္မယ္။

ၿပီးရင္ header div အတြက္ css ကိုဖန္တီးပါမယ္။ သူမွာ ကၽြန္ေတာ္တို႔ site header ရဲ႕ width နဲ႔ height ကိုသတ္မွတ္ပါမယ္။ width က continer width အတိုင္းအျပည့္ယူမွာဆိုရင္ မထည့္လည္း ရပါတယ္။ ကၽြန္ေတာ္တို႔ header height ကို သတ္မွတ္တဲ႔ အခါ ကၽြန္ေတာ္ကေတာ႔ ပံုတစ္ပံုပဲ ထည့္မွာျဖစ္တဲ့အတြက္ ကၽြန္ေတာ႔ပံုရဲ႕ height အတိုင္း ကၽြန္ေတာ္ကေတာ႔ 96px သတ္မွတ္လိုက္ပါတယ္။ ကိုယ္ပံုနဲ႕ အျခားကိုယ္ထည့္မယ္အရာေပၚမူတည္ၿပီး လိုသေလာက္သတ္မွတ္ႏုိင္ပါတယ္။ ကၽြန္ေတာ္တို႔ heading ပံုကို css က ေန လွမ္းေခၚၿပီးထည့္လို႔လည္း ရပါတယ္။ ဒါမွမဟုတ္ html နဲ႔က်မွလွမ္းေခၚလို႔လည္း ရပါတယ္။

#header{
height:96px;
background:url(gwc.png) no-repeat;
}

ဒီတစ္ခါ menu အတြက္ css ကိုေရးၾကပါမယ္။ သူ႔ရဲ႕ width နဲ႔ height ကိုလိုသေလာက္သတ္မွတ္လိုက္ပါ။ ၿပီးေတာ႔ အေရးႀကီးတာက သူ ေပၚမဲ႔ ဘက္ float ကိုသတ္မွတ္ေပးရ ပါတယ္။ ကၽြန္ေတာ္ကေတာ႔ left မွာထားမွာျဖစ္တဲ့အတြက္ left လို႔သတ္မွတ္ထားလိုက္ပါတယ္။

#menu{
width:200px;
height:350px;
float:left;
}

content အတြက္ css ကလည္း menu လိုပါပဲ။ float မွာ ေတာ႔ သူက ညာဘက္မွာေပၚေစခ်င္တဲ့အတြက္ right ေပါ႔။

#content{
width:590px;
height:350px;
float:right;
}

အခုေနာက္ဆံုး footer အတြက္ေရးပါမယ္။ footer မွာ height ရယ္ clolor သတ္မွတ္မယ္။ ၿပီးရင္ clear: both ဆိုတာေလးထည့္ေပး ရပါမယ္။ ဘာလို႔လဲဆိုေတာ႔ menu ေသာ္လည္းေကာင္း content ေသာ္လည္းေကာင္းတစ္ခုခုက ပိုရွည္ခဲ႔ရင္ အရွည္ဆံုးရဲ႕ေအာက္ကို ေရာက္ေစခ်င္လို႔ပါ။ ေနာက္ text ေတြကို အလည္မွာေပၚေစခ်င္တဲ့ အတြက္ text-align ကို center လို႔ထားေပးလိုက္ပါတယ္။

#footer{
height:50px;
background-color:#FFCC00;
clear:both;
text-align:center;
}

code အျပည့္အစံုကေတာ႔ ဒီလိုပါ။

<html>
<head>

<style>
body{
margin:0;
background-color:#CCCCCC;
}
#continer{
width:800px;
margin: 0 auto;   /*top right bottom left*/
background-color:#FFFFFF;
}
#header{
height:96px;
background:url(gwc.png) no-repeat;
}

#menu{
width:200px;
height:350px;
float:left;
}
#content{
width:600px;
height:350px;
float:right;
}
#footer{
height:50px;
background-color:#FFCC00;
clear:both;
text-align:center;
}
</style>

<title>Css web template</title>
</head>

<body>
<div id=”continer”>

<div id=”header”>
</div>

<div id=”menu”>
<ul>
<li><a href=”#”>haperlink one</a></li>
<li><a href=”#”>haperlink two</a></li>
<li><a href=”#”>haperlink three</a></li>
<li><a href=”#”>haperlink four</a></li>
<li><a href=”#”>haperlink five</a></li>
</ul>
</div>

<div id=”content”>
<p>content</p>
</div>

<div id=”footer”>
<a href=”http://webtut.6te.net”>Created by : Wai Lynn Oo</a>
</div>

</div>
</body>
</html>

How to create a Css web template

css နဲ႔ template တစ္ျပဳလုပ္ဖို႔အတြက္ div tag ကို သံုးရပါမယ္။css နဲ႔ ျပဳလုပ္တဲ႔ template ေတြက html table template ေတြထက္အားသာခ်က္ေတြ ရွိေနတဲ႔အတြက္ ေနာက္ပိုင္းမွာ css template ေတြကိုသာသံုးလာၾကပါတယ္။
ကၽြန္ေတာ္တို႔ အရင္ ဒီမွာ table နဲ႔ ဖန္တီးခဲ႔တဲ႔ template ေလးကိုဘဲ ျပန္ၿပီး css နဲ႔လုပ္ၾကတာေပါ႔။

gwctablefinal.png

အရင္ဆံုး body tag အတြက္ css ကိုေရးၾကပါမယ္။ သူမွာေတာ႔ margin ကို 0 လုိ႔ ထားပါမယ္။ ထိပ္ဆံုးမွာ ကပ္ၿပီးေပၚေစခ်င္လို႔ပါ။ ေနာက္ background-color ကိုမီးခိုးေရာင္အျဖစ္ ေၾကညာပါမယ္။

body{
margin:0;
background-color:#CCCCCC;
}

ေနာက္ continer ဆိုတဲ႔ div အတြက္ css ကုိဖန္တီးၾကပါမယ္။ သူကေတာ႔ site တစ္ခုလံုးနဲ႔ ဆိုင္တဲ႔ div ပါ။ site ကဲ႔ width တို႔ margin တို႔ကို သူမွာထည့္ေပးရပါမယ္။

#continer{
width:800px;
margin: 0 auto;        /*top right bottom left*/
background-color:#FFFFFF;
}

ကၽြန္ေတာ္တို႔ site တစ္ခုလံုးရဲ႕ width ကို 800 pixel ေပးထားပါတယ္။ ၿပီးေတာ႔ margin မွာ top ကို 0 ေပးထားတဲ့အတြက္ screen ရဲ႕ ထိပ္ဆံုးကေန စေပၚပါလိမ့္မယ္။ right ကုိေတာ႔ auto လို႔ေပးထားတဲ႔အတြက္ browser screen ရဲ႕ size ကိုလုိက္ၿပီးေတာ႔ အလယ္ေရာက္ေနေအာင္ အတိုးအေလ်ာ႔လုပ္ပါလိမ့္မယ္။

ၿပီးရင္ header div အတြက္ css ကိုဖန္တီးပါမယ္။ သူမွာ ကၽြန္ေတာ္တို႔ site header ရဲ႕ width နဲ႔ height ကိုသတ္မွတ္ပါမယ္။ width က continer width အတိုင္းအျပည့္ယူမွာဆိုရင္ မထည့္လည္း ရပါတယ္။ ကၽြန္ေတာ္တို႔ header height ကို သတ္မွတ္တဲ႔ အခါ ကၽြန္ေတာ္ကေတာ႔ ပံုတစ္ပံုပဲ ထည့္မွာျဖစ္တဲ့အတြက္ ကၽြန္ေတာ႔ပံုရဲ႕ height အတိုင္း ကၽြန္ေတာ္ကေတာ႔ 96px သတ္မွတ္လိုက္ပါတယ္။ ကိုယ္ပံုနဲ႕ အျခားကိုယ္ထည့္မယ္အရာေပၚမူတည္ၿပီး လိုသေလာက္သတ္မွတ္ႏုိင္ပါတယ္။ ကၽြန္ေတာ္တို႔ heading ပံုကို css က ေန လွမ္းေခၚၿပီးထည့္လို႔လည္း ရပါတယ္။ ဒါမွမဟုတ္ html နဲ႔က်မွလွမ္းေခၚလို႔လည္း ရပါတယ္။

#header{
height:96px;
background:url(gwc.png) no-repeat;
}

ဒီတစ္ခါ menu အတြက္ css ကိုေရးၾကပါမယ္။ သူ႔ရဲ႕ width နဲ႔ height ကိုလိုသေလာက္သတ္မွတ္လိုက္ပါ။ ၿပီးေတာ႔ အေရးႀကီးတာက သူ ေပၚမဲ႔ ဘက္ float ကိုသတ္မွတ္ေပးရ ပါတယ္။ ကၽြန္ေတာ္ကေတာ႔ left မွာထားမွာျဖစ္တဲ့အတြက္ left လို႔သတ္မွတ္ထားလိုက္ပါတယ္။

#menu{
width:200px;
height:350px;
float:left;
}

content အတြက္ css ကလည္း menu လိုပါပဲ။ float မွာ ေတာ႔ သူက ညာဘက္မွာေပၚေစခ်င္တဲ့အတြက္ right ေပါ႔။

#content{
width:590px;
height:350px;
float:right;
}

အခုေနာက္ဆံုး footer အတြက္ေရးပါမယ္။ footer မွာ height ရယ္ clolor သတ္မွတ္မယ္။ ၿပီးရင္ clear: both ဆိုတာေလးထည့္ေပး ရပါမယ္။ ဘာလို႔လဲဆိုေတာ႔ menu ေသာ္လည္းေကာင္း content ေသာ္လည္းေကာင္းတစ္ခုခုက ပိုရွည္ခဲ႔ရင္ အရွည္ဆံုးရဲ႕ေအာက္ကို ေရာက္ေစခ်င္လို႔ပါ။ ေနာက္ text ေတြကို အလည္မွာေပၚေစခ်င္တဲ့ အတြက္ text-align ကို center လို႔ထားေပးလိုက္ပါတယ္။

#footer{
height:50px;
background-color:#FFCC00;
clear:both;
text-align:center;
}

code အျပည့္အစံုကေတာ႔ ဒီလိုပါ။

<html>
<head>

<style>
body{
margin:0;
background-color:#CCCCCC;
}
#continer{
width:800px;
margin: 0 auto;   /*top right bottom left*/
background-color:#FFFFFF;
}
#header{
height:96px;
background:url(gwc.png) no-repeat;
}

#menu{
width:200px;
height:350px;
float:left;
}
#content{
width:600px;
height:350px;
float:right;
}
#footer{
height:50px;
background-color:#FFCC00;
clear:both;
text-align:center;
}
</style>

<title>Css web template</title>
</head>

<body>
<div id=”continer”>

<div id=”header”>
</div>

<div id=”menu”>
<ul>
<li><a href=”#”>haperlink one</a></li>
<li><a href=”#”>haperlink two</a></li>
<li><a href=”#”>haperlink three</a></li>
<li><a href=”#”>haperlink four</a></li>
<li><a href=”#”>haperlink five</a></li>
</ul>
</div>

<div id=”content”>
<p>content</p>
</div>

<div id=”footer”>
<a href=”http://webtut.6te.net”>Created by : Wai Lynn Oo</a>
</div>

</div>
</body>
</html>

About wailynnoo

wailynn oo has written 57 post in this Website..

I am a blogger.