সিএসএস float এবং clear প্রোপার্টির মাধ্যমে লে-আউট তৈরি
একটি এলিমেন্ট ভাসমান(float) হবে কিনা, অর্থাৎ একটি এলিমেন্ট ডানে না বামে থাকবে তা নির্ধারণের জন্য সিএসএস float প্রোপার্টি ব্যবহার করা হয়।
ফ্লোটিং এলিমেন্টসমূহের আচরণ নিয়ন্ত্রণে রাখার জন্য clear প্রোপার্টি ব্যবহার করা হয়।
নিচে দুটি বাটনের সাহায্যে float এবং clear প্রোপার্টির ব্যবহার দেখানো হলোঃ
float:left ব্যবহার করে বামদিকে নেওয়া হয়েছে
float:right ব্যবহার করে ডানদিকে নেওয়া হয়েছে
এক নজরে সিএসএসে ব্যবহৃত float প্রোপার্টিসমূহ
একটি এলিমেন্ট ভাসমান(float) হবে কিনা তা নির্ধারণ করে।
একটি এলিমেন্টকে ফ্লোটিং এলিমেন্টের নিচে(বামে বা ডানে) থাকতে বাধ্য করে।
কন্টেন্ট তার এলিমেন্ট বক্স থেকে উপচে পড়লে(overflow) কি ঘটে তা নির্ধারণ করে।
একটি এলিমেন্ট যদি তার কন্টেন্ট বক্স থেকে ডানে বা বামে উপচে পড়ে(overflow হয়) তাহলে কি হবে তা নির্ধারণ করে।
একটি এলিমেন্ট যদি তার কন্টেন্ট বক্স থেকে উপরে বা নিচে উপচে পড়ে(overflow হয়) তাহলে কি হবে তা নির্ধারণ করে।
float প্রোপার্টির ব্যবহার
সাধারণত ইমেজের চারপাশকে টেক্সট দিয়ে মোড়ানোর জন্য float প্রোপার্টি ব্যবহার করা হয়।
নিচের উদাহরণে টেক্সটের বামপাশে এবং ডানপাশে ইমেজকে ফ্লোট করে দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
.floatimg2 {
float: right;
margin: 0 010px 10px;
}
</style>
</head>
<body>
<p>এই উদাহরণে, ইমেজটি অনুচ্ছেদের ডানদিকে ভেসে থাকবে এবং অনুচ্ছেদের লেখাগুলো ইমেজের বামদিকে থাকবেঃ</p>
<div>
<img class="floatimg2" src="images/satt.png" alt="Satt" width="100" height="120">
<p>কম্পিউটার শিক্ষা বর্তমান সময়ের দাবি। যা ডিজিটালের সিড়ি। তাই দেশকে সত্যিকারেরর ডিজিটাল হিসাবে দেখতে চাইলে সরকারের
সহিত আমাদেরকেও সমানভাবে এগিয়ে আসতে হবে, এবং কম্পিউটার শিক্ষা অর্জন করতে হবে। কিন্তু আমরা জেলাশহরে থাকার কারণে এবং
রাজধানী ঢাকা আমাদের থেকে অনেক দুরে অথবা অার্থিক কারণে আমরা যেমন ওয়েব ডিজাইন & ডেভেলোপমেন্ট/এন্ড্রয়েড/আই ও এস
অ্যাপ্স তৈরির কথা চিন্তাও করতে পারিনা। এসব সমস্যার সমাধান হিসাবে SATT -এর জন্ম। স্যাট একাডেমি সম্পূর্ণ বিনামূল্যে ওয়েব ডিজাইন &
ডেভেলোপমেন্টের উপর প্রশিক্ষণ দিচ্ছে।<p>
</div>
</body>
</html>
ফলাফল
clear প্রোপার্টির ব্যবহার
ফ্লোটিং এলিমেন্টের আচরণ নিয়ন্ত্রনের জন্য clear প্রোপার্টি ব্যবহার করা হয়।
সাধারণত float এর কার্যকারিতা এর পরবর্তী এলিমেন্ট গুলো এর উপরে চলে আসে। তাই এটাকে এড়িয়ে যাওয়ার জন্য clear প্রোপার্টি ব্যবহার করা হয়।
একটি এলিমেন্টকে ফ্লোটিং এলিমেন্টের কোন পাশে ফ্লোট হওয়া থেকে বাধা দেবে তা নির্ধারণের জন্য clear প্রোপার্টিটি প্রয়োগ করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
.div1 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid teal;
}
.div2 {
border: 1px solid maroon;
}
.div3 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid teal;
}
.div4 {
border: 1px solid maroon;
clear: left;
}
</style>
</head>
<body>
<h2>clear ছাড়া কেমন হবে</h2>
<div class="div1">div1</div>
<div class="div2">div2 এ clear প্রোপার্টি ব্যবহার না করায়, div2 এর এলিমেন্ট div1 এ চলে এসেছে।</div>
<h2>clear ব্যবহারের ফলে কেমন হবে</h2>
<div class="div3">div3</div>
<div class="div4">এখানে div3 এর নিচে div4 চলে এসেছে। clear প্রোপার্টির ভ্যালু "left" ব্যবহার করে বামদিকে নিয়ে আসা হয়েছে।
আপনি ইচ্ছে করলে "right" এবং "both" যেকোন কিছু ব্যবহার করতে পারবেন।</div>
</body>
</html>
ফলাফল
overflow: auto; এর ব্যবহার
একটি এলিমেন্ট যদি তার কন্টেইনারের চেয়ে বড় এবং ফ্লোটিং হয় তাহলে ইহা এর কনটেইনার থেকে উপচে পড়বে।আরেকটি এলিমেন্ট আকারে বড় হয় তাহলে বড় অংশটি কন্টেইনারের বাহিরে ওভারফ্লো করবে।
এই সমস্যা সমাধাণের জন্য আমরা overflow: auto; ব্যবহার করতে পারি।
এই অধ্যায়ের পূর্ববর্তী অধ্যায়ে overflow সম্পর্কে বিস্তারিত আলোচনা করা হয়েছে।
ওয়েব লেআউটের উদাহরণ
float প্রোপার্টি ব্যবহারের মাধ্যমে একটি সাধারণ ওয়েবপেজের লে-আউট তৈরি করে দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
div {
border: 1px solid teal;
}
.clearfix {
overflow: auto;
}
nav {
float: left;
width: 200px;
border: 1px solid OrangeRed;
}
section {
margin-left: 206px;
border: 1px solid Crimson;
}
</style>
</head>
<body>
<div class="clearfix">
<nav>
<span>ন্যাভিগেশন</span>
<ul>
<li><a target="_blank" href="../index.php">হোম</a></li>
<li><a target="_blank" href="index.php">সিএসএস</a></li>
<li><a target="_blank" href="html/index.php">এইচটিএমএল</a></li>
<li><a target="_blank" href="js/index.php">জাভাস্ক্রিপ্ট</a></li>
</ul>
</nav>
<section>
<span>সেকশন-১</span>
<p>লক্ষ্য করুন div কন্টেনারে আমরা একটি clearfix রেখেছি। এই উদাহরণে এটির প্রয়োজন নাই,
কিন্তু যদি সেকশন কন্টেন্ট থেকে নেভ এলিমেন্ট বড় হয় তখন এটির প্রয়োজন।</p>
</section>
<section>
<span>সেকশন-২</span>
<p>আমাদের প্রিয় জন্মভূমি বাংলাদেশ। ১৯৭১ সালের ১৬ই ডিসেম্বর লাখো শহিদের রক্তের বিনিময়ে প্রতিষ্ঠিত হয় স্বাধীন বাংলাদেশ।
বাংলাদেশ প্রকৃতির আদুরে কন্যা।ছয়টি ঋতুে আলাদা রূপ-মাধুর্য নিয়ে আসে প্রকৃতিতে। নানা প্রজাতির ফুল, পাখি, গাছপালা, পাহাড়,
সাগর এদেশের প্রকৃতিকে সমৃদ্ধ করেছে।</p>
</section>
</div>
</body>
</html>
ফলাফল