Website ရေးကြမယ် (၅) နောက်ဆက်တွဲ
အခုမှ စဖတ်မယ့် သူတွေအတွက် အရင်ပို့စ်တွေကို ပြန်ညွှန်းလိုပါတယ်…
- Website ရေးကြမယ် (၁)
- Website ရေးကြမယ် (၂)
- Website ရေးကြမယ် (၃)
- Website ရေးကြမယ် (၄)
- Website ရေးကြမယ် (၄) (နောက်ဆက်တွဲ)
- Website ရေးကြမယ် (၅)
CSS နဲ့ Layout ချရာမှာ နည်းအမျိုးမျိုး ရှိပါတယ်။ Designer တစ်ယောက်နဲ့ တစ်ယောက် ချဉ်းကပ်ပုံချင်းလဲ မတူကျပါဖူး။ ပြီးခဲ့တဲ့ သင်ခန်းစာမှာတော့ အလွယ်ဆုံးနဲ့ Error free ဖြစ်တဲ့ Absolute Positioning အကြောင်း ပြောပြီးသွားပါပြီ။ အခု ကျန်တဲ့ Relative Positioning, Float Positioning တွေ အကြောင်း မပြောခင်မှာ Absolute Positioning အကြောင်းပဲ ထပ်ပြောချင်ပါသေးတယ်။
More Absolute Positioning
အခုထိ ကျွန်တော်တို့တွေ ရွှေ့လိုက်တဲ့ div တွေဟာ သူ့ဟာသူ သပ်သပ်ဆီ ရှိနေကြပါတယ်။ တစ်ခုထဲမှာ တစ်ခု ရှိနေတာ မဟုတ်ပါဖူး။ အဲတော့ အားလုံးကို Top, Left တန်ဖိုးတွေကို page ရဲ့ ဘယ်ဖက် ထပ်ဆုံးထောင့်ကနေ စတွက်ပြီး ပေးလိုက်လို့ အဆင်ပြေပါတယ်။ တကယ်လို့ Element တစ်ခုထဲမှာ ရှိတဲ့ Child Element ကို Absolute Position နဲ့ နေရာချမယ်ဆိုရင်တော့ တမျိုး စဉ်းစားရပါတော့မယ်။ နမူနာ ကြည့်ကြည့်ပါ။
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Absolute Positioning</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<style type="text/css">
#redblock {
position: absolute;
top: 200px;
left: 200px;
background-color: red;
width: 100px;
height: 100px;
}
#yellowblock {
position: absolute;
top: 20px;
left: 20px;
background-color: yellow;
color: red;
width: 50px;
height: 50px;
padding: 5px;
}
</style>
</head>
<body>
<h1>Absolute Positioning</h1>
<div id="redblock">
<div id="yellowblock">Yellow!</div>
</div>
<p>The red block is positioned absolutely using coordinates of
200 pixels from the top, and 200 pixels from the left.</p>
<p>The yellow block inside is positioned 20 pixels from the
top of its parent element, and 20 pixels to the left.</p>
</body>
</html>
ကဲ အခုဆို yellowblock div ကို redblock div ထဲကို ထည့်လိုက်ပြီ။ yellowblock ရဲ့ top နဲ့ left ကို 20 စီ ပေးထားတယ်။ ဘယ်မှာ သွားပေါ်မယ် ထင်သလဲ။ ပုံမှာ ကြည့်ကြည့်လိုက်ပါ။
အခုလို Child Element ကို Absolute Position ပေးရင် သူ့ Parent Element ရဲ့ top, left တန်ဖိုးတွေပါ အလိုလို ယူသွားပါတယ်။ သဘောကတော့ Parent Element ရဲ့ ဘယ်ဖက်ထိပ်ဆုံး နေရာက စတွက် တာပါ။ သိသွားအောင်လို့သာ ထည့်ပြောတာပါ။ ကျွန်နော်တို့ project site မှာ ထည့်မသုံးပါဖူး။ 
Relative Positioning
Absolute Positioning မှာတော့ top, left တန်ဖိုးတွေကို Browser ရဲ့ ဘယ်ဖက်ထိပ် (သို့) Parent Element ရဲ့ ဘယ်ဖက်ထိပ်ကနေ စယူတာပါ။ Relative Positioning မှာတော့ သူ့ကို သုံးထားတဲ့ Element ရဲ့ မူလ ရှိနေတဲ့ နေရာကနေ စတွက်ပါတယ်။ ရှင်းအောင် ဥပမာနဲ့ ကြည့်မယ်။
p {
background-color: yellow;
}
.nudged {
position: relative;
top: 10px;
left: 10px;
}
relative position သုံးထားတဲ့ nudged class ကို paragraph တစ်ခုခုမှာ ထည့်သုံးကြည့်ပါမယ်။
<p>Next came a massage that I was not expecting. It started with a bit of manipulation of the temples, followed by the barber's attempt to drag the top half of my face down towards my chin (and vice-versa) with his big burly hands. I'm sure it's good for you. I wasn't sure it was good for me, though. He then made his way down to my shoulders and managed to pull me around in such a way that I squealed like a girl. This was not relaxing -- this was painful! Evidently I was knotted up. I must have needed it, I reasoned.</p> <p class="nudged">There was an audible crack as he grabbed my head and twisted it to the right, all of it quite unexpected. To the left, no cracking sound. And we weren't quite done yet...</p> <p>To finish off, the barber got a pair of tongs. He took a ball of cotton wool and wrapped it tightly around the tip of the tongs, so that it looked like a large cotton bud. He then doused the cotton wool in what must have been pure alcohol, set it on fire, and began to fling it at my face. Using one hand to cover the top of my ear and my hair, he flashed it against my ear, singeing the small hairs in and around the ear.</p>
မြင်သာအောင် ယှဉ်ပြထားပါတယ်။ nudged class ထည့်လိုက်တော့ သူ့ရဲ့ မူလ နေရာကနေ 10 px စီ ရွေ့သွားပါတယ်။
Benefits of Relative Positioning
Relative Positioning ကို သုံးခြင်းအားဖြင့် User က browser ရဲ့ font size ကို ပြောင်းပေမယ့် position တွေ အလိုက်သင့် လိုက်ပြောင်းသွား ပေးပါတယ်။ Absolute Positioning နဲ့ဆိုရင် font size အကြီးကြီးတွေနဲ့ အဆင်မပြေပါဖူး။ ပုံမှာ ကြည့်ကြည့်ပါ။
အဲလိုဆိုရင် အခု ကျွန်တော်တို့ project site မှာ ဘာလို့ relative position မသုံး သလဲလို့ မေးစရာရှိပါတယ်။ relative နဲ့ layout ချရတာ သိပ်လွယ်တဲ့ ကိစ္စ မဟုတ်ပါဖူး။ အခုက basic level ဖြစ်လို့ အလွယ်ဆုံး absolute နဲ့ပဲ နမူနာပြသွားမှာပါ။ တကယ့်လက်တွေ့မှာတော့ Web Designer တွေဟာ Absolute, Relative, Float positioning တွေကို အဆင်သင့်သလို ရောပြီး သုံးကြတာပါ။
Floated Positioning
Float Positioning technique ကိုလဲ Web Designer အများစု သုံးကြပါတယ်။ Element တစ်ခုကို float လုပ်လိုက်တယ်ဆိုတာ အဲဒီ Element ကို တစ်ဖက်ဖက်ကို ကပ်လိုက်တာပါပဲ။ ကျန်တဲ့ Element တွေက သူ့ဘေးမှာ ဆက်လာနိုင်ပါတယ်။ Element တွေ အများကြီးကို float လုပ်လို့ ရပါတယ်။ သတင်းစာတွေမှာ ကော်လံတွေ အများကြီး ပါသလိုပေါ့။ နမူနာ ကြည့်ကြည့်မယ်။
#nav {
float: right;
width: 300px;
background-color: yellow;
}
id nav ရှိတဲ့ element ကို ညာဖက်ကို ကပ်ပေးမှာ ဖြစ်ပါတယ်။ width ကို 300px ပေးထားတဲ့ အတွက် ညာဖက်ခြမ်း 300px ထိမရောက်ခင် နေရာလွတ်တွေမှာ ကျန်တဲ့ element တွေ လာပြပေးပါမယ်။ အောက်မှာ အဲဒီ style ကို ထည့်သုံးပါမယ်။
<div id="nav">
<ul>
<li><a href="index.html">This is an area of navigation
items</a></li>
<li><a href="index.html">which is floated on the
right.</a></li>
<li><a href="turkish.html">Turkish Shaving Stories.</a></li>
<li><a href="http://www.bubbleunder.com/">Diving
Stories.</a></li>
</ul>
</div> <!-- end of nav div -->
<h1>Turkish Shaving Stories</h1>
<p>Next came a massage that I was not expecting. It started with a
bit of manipulation of the temples, followed by the barber's
attempt to drag the top half of my face down towards my chin
(and vice-versa) with his big burly hands. I'm sure it's good
for you. I wasn't sure it was good for me, though. He then
made his way down to my shoulders and managed to pull me
around in such a way that I squealed like a girl. This was not
relaxing -- this was painful! Evidently I was knotted up. I
must have needed it, I reasoned.</p>
<p>There was an audible crack as he grabbed my head and twisted it
to the right, all of it quite unexpected. To the left, no
cracking sound. And we weren't quite done yet ...</p>
<p>To finish off, the barber got a pair of tongs. He took a ball
of cotton wool and wrapped it tightly around the tip of the
tongs, so that it looked like a large cotton bud. He then
doused the cotton wool in what must have been pure alcohol,
set it on fire, and began to fling it at my face. Using one
hand to cover the top of my ear and my hair, he flashed it
against my ear, singeing the small hairs in and around the
ear.</p>
ကျန်တဲ့ Element တွေက float area မတိုင်ခင်ထိ ဆက်ပေါ်ပါတယ်။ float area ဆုံးသွားတော့ အပြည့်ပြန်ပေါ်ပါတယ်။ L shape ဖြစ်နေပါတယ်။ အဲလို L shape မဖြစ်ချင်ရင်တော့ content area မှာ padding-left ထည့်ပေးနိုင်ပါတယ်။ float area ရဲ့ width က 300px ဆိုတော့ 310 လောက်ထားမယ်။
#nav {
float: right;
width: 300px;
background-color: yellow;
}
.contentconstrained {
padding-right: 310px;
}
စောစောက HTML မှာပဲ contentconstrained class div ကို paragraph တွေကို အုပ်ပြီး ထည့်လိုက်ပါမယ်။
<div id="nav">
<ul>
<li><a href="index.html">This is an area of navigation
items</a></li>
<li><a href="index.html">which is floated on the
right.</a></li>
<li><a href="turkish.html">Turkish Shaving Stories.</a></li>
<li><a href="http://www.bubbleunder.com/">Diving
Stories.</a></li>
</ul>
</div> <!-- end of nav div -->
<div class="contentconstrained">
<h1>Turkish Shaving Stories</h1>
<p>Next came a massage that I was not expecting. It started with a
bit of manipulation of the temples, followed by the barber's
attempt to drag the top half of my face down towards my chin
(and vice-versa) with his big burly hands. I'm sure it's good
for you. I wasn't sure it was good for me, though. He then
made his way down to my shoulders and managed to pull me
around in such a way that I squealed like a girl. This was not
relaxing -- this was painful! Evidently I was knotted up. I
must have needed it, I reasoned.</p>
<p>There was an audible crack as he grabbed my head and twisted it
to the right, all of it quite unexpected. To the left, no
cracking sound. And we weren't quite done yet ...</p>
<p>To finish off, the barber got a pair of tongs. He took a ball
of cotton wool and wrapped it tightly around the tip of the
tongs, so that it looked like a large cotton bud. He then
doused the cotton wool in what must have been pure alcohol,
set it on fire, and began to fling it at my face. Using one
hand to cover the top of my ear and my hair, he flashed it
against my ear, singeing the small hairs in and around the
ear.</p>
</div> <!-- end of contentconstrained div -->
ကျွန်တော်တို့ project site မှာတော့ float တွေ သိပ်သုံးမှာ မဟုတ်ပါဘူး။ ဒါပေမယ့် front page မှာပါတဲ့ circle of divers ဆိုတဲ့ ပုံကိုတော့ ညာဖက်ကို float လုပ်ပါမယ်။ img မှာ float သွားထည့်ရင်တော့ site မှာ ရှိသမျှ image တိုင်း float ဖြစ်ကုန်ပါမယ်။ အခုက feature image သဘောမျိုးလုပ်ချင်တာ ဖြစ်လို့ feature class ပဲ ထည့်လိုက်ပါမယ်။ Welcome message က စာတွေနဲ့ ကပ်နေမှာစိုးလို့ margin ပါထည့်ပါမယ်။ ကျွန်တော်တို့ရဲက style1.css ရဲ့ အောက်ဆုံးမှာ ထပ်ထည့်ပေးပါ။
.feature {
float: right;
margin: 10px;
}
index.html မှာလဲ img tag မှာ feature class သွားထည့်ပေးပါ။
<div id="bodycontent">
<h2>Welcome to our super-dooper Scuba site</h2>
<p><img src="divers-circle.jpg" class="feature" width="200"
height="162" alt="A circle of divers practice their
skills" /></p>
<p>Glad you could drop in and share some air with us! You've
passed your underwater navigation skills and successfully
found your way to the start point - or in this case, our
home page.</p>
</div> <!-- end of bodycontent div -->
Basic level မှာတော့ positioning အပိုင်းကို ဒီမှာပဲ ရပ်ပါတော့မယ်။ ကျန်သွားတဲ့ List တွေ style ထည့်တာပဲ ဆက်ပြောတော့မယ်။
Styling Lists
ကျွန်တော်တို့ရဲ့ navigation list မှာကြည့်ပါ။ Default အနေနဲ့ကတော့ အမည်းဝိုင်းလေးတွေပဲ ပြပေးမှာပါ။ တခြားပုံစံတွေ ပြောင်းလို့ ရပါသေးတယ်။ style1.css မှာ ထပ်ဖြည့်ပေးပါ။
li {
font-size: small;
list-style-type: circle;
}
နောက်ပြီး list-style-type မှာ disc, square တို့လဲ ပြောင်းပြီး စမ်းကြည့်ပါ။ နောက်ဆုံး none ပဲထားခဲ့ပါ။ အဲဒီအတိုင်းပဲ သုံးပါမယ်။ အောက်မှာ none ထား ထားတဲ့ ပုံပါ။
CSS နဲ့ link တွေကို button style လုပ်တာ၊ list တွေကို vertical မသွားဘဲ horizontal ပြတာတွေ လုပ်လို့ရပါသေးတယ်။ ဒီမှာတော့ ဒီလောက်ပါပဲ။ နောက် သင်ခန်းစာမှာ Image တွေ အကြောင်း သွားပါမယ်။
contentconstrained
Facebook comments:
One Response
Leave a comment
About the Author
Goo Goo
ေန႔နဲ႔ည မွားေနေသာ လူတစ္ပိုင္း ဇီးကြက္တစ္ပိုင္း။ မ်က္စိႏွစ္လံုး ပြင့္တာနဲ႔ ကီးဘုတ္ေပၚ လက္ေရာက္ေနတတ္သူ။ ကြန္ပ်ဳတာ နည္းပညာမ်ား အားလံုးလိုလို စိတ္ဝင္စားေသာ္လည္း ဝဘ္ဒီဇိုင္းကို အားသန္သူ။ စိတ္ပါလွ်င္ ဂီတာတီး၊ သီခ်င္းေရးတတ္ေသာ အခ်ိန္ပိုင္း အသံဖမ္းအင္ဂ်င္နီယာ။
Ads
[...] Website ရေးကြမယ် (၅) (နောက်ဆက်တွဲ) [...]