Template Width ခ်ဲ႔နည္း

ဒီပုိ႔စ္ေလးကုိ ျမန္မာဘေလာ႔ဂါဖုိရမ္ ကေန ယူလာခဲ႔ပါတယ္

တန္းပလိတ္ကို width change ခ်င္တယ္ဆိုရင္ေတာ့ ပထမဆံုးတန္းပလိတ္္ ကုဒ္ေတြကိုၾကည့္လိုက္ပါ။ ၿပီးရင္ေအာက္မွာျပထားတဲ့ကုဒ္ေတြကိုရွာပါ။

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: normal normal 100% Georgia, Serif;
}

#main-wrapper {
width: 410px;
float: left;
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: right;
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 ကပို႔စ္အတြက္ width သတ္မွတ္ထားတဲ့ div ပါ။ ပို႔စ္ေနရာကို width ေျပာင္းခ်င္တယ္ဆိုရင္ အဲဒီ width: 410px; ဆိုတဲ့ေနရာမွာ ကိုယ္လိုခ်င္တဲ့ဂဏန္းကိုေျပာင္းေပးလိုက္ပါ။ ဒါေပမယ့္ အဲဒီလိုေျပာင္းရင္ #outer-wrapper ဆိုတဲ့ေနရာမွာပါလုိက္ၿပီးေျပာင္းေပးရပါမယ္။ ဥပမာ အထက္ကကုဒ္ေတြကိုၾကည့္ပါ။ #outer-wrapper ထဲက width: 660px; ဆိုတာ ပို႔စ္နဲ႔ဆိုဒ္ဘားႏွစ္ခုေပါင္းရဲ႕ width ပါ။ 660pixels ရွိပါတယ္။ ပို႔စ္အတြက္ #main-wrapper မွာက width: 410px နဲ႔ #sidebar-wrapper အတြက္ width: 220px ျဖစ္ပါတယ္။ ႏွစ္ခုေပါင္း 630pixels ရွိပါတယ္။ ပိုေနတဲ့ 30pixels ကပို႔စ္နဲ႔ဆိုဒ္ဘားအလယ္မွာရွိေနတဲ့ gap ပါ။

တကယ္လို႔ ပို႔စ္ကို 700px နဲ႔ဆိုဒ္ဘားကို 250px ထားခ်င္တယ္ဆိုပါဆို႔။

#main-wrapper {
width: 500px;
float: left;
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: 250px;
float: right;
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 */
}

အဲဒီဂဏန္းေတြကိုေျပာင္းလိုက္ပါ။ ၿပီးရင္

#outer-wrapper {
width: 780px;
margin:0 auto;
padding:10px;
text-align:left;
font: normal normal 100% Georgia, Serif;
}

ဒါဆိုရင္ပို႔စ္က 500px ရွိၿပီး ဆိုဒ္ဘားကေတာ့ 250px ရွိေနမွာပါ။ သူတို႔ၾကားကအကြာအေ၀းကေတာ့ 30px ေပါ့။ ဒါေပမယ့္ header box ကေသးေနပါလိမ့္မယ္။ လိုက္ႀကီးခ်င္တယ္ဆိုရင္ေတာ့

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid #cccccc;
}

အဲဒီကုဒ္ကိုရွာၿပီး width:660px; ေနရာမွာ width:780px; ကိုေျပာင္းေပးလိုက္ရံုပါပဲ။ေအာင္ေအာင္(မကစ) ရဲ႕ ဘေလာ့ခရီးသည္ေလးအား အားေပးေနၾကတဲ့အတြက္ ေက်းဇဴးအထူးတင္ပါတယ္.. တုန္႕ျပန္မွဳအေနနဲ႕ fb like ေလးေတာ့ လုပ္ေပးခဲ့ၾကပါေနာ္.. တတ္စြမ္းသမွ် ေတြ႕ ရွိသမွ်ေလးေတြကို ျပန္လည္ မွ်ေ၀ေနပါ့မယ္...။

Posted in: Blogger Template