Web template with css
wailynnoocss နဲ့ 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>