List မွာ အဓိက ႏွစ္မ်ိဳးရွိပါတယ္။ ၄င္းတုိ.မွာ
Unordered Lists ႏွင့္
Ordered Lists တို.ျဖစ္ၾကပါတယ္။
ေအာက္ပါ Example တြင္ CSS မွာ Lists style ႏွစ္မ်ိဳး အတြက္ class selector ကိုအသံုးျပဳျပီး ေရးျပထားပါတယ္။
<!DOCTYPE html>
<html>
<head>
<style>
ul.c {list-style-type:circle;}
ul.s {list-style-type:square;}
ol.r {list-style-type:upper-roman;}
ol.a {list-style-type:lower-alpha;}
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="c">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
</ul>
<ul class="s">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="r">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
</ol>
<ol class="a">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
</ol>
</body>
</html>
<Style> tag ထဲမွ upper-roman ေနရာမွာ lower-roman ႏွင့္ lower-alpha ေနရာမွာ upper-alpha အျဖစ္ေျပာင္းေရးလို. လဲရပါတယ္။
ဒီတစ္ခါေတာ့ က်ေနာ္တို.ကိုယ္တိုင္ ဖန္တီးထားတဲ့ image နဲ. Bullet ေနရာေတြမွာ ထည့္သံုးၾကည့္္ပါမယ္။ က်ေနာ္ကေတာ့ ေအာက္ပါပံုေလးကို အသံုးျပဳပါမယ္။ name ကိုေတာ့ arrow လို.ေပးထားျပီး .png file အမ်ိဳးအစားျဖစ္ပါတယ္။
<!DOCTYPE html>
<html>
<head>
<style>
ul {list-style-image:url('arrow.png');}
</style>
</head>
<body>
<h3>Example of list style.</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
</ul>
</body>
</html>
ယခုေရးျပထားတဲ့ image list ေရးနည္းက browser တစ္ခုနဲ.တစ္ခု ေဖာ္ျပရာမွာ မတူညီပါဘူး။ Users ေတြအသံုးျပဳတဲ့ Browser version ကလည္းမတူညီႏိုင္ပါဘူး။ IE Browser version ကနိမ့္ေနပါက တစ္ခါတစ္ေလ ေဖာ္ျပတာေတြ လြဲေနတတ္ပါတယ္။ မိမိေရးသားတဲ့ ဒီဇိုင္းတစ္ခု က မည္သည့္ Browser မွာၾကည့္ၾကည့္ တစ္ပံုစံတည္းျဖစ္ဖို. အေရးၾကီးပါတယ္။ ေနာက္တစ္ခုက bullet ပံုကို ကိုယ္တိုင္ဖန္တီးတာျဖစ္တဲ့ အတြက္ တစ္ခါေလ ပံုက အေပၚသို.တက္ေနျခင္း သို.မပာုတ္ စာ၏ေအာက္ေျခႏွင့္ တတန္းတည္း ျဖစ္ေနျခင္းမ်ားၾကံဳရတတ္ပါတယ္။ ဒါေၾကာင့္ Browser အားလံုးမွာ တစ္ပံုစံတည္းေဖာ္ျပ ႏိုင္ရန္ႏွင့္ position ကို လိုအပ္သလို ျပဳလုပ္ႏိုင္ဖို. Crossbrowser Solution ျဖစ္တဲ့ ေအာက္ပါ ေရးနည္း ကို Web Designers မ်ားက အသံုးျပဳၾကပါတယ္။ ေလ့လာၾကည့္ပါ။
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
padding-left:20px;
margin:0px;
}
ul li
{
background-image:url(arrow.png);
background-repeat:no-repeat;
background-position:0px 7px;
padding-left:15px;
}
</style>
</head>
<body>
<h3>Example of List Style</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
</ul>
</body>
</html>
ul အတြက္ေရးသားေသာ ul{list-style-type:none;padding:20px;margin:0px;} တြင္ list-style-type:none ဆိုသည္မွာ default bullet ကိုမေဖာ္ျပခ်င္လို.ျဖစ္ပါတယ္။
padding: 20px; ႏွင့္ margin: 0px; တို.ကိုေရးသားရျခင္းမွာ မည္သည့္ browser မွာပဲျဖစ္ျဖစ္ ေနရာမေရြ.ပဲ အကြာအေ၀းတစ္ခုတည္းမွာ တိက် တူညီစြာ ေဖာ္ျပေပးႏိုင္ဖို. ျဖစ္ပါတယ္။ အဲဒါမထည့္ထားလ်င္ IE ႏွင့္ Firefox စသည္ တို.တြင္ေဖာ္ျပတဲ့ အခါ ေနရာေလးေတြ အနည္းငယ္လြဲ ျပီးျပတတ္ပါတယ္။
ul{list-style-type:none;padding-left:20px;margin:0px;} တစ္ခုလံုးကို ျဖတ္ျပီး Broswer တြင္ Run ၾကည့္ပါက က်ေနာ္တို.ထည့္ထားေသာ bullet image အျပင္ CSS ၏ default bullet ပါေပၚေနပါတယ္။
padding-left:20px; ဆိုတာက ဘယ္ဘက္အျခမ္း 20px အကြာမွ စျပီး list ေတြကိုျပဖို.ျဖစ္ပါတယ္။ တန္ဖိုးကို မိမိစိတ္ၾကိဳက္ ထည့္ျပီး ေလ့လာၾကည့္ပါ သေဘာေပါက္သြားပါလိမ့္မယ္။
Padding ႏွင့္ Margin အေၾကာင္းကို ေနာက္လာမည့္ Padding ႏွင့္ Margin Chapter မ်ားမွာ အေသးစိတ္ ရွင္းျပသြားပါ့မယ္။
ဆက္လက္ျပီး...
ul li
{
background-image:url(arrow.png);
background-repeat:no-repeat;
background-position:0px 7px;
padding-left:15px;
}
ကိုရွင္းျပပါ့မယ္။
ပံုေတြကို စိတ္ၾကိဳက္ေနရာေတြမွာ လိုအပ္တလို ေနရာခ်ျပီး ထားႏိုင္ဖို. ပံုကို background-image အေနနဲ. အသံုးျပဳျခင္းျဖစ္ပါတယ္။ တကယ္လို. list-style-image: url(‘’); ျဖင့္ ေရးပါက မိမိထားခ်င္ေသာ position အတြက္ ခက္သြားပါတယ္။
background-repeat: no-repeat; ကိုမေရးထားပါက ပံုကို ထပ္ခါေဖာ္ျပေပးသြားႏိုင္ပါတယ္။
background-position: 0px 7px; တြင္ 0px သည္ left position (ဘယ္ဘက္အျခမ္းမွအကြာ အေ၀း) ကိုရည္ညြန္းျပီး 7px သည္ top position ကိုေဖာ္ျပျခင္း ျဖစ္ပါတယ္။ 7px အကြာမွ ေဖာ္ျပဖို. ေရးသားျခင္းျဖစ္ပါတယ္။ မိမိရဲ့ အသံုးျပဳတဲ့ image ေပၚတြင္မူတည္ျပီး 7px ေနရာမွာ လိုအပ္သလို တန္ဖိုးကို ခ်ိန္ညွိေရးသားရပါမယ္။
padding-left:15px; မွာ List style အကြာအေ၀း ကိုခ်ိန္ညွိဖို.အတြက္ျဖစ္ပါတယ္။ <li> tag ထဲမွာေရးထားတဲ့ စာသားေတြကို ဘယ္ဘက္ 15px အကြာမွ စျပီးျပဖို.ျဖစ္ပါတယ္။ 15 ေနရာမွာ တန္ဖိုးတစ္ခုျပီး တစ္ခု ေျပာင္းေရးျပီး Browser မွာ refresh လုပ္ျပီးေလ့လာၾကည့္ပါ။ သေဘာေပါက္သြားပါလိမ့္မယ္။
အားလံုးပဲ Crossbrowser Solution ျဖစ္ေသာ List style ေရးနည္းကိုသေဘာ ေပါက္မယ္လို. ေမ်ွာ္လင့္ပါတယ္။
No comments:
Post a Comment