Myanmar Blogger Helpdesk

Learning, Sharing and Growing Together at Blogging Community!

Template Width ခ်ဲ႔နည္း  


Contributor: ေ၀ယံလင္း

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

တန္းပလိတ္ကို 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; ကိုေျပာင္းေပးလိုက္ရံုပါပဲ။

AddThis Social Bookmark Button

12 comments

  • Anonymous  
    August 20, 2007 at 2:03 AM

    ဟင့္အင္း ရဘူး။ အမ ကလိလိုက္မိဒါ က
    #outer-wrapper {
    width: 847px;
    margin: 0px auto 0;
    #content-wrapper {
    margin-left: 40px; /* to avoid the border image */
    width: 763px;
    }

    #main {
    float: left;
    width: 460px;
    margin: 20px 0 0 0;
    padding: 0 0 0 1em;
    #sidebar {
    float: right;
    width: 259px;
    padding: 20px 0px 0 0;
    font-size: 100%;
    #header-wrapper {
    margin: 0;
    padding: 0;
    font: $pagetitlefont;
    background: #e0e0e0 url(http://www.blogblog.com/tictac/top_div.gif) no-repeat 0px 0px;
    }

    #header {
    margin: 0;
    padding: 25px 60px 35px 140px;
    color: $pagetitlecolor;
    background: url(http://www.blogblog.com/tictac/top_h1.gif) no-repeat bottom left;
    }

    #header h1 {
    font-size: 200%;
    text-shadow: #81A75B 2px 2px 2px;
    }
    body#layout #outer-wrapper,
    body#layout #content-wrapper {
    width: 847px;
    }

    ျပင္လိုက္ေတာ့ အေပၚက စာေတြပဲက်ယ္သြားတယ္ ေအာက္ ခံ အေရာင္က ဒီအတိုင္းပဲ
    အမ blog နဲ့လည္းမတူေတာ့ခက္တာ

  • Anonymous  
    June 14, 2008 at 6:42 AM

    ေက်းဇူးရွင္
    လိုခ်င္တဲ့ ဆိုက္ဇ္ကိုေျပာင္းလို ့ရသြားပါၿပီ :)

  • Rita  
    September 21, 2008 at 2:22 AM

    Thank u so much! :)

  • sein  
    October 31, 2008 at 7:31 PM

    ကိုေမာ္
    ဟုတ္ကဲ့ ရသြားျပီဗ်ာ ေက်းဇူးပဲ။ ေတာ္ေတာ္လြယ္တာပဲဗ်။

  • Aqua  
    November 8, 2008 at 3:53 AM

    Hello. This post is likeable, and your blog is very interesting, congratulations :-). I will add in my blogroll =)THANX FOR MAKING SUCH A COOL BLOG


    Let me share with you a great resource,

    Word Templates

    A huge collection of Word Templates are presented here to help our visitors in their daily tasks. Our collection includes Business Management Word Templates, Marketing Word Templates, School Templates, Home Templates, Greeting Cards Templates, Flyer Templates and many more. The best thing about this site is that everything is free for everyone to download.

  • ေဒါင္းမင္း  
    December 28, 2008 at 3:23 AM

    အဟိ..ရေသးဘူးဗ်.လုပ္တက္ေသးဘူး...

  • Cung Duhnung  
    February 11, 2009 at 2:51 AM

    ေက်းဇူးပါဗ်ာ

  • ေလေျပ  
    December 15, 2009 at 9:29 PM

    ဆိုဒ္ေသးေနလို႔ စိတ္ညစ္ေနတာ ဗ်ာ အကို ေျပာမွပဲရေတာ႔တာ ဘယ္လိုေက်းဇူးတင္ရမွန္းေတာင္မသိေတာ႔ဘူး ေတာ္ေတာ္လြယ္တယ္.. အကိုေျာပေပလို႔ ပဲ.. ေက်းဇူးအကိုေရ..

  • Anonymous  
    March 17, 2010 at 3:03 AM

    အကိုေျပာတဲ့ templates မွာပဲရျပီူ အျခားဟာေျပာင္းလိုက္ရင္ ခ်ဲ႕လို႔ မရေတာ့ဘူးဘာလို႔လဲ

  • စံေအာင္ေက်ာ္  
    April 26, 2010 at 5:21 AM

    Nice and thank.

  • တကၠသုိလ္ျမတ္မင္း  
    June 12, 2010 at 6:49 AM

    I want to compose of this template to that.

  • ၿဖိဳးေမာင္ေမာင္(CTM)  
    November 30, 2010 at 11:58 PM

    အကို ကြ်န္ေတာ့္မွာက ဒီလိုေတြခ်ည္း
    အဲဒါဘယါလိုၿပန္ခ်ဲ့ရမလဲ ေက်းဇူးၿပဳၿပီး
    အကိုဆိုဒ္ခ်ိန္ေပးလို့ရမလား။


    #outer-wrapper {
    width:00&;
    text-align: left;
    margin:0 auto;
    }

    #crosscol-wrapper {
    width: 880px;
    margin:0 0 12px 10px;
    height:28px;
    }


    #nav li {
    float:left;
    list-style-type:none;
    margin:4px -4px 0px 4px;
    padding:0px;
    }

Post a Comment

Post a Comment