পজিশন প্রপার্টি দ্বারা লেফট বা রাইট এলাইন | সি এস এস বাংলা টিউটোরিয়াল

পজিশন প্রপার্টি দ্বারা লেফট বা রাইট এলাইন

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

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFD;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#066;
text-align:justify;}
div{width:400px;
height:310px;
border:#099 10px solid;
padding:8px;
outline:#0631px solid;}
#rap{background:#C9F;
position:absolute;
left:0px;}
</style>

</head>
<body >
<div id="rap">
<h2 style="color:#666;">Main Content</h2>
<hr>
<p>
We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p>
</div>
</body>
</html>

একটা  নোটপ্যাড  open  করে  উপরের code  টুকু  লিখে  file  মেনু  থেকে  Save as এ ক্লিক করে File name:  index.html  ,   Save as type : All files,  দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।



লেখকঃ অসীম কুমার
তিনি ইলেকট্রিক্যাল ইঞ্জিনিয়ারিং এ লেখাপড়া করছেন। টিউটোরিয়ালবিডি ও বিজ্ঞানপ্রযুক্তি ব্লগে তিনি ইলেক্ট্রনিক্স সহ বিভিন্ন টেকনোলজি বিষয়ে লিখে থাকেন। বর্তমানে তিনি লেখাপড়ার পাশাপাশি টিউটোহোস্টে কর্মরত আছেন।

কপি রাইট টিউটোহোস্ট ২০১০-২০১২