css | සරල css ඉගි

බ්‍රවුසර් කවුලුවේ මැදට පිටුව ගන්න හැටි

හරිම ලේසියි. main container (උදාහරණය අනුව wrapper) එකේ margin පහත පරිදි දෙන්න. මෙහි 0 යන්නෙන් උඩ මාජින් (margin-top) සහ auto යන්නෙන් දකුණුපස මාජින් (margin-right) අගයන් පෙන්වයි.

html

<div id="wrapper">
    <div id="content">
        site content goes here
    </div>
</div>

css

#wrapper { margin:0 auto; width:500px; }

#content { }

සබැදිය බලන්න

තීරු (columns)

floating කියන්නෙ css වල වැදගත්ම කොටසක්‌. අපි බලමු සරල තීරු 2ක පිටුවක්‌.

html

<div id="wrapper">
    <div id="header">
        header content goes here
    </div>
    <div class="column">
        column-1 content goes here
    </div>
    <div class="column">
        column-2 content goes here
    </div>
</div>

css

#wrapper { 
    margin:0 auto; 
    width:500px; 
    padding:20px;
}

#header { 
    padding:20px; 
    font-size:200%; 
}

.column { 
    float:left;
    width:230px;
    padding:10px;
    text-align:justify;
}

සබැදිය බලන්න

දැන් අපි එකට පසුබිම් වර්ණයක්‌ දාල බලමු

css

#wrapper { 
    margin:0 auto; 
    width:500px; 
    padding:20px;
    background:#ccc;
}

සබැදිය බලන්න

වැඩේ හරිගියේ නෑ නේද. ෆයර් ෆොක්‌ස්‌ හි wrapper එකට දාපු පසුබිම් වර්නය පිටුවෙ උඩ කොටසේ පමනයි පෙනෙන්නෙ. මේකට හේතුව කලින් තීරු float කිරීම. මෙය නිවැරදි කරන්න අපිට float එක clear කරන්න වෙනව. ඒ සදහා පහත පරිදි float clear කල හිස් div‌ එකක්‌ යොදාගන්න පුලුවන්.

html

<div id="wrapper">
    <div id="header">
        header content goes here
    </div>
    <div class="column">
        column-1 content goes here
    </div>
    <div class="column">
        column-2 content goes here
    </div>
    <div class="clearfloat"></div>
</div>

css

#wrapper { 
    margin:0 auto; 
    width:500px; 
    padding:20px;
    background:#ccc;
}

#header { 
    padding:20px; 
    font-size:200%; 
}

.column { 
    float:left;
    width:230px;
    padding:10px;
    text-align:justify;
}

.clearfloat{
    clear:both;
}

සබැදිය බලන්න

තවත් ඉගි පසුවට!