সিএসএস এর "এলাইন" কি? সিএসএস পার্ট -২২




এলাইন [ Aline]

ওয়েব পেজের লে-আউট তৈরির ক্ষেত্রে এলাইন অত্যন্ত গুরুত্বপূর্ণ বিষয়। একটা ওয়েব পেজে ওয়েব সাইটটি কোন দিকে প্রদর্শিত হবে ডান দিকে বাম দিকে না মাঝখানে তা যেমন এলাইন করে নির্ধারণ করা হয়, এছাড়া সাইডবার নেভিগেশন বার, ফুটার, হেডার ইমেজের পজিশনও এলাইন করে নির্ধারণ করা হয়।
এলাইন করার বেশ কিছু পদ্ধতি রয়েছে। যেমনঃ

i) মার্জিন প্রোপার্টি
ii) পজিশন প্রোপার্টি
iii) ফ্লট প্রোপার্টি

মার্জিন প্রোপার্টি


যে কোন ভাল একটি ওয়েব টেমপ্লেট খেয়াল করলে দেখা যায়, টেমপ্লেটটি ব্রাউজারে প্রদর্শন করলে ঠিক মাঝখানে প্রদর্শন করে, একটা ওয়েব সাইটকে সুন্দর ভাবে প্রদর্শনের জন্য বিষয়টি খুবই গুরুত্বপূর্ণ।মার্জিন প্রোপার্টি ব্যবহার করে সেন্টার এলাইন করার মাধ্যমে এর গুরুত্বপূর্ণ কাজটি করা হয়।কোন ওয়েব সাইটকে ব্রাউজারে ঠিক মাঝখানে প্রদর্শন করার জন্য স্ট্যাইল সিটে উল্লেখ করতে হয়


, margin-left:auto; margin-right:auto; ।
<head>
<style>
.center {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}
</style>
</head>



উদাহরণ :-

<!DOCTYPE html>
<html>
<head>

<style>
.center {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}
</style>
</head>
<body>

<div class="center">
  <p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>
</div>

</body>
</html>



 পজিশন প্রপার্টি


ওয়েব সাইটের টেমপ্লেট এর সৌন্দর্য অনেকাংশে নির্ভর করে সাইডবারের উপর। সাইডবার টিকে সাধারণত সাইটের কনটেন্ট এরিয়ার ডানদিকে অথবা বাম দিকে রাখা হয়। আবার অনেক ক্ষেত্রে একাধিক সাইডবারও ব্যবহার করা হয়।সাইডার এলাইনের বিষয়টিও তাই একজন ওয়েব ডিজাইনারকে বেশ সতর্কতার সাথে করতে হয়। এ কাজটি সঠিকভাবে করা না হলে বিভিন্ন ব্রাউজারে বা বিভিন্ন সাইজের মনিটরে সাইটের সাইডবারের অবস্থান পরিবর্তিত হয়ে যেতে পারে।সাইড বার তথা কোন div উপাদানকে পজিশন প্রোপার্টি ব্যবহার করে লেফট বা রাইট এলাইন করা যায়। লেফট এলাইন করার জন্য স্ট্যাইল সিটে উল্লেখ করতে হবে position:absolute; left:0px; অনুরূপভাবে রাইট এলাইন করার জন্য স্ট্যাইল সিটে উল্লেখ করতে হবে position:absolute; right:0px;।



<head>
<style>
.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}
</style>
</head>

উদাহরণ :--


 <!DOCTYPE html>
<html>
<head>

<style>
.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}
</style>
</head>
<body>

<div class="right">
  <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
</div>

</body>
</html>




ফ্লট প্রোপার্টি


ফ্লট প্রোপার্টি ব্যবহার করেও সাইড বার তথা কোন div উপাদানকে লেফট বা রাইট এলাইন করা যায়। লেফট এলাইন করার জন্য স্ট্যাইল সিটে উল্লেখ করতে হবে float:left; left:0px; অনুরূপভাবে রাইট এলাইন করার জন্য স্ট্যাইল সিটে উল্লেখ করতে হবে float:right; right:0px;।


<head>
<style>
.right {
    float: right;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}
</style>
</head>

উদাহরণ :--

<!DOCTYPE html>
<html>
<head>

<style>
.right {
    float: right;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}
</style>
</head>
<body>

<div class="right">
  <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
</div>

</body>
</html>


আপনি এই কোড আমাদের সাইটে বসানো এইচটিএমএল এডিটর দিয়ে রান করাতে পারেন। এইচটিএমএল এডিটরে যেতে এখানে ক্লিক করুন





Comments

Popular posts from this blog

How to Show Your Posts on Google's First Page?

31 True Science Facts You Didn't Know...Until Now -

সৌরজগৎ এ প্রথম আন্তঃনাক্ষত্রিক গ্রহাণু