ဘေလာ႔ဂ္တန္းပလိတ္မ်ားကုိ ခ်ဲ႔ျခင္း (၁)
ကၽြန္ေတာ္တုိ႔ေတြ မေတြ႔ျဖစ္တာလည္း အေတာ္ၾကာသြားျပီေနာ္. ေနေကာင္းၾကတယ္ဟုတ္.
ဒီတစ္ခါေတာ႔ ကၽြန္ေတာ္႔ကုိ ေမးလ္ပုိ႔ျပီး ေမးလာတဲ႔ ဘေလာ႔ဂါညီေလးတစ္ေယာက္ရဲ႔ ေမးခြန္းကုိ ေျဖရင္း အားလုံးကုိ ျပန္မွ်ေ၀ခ်င္တဲ႔ နည္းပညာေလးတစ္ခုအေၾကာင္း ေရးခ်င္ပါတယ္.
ဘေလာ႔ဂ္တန္းပလိတ္ကုိ ခ်ဲ႔နည္းပါ.
ဒီနည္းကုိ ဒီေနရာမွာ ေရးထားတာ ေတြ႔ဖူးပါတယ္. အခု ကၽြန္ေတာ္ကေတာ႔ ညီအစ္ကုိတုိ႔နဲ႔အတူတူ လက္ေတြ႔လုပ္ေဆာင္ရင္း ရွင္းျပသြားမွာ ျဖစ္ပါတယ္. တန္းပလိတ္ေတြက တစ္ခုနဲ႔တစ္ခု မတူေပမယ္႔ အုိင္ဒီယာက အတူတူပါပဲ.
ေရွ႔ဆက္မသြားခင္ အားလုံးသိခ်င္ေနမယ္႔ ေမးခြန္းတစ္ခုကို အရင္ဆုံးေျဖပါမယ္.
ဘာေၾကာင္႔ တန္းပလိတ္ကုိ ခ်ဲ႔ခ်င္ရတာလဲ..
အေျဖကရွင္းပါတယ္. နဂုိေပးထားတဲ႔အရာက က်ဥ္းေနလုိ႔ပါ. ကုိယ္က ဒီ႔ထက္ က်ယ္က်ယ္ပုိလုိခ်င္လုိ႔ပါ. ဒီ႔ထက္ရွင္းတဲ႔အေျဖရွိမယ္လည္း မထင္ေတာ႔ဘူး. ဟတ္ဟတ္.
ကၽြန္ေတာ္ နည္းႏွစ္နည္းခဲြျပီး ေဆြးေႏြးခ်င္ပါတယ္.
(၁) ရုိးရုိးတန္းပလိတ္မ်ားကုိ ခ်ဲ႔နည္းနဲ႔
(၂) Rounder Template မ်ားကုိ ခ်ဲ႔နည္း ဆုိျပီးေတာ႔ ျဖစ္ပါတယ္.
အခု ေရးမွာကေတာ႔ နံပါတ္တစ္ျဖစ္တဲ႔ ရုိးရုိးတန္းပလိတ္မ်ားကုိ ခ်ဲ႔နည္းပဲ ျဖစ္ပါတယ္.
ကဲ. ကၽြန္ေတာ္တုိ႔ စလုိက္ၾကရေအာင္လား…
ကၽြန္ေတာ္တုိ႔ကုိ Blogger က ေပးထားတဲ႔ တန္းပလိတ္ရုိးရုိးေလးေတြထဲက Minima Ochre ဆုိတဲ႔ တန္းပလိတ္ေလးကုိ ေရြးလုိက္ပါမယ္.
Layout Tab ေလးထဲက Edit HTML ကိုသြားျပီး အဲဒီ႔တန္းပလိတ္ေလးရဲ႔ CSS Coding ပုိင္းေလးကုိ အရင္ဆုံး ေလ႔လာၾကည္႔ပါမယ္.
အေပၚကပုံေလးကုိၾကည္႔ပါ.
Outer-wrapper ဆုိတာရယ္ Main-wrapper ဆုိတာရယ္နဲ႔ Sidebar-wrapper ဆုိတာရယ္ပါပဲ. တန္းပလိတ္ေတြ ဘယ္လုိေျပာင္းေျပာင္း အဲဒီ႔သုံးခုက တန္းပလိတ္ခ်ဲ႔မယ္ဆုိ သိထားရမယ္႔ Key Players ေတြပါ. 2-column-template ဆုိရင္ sidebar တစ္ခုပဲ ပါမယ္. 3-column-template ဆုိရင္ေတာ႔ left and right sidebars ေတြပါမယ္ေပါ႔ဗ်ာ.
တစ္ျခားသိထားသင္႔တဲ႔ အသုံးအႏႈန္းေလးေတြကေတာ႔ header-wrapper, content-wrapper စသည္တုိ႔ပဲ ျဖစ္ပါတယ္. ျဖည္းျဖည္းခ်င္းပဲ မိတ္ဆက္ေပးသြားမယ္ဗ်ာ.ေနာ္.
အခု ကၽြန္ေတာ္တုိ႔ရဲ႔ Minima Ochre တန္းပလိတ္ေလးမွာ Outer-wrapper ဆုိျပီး ရွာၾကည္႔လုိက္ရင္ ဒါမ်ိဳးေလးေတြ႔ရပါတယ္.
/* Outer-Wrapper
------------------------------
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
အဲဒါကုိ ဘယ္လုိနားလည္ေအာင္ လုပ္ရမလဲဆုိျပီး ေခါင္းစားမေနပါနဲ႔. ကၽြန္ေတာ္တုိ႔ သိရမယ္႔အရာ သုံးခုပဲ ရွိပါတယ္. အဲဒီ႔သုံးခု ဘယ္လုိဆက္စပ္ေနလဲဆုိတာကုိ နားလည္ထားရင္ တန္းပလိတ္ခ်ဲ႔နည္းကုိ ၅၀ % ေလာက္ သိျပီးသားျဖစ္သြားပါလိမ္႔မယ္. ဘယ္လုိလဲဆုိေတာ႔ ဂလုိပါ. း)
အီေကြးရွင္းေလးေပးမယ္ေနာ္. အလြတ္က်က္ထား.
ေခါင္းေတြခါကုန္ျပီလား. း)… ျပန္ရွင္းျပပါမယ္.
Main-Wrapper + Sidebar-Wrapper+Space Between = Outer-Wrapper
အခု ကၽြန္ေတာ္တုိ႔ရဲ႔ တန္းပလိတ္မွာ ဘာေလးေတြေတြ႔လဲဆုိေတာ႔ Width:660 px စတာေလးေတြေတြ႔ပါလိမ္႔မယ္. ဟုတ္တယ္ဟုတ္.
အဲဒါေလးေတြကုိ အစားျပန္သြင္းၾကည္႔မယ္ေနာ္.
410 +220 + Space between Main and Sidebar wrapper = 660
Space between Main and Sidebar wrapper = 660-(410+220) = 30
ဒါေၾကာင္႔ Space between Main and Sidebar Wrapper ဟာ 30 px ျဖစ္ပါတယ္.
Outer-wrapper ဆုိတာက တန္းပလိတ္ရဲ႔ ဘယ္ဖက္အစကေန ဟုိး ညာဖက္ အဆုံးထိတြက္ခ်က္ထားတာပါ. သူ႔ေအာက္မွာ ဘာေတြပါလဲဆုိေတာ႔ ပုိ႔စ္ေရးတဲ႔ေနရာျဖစ္တဲ႔ main-wrapper (or) content-wrapper ဆုိတာပါတယ္. ျပီးေတာ႔ အဲဒီ႔ Post Area နဲ႔ Sidebar ၾကားမွာ လပ္ေနတဲ႔ Space ေလးပါတယ္. အခုတန္းပလိတ္မွာ အဲဒီ႔ Space ေလးက 30 px ရွိတာေပါ႔. ျပီးေတာ႔ကာ sidebar-wrapper ပါတယ္. အဲဒီ႔သုံးခုေပါင္းလုိက္ရင္ outer-wrapper နဲ႔ ညီရပါမယ္. မဟုတ္ရင္ ကၽြန္ေတာ္တုိ႔ရဲ႔ တန္းပလိတ္ၾကီးဟာ အခ်ိဳးအစားမညီမွ်တာ ျဖစ္လာႏုိင္ပါတယ္.
ကဲ. ဒါဆုိရင္ အုိင္ဒီယာရျပီေပါ႔ေနာ္. ကၽြန္ေတာ္တုိ႔က ပုိ႔စ္ေရးတဲ႔ေနရာျဖစ္တဲ႔ main-wrapper (သုိ႔) content-wrapper ေနရာကုိ ခ်ဲ႔ရမွာပါ. သူ႔ကုိခ်ဲ႔သေလာက္ Outer-wrapper ကုိလည္း လုိက္ၾကီးေပးဖုိ႔ လုိပါတယ္.
ထားပါေတာ႔ဗ်ာ. အခုကိစၥမွာ Outer-wrapper က 660 px ျဖစ္ျပီးေတာ႔ main-wrapper က 410 px ပဲရွိတယ္. ကၽြန္ေတာ္က အဲဒီ႔ main-wrapper ကုိ ေနာက္ထပ္ 200 px ထပ္ေပါင္းခ်င္တယ္. ဆုိလုိတာက 410+200 = 610 px ျဖစ္ခ်င္တာေပါ႔.
ဒီေတာ႔ ကၽြန္ေတာ္တုိ႔အတြက္ ထပ္ေပါင္းထည္႔မယ္႔ နံပါတ္က 200 px ျဖစ္ေနတယ္. အဲဒီ႔ေကာင္ကုိ Outer-wrapper မွာ ျပန္ေပါင္းထည္႔ေပးဖုိ႔ လုိျပီေပါ႔. ဟုတ္တယ္ဟုတ္.
ဒါေၾကာင္႔ ကၽြန္ေတာ္တုိ႔ရဲ႔ တြက္ခ်က္မႈက ဒီလုိျဖစ္လာပါတယ္.
Main-wrapper = 410+200 = 610
Outer-wrapper = 660 + 200 = 860
Sidebar-wrapper = no change
Space Between = no change
အေပၚက ကုဒ္ဒင္းေလးေတြေနရာမွာ တစ္ခါတည္း အစားသြင္းလုိက္မယ္ေနာ္.
/* Outer-Wrapper
------------------------------
#outer-wrapper {
width: 860px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 610px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
အဲဒီ႔အတုိင္းျပင္ျပီး တန္းပလိတ္ကုိ Save လုိက္ပါတယ္. ကဲ. ကၽြန္ေတာ္တုိ႔ရဲ႔ Result ကုိ ျပန္ၾကည္႔ရေအာင္.
တန္းပလိတ္ေလး က်ယ္သြားျပီဟုတ္…
ကၽြန္ေတာ္သိတယ္. ဒီလုိပဲ ကၽြန္ေတာ္လည္း အေတြ႔အၾကဳံက ရင္းျပီး သင္ယူလာခဲ႔ရတာမုိ႔ အကုန္လုံးကုိ မေျပာျပဘဲ ဘာေၾကာင္႔ ဒီလုိျဖစ္ရတယ္ဆုိတာကုိ ခင္ဗ်ားကုိယ္တုိင္သိေစခ်င္လုိ႔
ေစတနာကုိ နားလည္ပါဗ်ာ. ေနာ္.
နားမလည္လည္းေနေတာ႔… ဘာျဖစ္တယ္ဆုိတာ ဆက္ေျပာျပမယ္. ဟတ္ဟတ္.
တန္းပလိတ္ရဲ႔ Post Area ကေတာ႔ က်ယ္သြားပါရဲ႔. ဒါေပမယ္႔ Header က လုိက္မက်ယ္ဘဲ က်န္ေနခဲ႔တယ္.
ဒီေတာ႔ ကၽြန္ေတာ္တုိ႔ ကိုယ္႔ကုိယ္ကုိ ဘယ္လုိေမးသင္႔လဲ.
Header ကုိ ထိန္းထားတဲ႔ coding တစ္ခုခုေတာ႔ ရွိရမယ္.
Alright! Let’s go, baby!
တန္းပလိတ္ထဲကုိ ျပန္သြား… Header-wrapper ဆုိျပီး ရိုက္ၾကည္႔လုိက္ေတာ႔
လားလား ( ျမင္းမဟုတ္ပါ)
/* Header
------------------------------
*/
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
အဲဒီ႔မွာ ေတြ႔ပါျပီဗ်ာ…
သူ႔ရဲ႔ width က 660 px တဲ႔. ကဲ. ကၽြန္ေတာ္တုိ႔ ဘယ္လုိဘာသာျပန္မလဲ
တန္းပလိတ္ကုိ မခ်ဲ႔ခင္က main-wrapper (or) content-wrapper ရဲ႔ width က ဘယ္ေလာက္ရွိခဲ႔လဲ. ျပန္ၾကည႔္လုိက္ရေအာင္.
610 px တဲ႔..
အင္း… ဒါဆုိရင္ေတာ႔ header-wrapper နဲ႔ main-wrapper မဆက္စပ္ဘူး. ေနာက္ထပ္လုိက္ရွာၾကည္႔လုိက္ရေအာ
ေတြ႔ပါျပီဗ်ာ.
Outer-wrapper ကလည္း 660 px ပဲ.
There you go!... We made it…
ဒါေၾကာင္႔ Outer-wrapper နဲ႔ Header-wrapper ဟာ အတူတူပဲ. ဘေလာ႔ဂ္တန္းပလိတ္ကုိ ခ်ဲ႔ရင္ Outer-wrapper ကုိတင္မကဘူး. Header-wrapper ကုိပါ လုိက္ရွာျပီး ျပင္ေပးဖုိ႔လုိတယ္လုိ႔ ကၽြန္ေတာ္တုိ႔ ေကာက္ခ်က္ခ်လုိက္ပါတယ္.
Header ေနရာဟာ တကယ္ေတာ႔ Banner ေနရာနဲ႔ အတူတူပါပဲ. ဒါေၾကာင္႔ ကုိယ္႔မွာ ဘန္နာေလးေတြ တင္ျပီးသားျဖစ္ေနခဲ႔ရင္လည္း အဲဒီ႔ဘန္နာကုိပါ လုိက္ျပီး ျပန္ခ်ဲ႔ေပးဖုိ႔လုိတယ္လုိ႔ မွတ္ရပါမယ္.
ကဲ. Header-wrapper ကုိ Outer-wrapper ရဲ႔ width အတုိင္းျပင္ျပီေနာ္.
/* Header
------------------------------
*/
#header-wrapper {
width:860px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
တန္းပလိတ္ကုိ Save လုိက္မယ္. ျပီးေတာ႔ ကၽြန္ေတာ္တုိ႔ ရင္ခုန္စြာ ျပန္ၾကည္႔လုိက္ၾကရေအာင္လား.
Ahhhhhh… Man….
C’mon, man! Who’s your daddy?
လုိ႔ ေကာ႔ထားတဲ႔ ရင္ဘတ္ၾကီးကုိ ကုိယ္႔ညာဖက္လက္နဲ႔ ဘန္းခနဲ ရုိက္ထည္႔လုိက္စမ္းပါ. ျပီးေတာ႔ကာရင္ေကာ႔ေခါင္းေမာ႔ျပီ
အဲဒါပဲ. ကုိယ္႔လူ…
သိပ္လည္း ေျမာက္မသြားနဲ႔ဦး..
Rounder Template ေတြကုိ ခ်ဲ႔နည္း က်န္ေသးတယ္. ဟတ္ဟတ္ဟတ္.
Note:
Sidebar-wrapper ကုိ ခ်ဲ႔ခ်င္လည္း ရပါတယ္. Sidbar နဲ႔ Main ၾကားက Space ကုိ အတုိးအေလွ်ာ႔ လုပ္ခ်င္လည္း ရပါတယ္. ဘာေတြ ဘယ္လုိပဲလုပ္လုပ္ Outer-wrapper ရဲ႔ width ကုိ မေက်ာ္ရင္ ျပီးတာပါပဲ. ေက်ာ္ရင္ ဘယ္လုိျဖစ္မလဲ ကၽြန္ေတာ္႔ကုိ မေမးနဲ႔. ကုိယ္တုိင္သာစမ္းၾကည္႔…
ကၽြန္ေတာ္ကေတာ႔ မ်ိဳးၾကီးရဲ႔ သီခ်င္းေလးနားေထာင္ရင္း ျငိမ္႔ေနလုိက္မယ္.
“အုိးးးးးးးးး ကုိ႔ယုိးကားယားးးး
အုိးးးးကုိ႔ယုိးကားယားးး”
ကဲ. အားလုံးပဲ ရယ္ေမာေပ်ာ္ရႊင္ႏုိင္ၾကပါေစသတည္
အားလုံးကုိခ်စ္ခင္ေလးစားလ်က္
ရန္ေအာင္
