(သင္ခန္းစာမစခင္မွာ ႀကိဳတင္ေျပာထားခ်င္တာေလးရွိပါတယ္၊ ယခုလက္ရွိ facebook မွာ တင္ရတာျဖစ္တဲ့အတြက္ ပံုနဲ႔တကြ ေဖာ္ျပဖို႔ အခက္အခဲရွိပါတယ္၊ note အေနနဲ႔တင္ရင္ ျဖစ္ေသာ္လဲ note အေနနဲ႔တင္ရင္ စိတ္၀င္စားမႈ နည္းတဲ့အတြက္ လက္ရွိသင္ခန္းစာေတြကို pdf file နဲ႔ ေအာက္မွာ တင္ေပးထားမွာျဖစ္သလို ေရးၿပီးသား ကုဒ္ေတြကိုလဲ အလြယ္တကူ Download ရယူၿပီး စမ္းသပ္ၾကည့္ႏိုင္ပါတယ္၊ ဒါကိုမွ နားမလည္ႏိုင္ေသးဘူးဆိုရင္ေတာ့ comment ခ်န္၍ေသာ္လည္းေကာင္း၊ brightermyanmar@gmail.com သို႔ email ပို႔၍ေသာ္လည္းေကာင္း ေမးျမန္းႏိုင္ပါေၾကာင္း ႀကိဳတင္ အသိေပးအပ္ပါတယ္ခင္ဗ်ာ)
သင္ခန္းႏွင့္ပါတ္သက္လို႔ နည္းနည္းေလးေျပာခ်င္ပါတယ္။ HTML ကို CSS နဲ႔ အလွဆင္ရာမွာ Inline style, Internal style ႏွင့္ External style ဟူ၍ (၃) မ်ိဳး ရွိေသာ္လည္း External style ကိုပဲ အသံုးျပဳသြားပါမယ္။
ပထမဆံုး HTML file ကို ေအာက္ပါအတိုင္းတည္ေဆာက္ပါမယ္။
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Brighter Myanmar</title>
</head>
<body>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
</ul>
</nav>
</body>
</html>
အထက္ပါကုဒ္ကို မိမိႏွစ္သက္ရာ file name ေပးၿပီး .html ျဖင့္ save လိုက္ပါ။
ေနာက္တစ္ဆင့္အေနနဲ႔ Css file ကို တည္ေဆာက္ရပါမယ္။ file နာမည္ကို style.css လို႔ နာမည္ေပးပါမယ္။ ၎ file ကို HTML file နဲ႔ ခ်ိပ္ဆက္အလုပ္လုပ္ရန္ ေအာက္ပါအတိုင္း <header> tab အတြင္းမွ </title> အပိတ္ေအာက္မွာ ေရးပါမယ္။
<title>Brighter Myanmar</title>
<link rel="stylesheet" href="style.css" />
CSS file တည္ေဆာက္ျခင္း စတင္ၾကရေအာင္။
ပထမဆံုး Css တည္ေဆာက္တိုင္း ေအာက္ပါ code ကို ထည့္သင့္ပါတယ္။
*{
margin:0;
padding:0;
}
select လုပ္ထားတဲ့ selector * ေလးကေတာ့ body အတြင္းမွ tab ေတြ အားလံုးကို select မွတ္တဲ့ အဓိပၸါယ္ပါပဲ။ ဘာလို႔ margin:0; , padding:0; ထားတာလဲဆိုေတာ့ နဂိုမူလအတိုင္းဆို <html> ႏွင့္ </html> အၾကားက tab ေတြ တစ္ခုနဲ႔တစ္ခုၾကား အလိုအေလွ်ာက္ 5- pixels(5px) ကြာေ၀းေနမွာျဖစ္ပါတယ္။
ေနာက္ပိုင္း Website တစ္ခုလံုးတည္ေဆာက္ရာမွာ tab ေတြအားလံုးရဲ့ margin ႏွင့္ padding ေတြရဲ့တန္ဖိုးကို လိုအပ္သလို သတ္မွတ္ေပးမွာျဖစ္ပါတယ္။
လက္ရွိအခ်ိန္မွာ run ၾကည့္လိုက္ရင္ေတာ့ အရင္ပံုစံနဲ႔မတူဘဲ margin:0 ရဲ့ အဓိပၸါယ္ကို သိရမွာျဖစ္ပါတယ္။ maring ကို 0 ထားလိုက္တဲ့အတြက္ အေပၚဘက္နဲ႔ ဘယ္ဘက္မွာ ေဘာင္ကပ္သြားတာကိုေတြ႔ရပါတယ္။
ေနာက္တစ္ဆင့္အေနနဲ႔ Navigation ရဲ့ အက်ယ္နဲ႔ ေနာက္ခံအေရာင္ကို ေအာက္ပါအတိုင္း ေပးပါမယ္။
nav{
width:1000px;
background:skyblue;
margin:0 auto;
}
အထက္ပါကုဒ္မွာ margin:0 auto; ဆိုတာကိုရွင္းပါမယ္ ေရွ႕က 0 က အထက္နဲ႔ေအာက္ဘက္ရဲ့ margin ကို 0 ထားမယ္လို႔ေျပာပါတယ္၊ ေနာက္က auto ဆိုတာကေတာ့ ဘယ္ဘက္နဲ႔ညာဘက္ကို အလိုလိုတစ္၀က္ဆီခြဲလိုက္တာပါပဲ။
ေနာက္တစ္ဆင့္အေနနဲ႔ေအာက္ပါ ကုဒ္ကိုေရးပါမယ္။
ul li{
width:200px;
background:chocolate;
line-height:35px;
text-align:center;
list-style:none;
}
List item တစ္ခုခ်င္းဆီရဲ့ အက်ယ္ကို ၂၀၀ ထားပါမယ္၊ ဘာလို႔လဲဆိုေတာ့ nav ရဲ့ အက်ယ္ကို ၁၀၀၀ ေပးခဲ့လို႔ပါပဲ၊ list item က ၅ ခုယူထားတဲ့အတြက္ တစ္ခုကို ၂၀၀ ေပးပါတယ္။
ေနာက္တစ္ခုက list ရဲ့ ေနာက္ခံအေရာင္ကို chocolate ဆိုတဲ့အေရာင္ေပးပါမယ္။ အေရာင္စပ္တာ ညံ့သည့္အတြက္ အေရာင္ေတြကို နာမည္ေတြနဲ႔ပဲ အမ်ားဆံုးအသံုးျပဳသြားမွာပါ။ ေနာက္တစ္ေၾကာင္းျဖစ္တဲ့ line-height ဆိုတာကေတာ့ list ရဲ့ အထက္ေအာက္ အက်ယ္ပါပဲ၊ ဒီေနရာမွာ height ကိုသံုးရင္ list ရဲ့အထဲက စာလံုးေတြ (Content)ဟာ အထက္ေအာက္အလယ္မွာေနရာယူမွာမဟုတ္ပါဘူး၊ ဒါေၾကာင့္ line-height ကို သံုးရတာပါ။ ေနာက္တစ္ခု text-align:center; ဆိုတာကေတာ့ list item ရဲ့ width အက်ယ္ 200 pixel ရဲ့အလယ္မွာ ေနရာယူမယ္လို႔ ဆိုလိုပါတယ္။ ေနာက္တစ္ခု list-style:none; ဆိုတာကေတာ့ list တစ္ခုခ်င္းဆီရဲ့ေရွ႕က အစက္အေပ်ာက္ေလးေတြကို ေဖ်ာက္တာပါပဲ၊ ဒီေနရာမွာ မေဖ်ာက္ခ်င္ဘဲ တျခား စတိုင္ေလးေတြလဲသံုးလို႔ရပါတယ္။ ဒါေတြကေတာ့ square, circle,disc စတာေတြလဲ အသံုးျပဳႏိုင္ပါတယ္။
ေနာက္တစ္ဆင့္အေနနဲ႔ vertical လိုက္ျဖစ္ေနတဲ့ list ေတြကို horizontal အျဖစ္ေျပာင္းလဲေစဖို႔ အထက္ပါကုဒ္ ေအာက္မွာပဲ float:left; ကိုသံုးရပါမယ္။
float:left;
List items ေတြကို horizontal အျဖစ္ေျပာင္းလဲၿပီး ကၽြန္ေတာ္တို႔လိုခ်င္တဲ့ စတိုင္ လွလွေလးျဖစ္ေအာင္ ေအာက္ပါကုဒ္ေတြေရးရပါမယ္။
ul li{
width:200px;
background:chocolate;
line-height:35px;
text-align:center;
list-style:none;
float:left;
border-right:2px groove sienna;
-moz-box-sizing:border-box;
}
ul li:first-child{
border-left:2px groove sienna;
}
ul li a{
text-decoration:none;
}
border-right:2px groove black; ဆိုတာကေတာ့ List တစ္ခုခ်င္းဆီရဲ့ ညာဘက္မွာ border ေပးမွာျဖစ္ပါတယ္၊ border အထူကို 2px ေပးပါတယ္။ groove ဆိုတာကေတာ့ border ရဲ့ style ပါပဲ။ မ်ားေသာအားျဖင့္ ဒီေနရာမွာ solid ကိုသံုးၾကပါတယ္။ ကၽြန္ေတာ္ကေတာ့ ပိုလွေအာင္ groove ကိုသံုးလိုက္တာပါ။ sienna ဆိုတာကေတာ့ အေရာင္နာမည္တစ္ခုပါ။ chocolate ထက္ပိုၿပီးထင္တဲ့အေရာင္ကိုေရြးထားတာျဖစ္ပါတယ္။ ေနာက္တစ္ခု -moz-box-sizing:border-box; ဆိုတာကိုေသခ်ာရွင္းျပပါမယ္။ ပံုမွန္အတိုင္းဆို border 2px ထည့္လိုက္ရင္ List ေတြရဲ့ width ဟာ 2px ဆီ ထပ္ၿပီးေတာ့ က်ယ္သြားပါတယ္၊ ကၽြန္ေတာ္တို႔ nav ကို 1000px ယူခဲ့တဲ့အတြက္ List ၅ ခုအတြက္ 200px ဆီပဲရမွာပါ။ border အတြက္ 2px ထပ္ေပါင္းထည့္လိုက္ရင္ ေနာက္ဆံုး List ဟာ ေအာက္ကိုအလိုလိုေရာက္သြားပါလိိမ့္မယ္၊ ဒါေၾကာင့္ box-sizing:border-box; ကိုသံုးရတာပါ။ဒီလိုသံုးလိုက္လို႔ border တစ္ခုခ်င္းဆီအတြက္ 2px ေနရာမယူေတာ့ပါဘူး၊ ေရွ႕ဆံုးက ေရးထားတဲ့ -moz- ဆိုတာကေတာ့ ဒီ box-sizing:border-box; ကုဒ္ကို Mozilla မွာ သံုးရင္ Mozilla က မသိမွာမို႔ Mozilla အတြက္ -moz- ကိုေရွ႕ဆံုးက ထည့္ေပးရတာပါ။ Google Chrome အတြက္ကေတာ့ -webkit- ကိုသံုးပါတယ္။ Internet Explorer အတြက္ -ms- ကိုသံုးပါတယ္ Opera အတြက္ -o- ကို ထည့္သြင္းေရးသားရမွာျဖစ္ပါတယ္။
ေနာက္တစ္ခုအေနနဲ႔ ul li:first-child{ border-left:2px groove sienna; } ဆိုတာကေတာ့ ပထမဆံုး List ရဲ့ ဘယ္ဘက္ကိုလဲ border 2px ေပးမယ္လို႔ ဆိုလိုပါတယ္။
ul li a{ text-decoration:none;} ဆိုတာကေတာ့ Home ဆိုတဲ့ စာသားေလးေတြရဲ့ေအာက္က underline ေတြကို ေဖ်ာက္လိုက္တာျဖစ္ပါတယ္၊ ျပန္ထည့္ခ်င္တယ္ဆိုရင္ေတာ့ text-decoration:underline; ကိုသံုးရမွာပါ။ underline အစား blink ဆိုတာကိုလဲ အသံုးျပဳႏိုင္ပါတယ္၊ blink ကိုသံုးလိုက္ရင္ေတာ့ စာလံုးေလးေတြက ေပၚလိုက္ ေပ်ာက္လိုက္ျဖစ္ေနမွာ ျဖစ္ပါတယ္။
ေနာက္ဆံုးအေနနဲ႔ ပံုမွာျပထားတဲ့အတိုင္း Navigation ေဘးဘက္ေတြမွာ အခၽြန္ေလးေတြထပ္ထည့္ပါမယ္။ ဒီအခၽြန္ေလးေတြထည့္ဖို႔ ေရးနည္းမ်ိဳးစံုရွိတဲ့အထဲက အထက္မွာသတ္မွတ္ထားတဲ့ nav ရဲ့ width 1000 ကိုျပန္လည္ျပင္ဆင္ျခင္းမရွိဘဲ လုပ္လို႔ရတဲ့ နည္းလမ္းကိုသံုးသြားမွာပါ။ ဒီအတြက္ ေအာက္ပါ ကုဒ္ေတြလိုပါတယ္။
nav:before{
content:"";
font-size:0px;
border:17.5px solid chocolate;
position:absolute;
right:100%;
border-left-color:transparent;
}
nav:after{
content:"";
font-size:0px;
border:17.5px solid chocolate;
position:absolute;
left:100%;
border-right-color:transparent;
}
အထက္ပါကုဒ္မွာ nav:before ဆိုတဲ့ selector ရဲ့အဓိပၸါယ္ကေတာ့ ေစာေစာကရွိၿပီးသား nav ရဲ့ေရွ႕မွာ ေနရာသတ္မွတ္လိုက္တာပါ။ ေနာက္ဆံုး result ပံုရဲ့ ေရွ႕ဆံုးက ၾတိဂံအခၽြန္ေလးရဖို႔ပါပဲ။ content:””; ဆိုတာကေတာ့ ဘာမွေရးမထားတဲ့ content တစ္ခုကိုသတ္မွတ္တာပါ။ ဒီဘာမွမရွိတဲ့ content ကိုပဲ ကၽြန္ေတာ္တို႔ Border ယူၿပီး သံုးသြားမွာပါ။ font-size:0px; ဆိုတာကေတာ့ လက္ရွိ content မွာ ဘာမွမေရးဘဲ ဗလာျဖစ္ေနေပမယ့္ font-size ရဲ့ height ကို 16 pixel အလိုလိုယူထားျခင္းျဖစ္လို႔ font-size ကို 0 သတ္မွတ္ေပးရတာပါ။ ဒီေနရာမွာ နားမလည္ႏိုင္တာ တစ္ခုရွိပါလိမ့္မယ္။ font-size ကလဲ 0 ေပးထားတယ္၊ content မွာလဲ ဘာစာမွေရးမထားဘဲ ဘယ္လိုလုပ္ Border ေပးလို႔ရမလဲေပါ့၊ ဒါေပမယ့္ ရပါတယ္၊ ဘာမွမရွိဘူးဆိုေပမယ့္ အဲ့ဒီမရွိဘဲယူထားတဲ့ ေနရာေလးကိုပဲ Border ယူသြားတာပါ။ border:17.5px solid chocolate; ဆိုတာကေတာ့ border အထူကို 17.5px ထားပါမယ္။ ဘာလို႔လဲဆိုေတာ့ ကၽြန္ေတာ္တို႔ List ေတြရဲ့ height ကို 35px ထားခဲ့လို႔ပါပဲ။ 17.5px ရွိတဲ့ border ၂ ခုေပါင္းလိုက္မွ 35px အျမင့္ရွိတဲ့ List ရဲ့ height ကို မီမွာျဖစ္လို႔ပါ။ solid ဆိုတာကေတာ့ မ်ဥ္ေၾကာင္းလို႔ တစ္ဆက္တည္းယူတာပါ၊ chocolate ဆိုတာကေတာ့ List ရဲ့ အေရာင္နဲ႔တူေအာင္ ယူလိုက္တာပါ။
ဆက္ၿပီး position:absolute; ထားဖို႔အတြက္ nav မွာသြားၿပီး position:relative; ထားရပါမယ္။ ေအာက္ပါကုဒ္ကိုၾကည့္လိုက္ပါ။
position:relative;
selector တစ္ခုအတြင္းမွာ position ကို absolute ထားလိုက္ရင္ page တစ္ခုလံုးမွာ ႀကိဳက္ႏွစ္သက္တဲ့ေနရာကိုေရႊ႕ႏိုင္ပါတယ္။ ဒါေပမယ့္ nav မွာ position:relative; ထားျခင္းအားျဖင့္ nav ကေနပဲ စမွတ္ယူၿပီး ေရႊးလွ်ားမယ္လို႔ ဆိုလိုပါတယ္။ ခု လက္ရွိ right:100%; ထားလိုက္ျခင္းဟာ nav ဆိုတဲ့ Element တစ္ခုလံုး ရဲ့ ညာဘက္ကေန တစ္ရာ ရာခိုင္ႏႈန္းေရြ႕မယ္လို႔ဆိုလိုပါတယ္။ 100% ေရႊ႕လိုက္ရင္ 100% အေက်ာ္ျဖစ္တဲ့ nav ရဲ့ ဘယ္ဘက္မွာ လာကပ္မွာျဖစ္ပါတယ္။ ေနာက္တစ္ေၾကာင္းအေနနဲ႔ border-left-color:transparent; မွာ transparent ဆိုတာ ထိုးေဖာက္ျမင္ႏိုင္ျခင္း ဆိုတဲ့အဓိပၸါယ္အရ border ရဲ့ ဘယ္ဘက္က အေရာင္ကို ေဖ်ာက္ေပးလိုက္ျခင္းျဖစ္ပါတယ္။ ဒါေၾကာင့္ ကၽြန္ေတာ္တို႔လိုခ်င္တဲ့ အခၽြန္ေလးရလာျခင္းျဖစ္ပါတယ္။
ေအာက္က nav:after ဆိုတဲ့အရာကလဲ nav:before နဲ႔အတူတူပါပဲ။ ဘယ္ညာပဲကြာသြားတာပါ။ ဒါေၾကာင့္ left ကို right ေျပာင္း ၊ right ကို left ေျပာင္းလိုက္ရင္ အဆင္ေျပသြားမွာပါ။ ဒီသင္ခန္းစာကို ဒီေလာက္နဲ႔ပဲ အဆံုးသတ္ပါရေစ။ ေနာက္ဆံုးလုပ္သြားခ်င္တာက ကၽြန္ေတာ္တို႔ရဲ့ Navigation ေလးကို အေပၚမွာ ကပ္မေနေစဘဲ ေအာက္ကို နည္းနည္းဆင္းသြားေစဖို႔ nav ရဲ့ margin top ကို 50px ထားလိုက္ပါမယ္။
nav{
width:1000px;
background:skyblue;
margin:0 auto;
position:relative;
margin-top:50px;
}
အထက္ပါကုဒ္အတိုင္း margin-top:50px; ကိုမေရးဘဲ margin:0 auto; ေနရာမွာ margin:50px auto 0px; လို႔ျပင္လိုက္ရင္လဲ ရပါတယ္။ ဒါေပမယ့္ အထက္မွာေရးထားတာကို မျပင္ခ်င္တဲ့အတြက္ ေအာက္ကတစ္ေၾကာင္းသီးသန္႔ေရးလိုက္တာပါ။
ခုလိုဖတ္ေပးတာေက်းဇူးအမ်ားႀကီးတင္ပါတယ္ခင္ဗ်ာ။ ေနာက္ရက္မွာ ဆက္လက္တင္ျပပါဦးမယ္။ နားမလည္တာမ်ားရွိခဲ့ရင္ facebook မွာ comment ခ်န္ခဲ့ျခင္းျဖင့္လည္းေကာင္း၊ brightermyanmar@gmail.com သို႔ စာေရးသားေပးပို႔၍လည္းေကာင္း ေမးျမန္ႏိုင္ပါတယ္ခင္ဗ်ာ။
ဒီပိုုစ့္ကိုု pdf ဖိုုင္ အျဖစ္ ေဒါင္းလုုဒ္လုုပ္လိုု ပါက ေအာက္ပါ လင့္တြင္း ေဒါင္းလုုပ္ရယူႏုုိင္ပါသည္
http://goo.gl/2sGPuy
ဒီ project code ကိုု ေအာက္ပါ လင့္ မွာ ေဒါင္းပါ
http://goo.gl/2IWOha
Brighter Myanmar
We Code the World
0 comments:
Post a Comment