সিএসএস লে-আউট - overflow
সিএসএস overflow
যখন কোন কনটেন্ট তার কন্টেন্ট বক্স থেকে উপচে পড়ে(overflow) তখন কনটেন্টকে ক্লিপ করার জন্য বা স্ক্রলবার যুক্ত করার জন্য অথবা শুধু কন্টেন্টকে প্রদর্শন করানোর জন্য সিএসএস overflow প্রোপার্টি ব্যবহার করা হয়।
overflow প্রোপার্টিতে নিম্নোক্ত ভ্যালুসমূহ ব্যবহৃত হয়।
overflow প্রোপার্টির কী-ওয়ার্ড ভ্যালুসমূহ
overflow: visible;- ডিফল্ট ভ্যালু। এখানে overflow ক্লিপ হয় না এবং কন্টেন্ট বক্সের বাইরে প্লাবিত হয়।overflow: hidden;- overflow ক্লিপ হয় এবং কনটেন্টের বাকি অংশ অদৃশ্য হয়ে যায়।overflow: scroll;- overflow ক্লিপ হয় এবং স্ক্রলবার যুক্ত হয়, যা দ্বারা স্ক্রল করে কনটেন্টের বাকি অংশ দেখা যায়।-
overflow: auto;- ব্রাউজার সয়ংক্রিয়ভাবে overflow ক্লিপ করে এবং স্ক্রলবার তৈরি করে।
overflow প্রোপার্টির গ্লোবাল ভ্যালুসমূহঃ
overflow: inherit;overflow: initial;overflow: unset;
বিঃদ্রঃ শুধুমাত্র নির্দিষ্ট উচ্চতা(height) সম্বলিত এলিমেন্টের ক্ষেত্রে overflow প্রোপার্টিটি প্রযোজ্য।
ফরমাল সিনট্যাক্স
overflow: visible | hidden | scroll | auto;
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
.overflow {
padding: 4px;
background-color: #eee;
width: 400px;
height: 120px;
border: 1px dotted red;
}
</style>
</head>
<body>
<div class="overflow">লে-আউট ভালো ভাবে নিয়ন্ত্রন করতে চাইলে আপনাকে overflow প্রোপার্টি ব্যবহার করতে হবে।<br>
একটি এলিমেন্ট এর ভেতরে কন্টেন্ট গুলো কিভাবে থাকবে overflow প্রোপার্টি দ্বারা তা নির্দেশ করা হয়।<br>
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে।<br>
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে।<br>
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে।<br>
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে।<br>
</div>
</body>
</html>
ফলাফল
overflow: visible;
overflow প্রোপার্টির ডিফল্ট ভ্যালু হলো visible বা দৃর্শমান। অর্থাৎ overflow ক্লিপ হয় না এবং কন্টেন্ট বক্সের বাইরে প্লাবিত অবস্থায় দৃশ্যমান থাকে।
p {
overflow: visible; /* কন্টেন্ট ক্লিপ হয় না */
}
লে-আউট ভালো ভাবে নিয়ন্ত্রন করতে চাইলে আপনাকে
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে।
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে।
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে।
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow প্রোপার্টি ব্যবহার করতে হবে। একটি এলিমেন্ট এর ভেতরে কন্টেন্ট গুলো কিভাবে থাকবে overflow প্রোপার্টি দ্বারা তা নির্দেশ করা হয়।overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে।
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে।
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে।
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow: hidden;
overflow-কে ক্লিপ করে কনটেন্টের বাকি অংশকে অদৃর্শ করে দেয়।
p {
overflow: hidden; /* কোনো স্ক্রলবার তৈরি হয় না। */
}
লে-আউট ভালো ভাবে নিয়ন্ত্রন করতে চাইলে আপনাকে
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow প্রোপার্টি ব্যবহার করতে হবে। একটি এলিমেন্ট এর ভেতরে কন্টেন্ট গুলো কিভাবে থাকবে overflow প্রোপার্টি দ্বারা তা নির্দেশ করা হয়।overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow: scroll;
scroll যুক্ত করলে overflow ক্লিপ হয় এবং স্ক্রলবার সরবরাহ করে।
p {
overflow: scroll; /* সবসময়ই স্ক্রলবার তৈরি হয়। */
}
লে-আউট ভালো ভাবে নিয়ন্ত্রন করতে চাইলে আপনাকে
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow প্রোপার্টি ব্যবহার করতে হবে। একটি এলিমেন্ট এর ভেতরে কন্টেন্ট গুলো কিভাবে থাকবে overflow প্রোপার্টি দ্বারা তা নির্দেশ করা হয়।overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow: auto;
ব্রাউজার সয়ংক্রিয়ভাবে overflow ক্লিপ করে এবং স্ক্রলবার তৈরি করে।
p {
overflow: auto; /* প্রয়োজন অনুযায়ী ব্রাউজার স্ক্রলবার তৈরি হয়। */
}
লে-আউট ভালো ভাবে নিয়ন্ত্রন করতে চাইলে আপনাকে
overflow বুজার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুজার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুজার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুজার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow প্রোপার্টি ব্যবহার করতে হবে। একটি এলিমেন্ট এর ভেতরে কন্টেন্ট গুলো কিভাবে থাকবে overflow প্রোপার্টি দ্বারা তা নির্দেশ করা হয়।overflow বুজার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুজার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুজার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুজার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
সবগুলোর প্রোপার্টির ব্যবহারঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
div.visible {
padding:4px;
background-color: lightgoldenrodyellow;
width: 16em;
height: 6em;
border:2px dotted teal;
overflow: visible;
}
div.hidden {
padding:4px;
background-color: lightgoldenrodyellow;
width: 16em;
height: 6em;
border:2px dotted teal;
overflow: hidden;
}
div.scroll {
padding:4px;
background-color: lightgoldenrodyellow;
width: 16em;
height: 6em;
border:2px dotted teal;
overflow: scroll;
}
div.auto {
padding:4px;
background-color: lightgoldenrodyellow;
width: 16em;
height: 6em;
border:2px dotted teal;
overflow: auto;
}
</style>
</head>
<body>
<h2>সিএসএস overflow প্রোপার্টির ব্যবহার</h2>
<p>যখন কোন কনটেন্ট তার কন্টেন্ট বক্স থেকে উপচে পড়ে(overflow) তখন কনটেন্টকে ক্লিপ করার জন্য, স্ক্রলবার যুক্ত করার জন্য অথবা
শুধু কন্টেন্টকে প্রদর্শন করানোর জন্য সিএসএস "overflow" প্রোপার্টিটি ব্যবহার করা হয়।</p>
<h2>"Overflow:visible;"</h2>
<div class="visible">লে-আউট ভালো ভাবে নিয়ন্ত্রন করতে চাইলে আপনাকে overflow প্রোপার্টি ব্যবহার করতে হবে।<br>
একটি এলিমেন্ট এর ভেতরে কন্টেন্ট গুলো কিভাবে থাকবে overflow প্রোপার্টি দ্বারা তা নির্দেশ করা হয়।<br>
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে।<br>
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে।<br>
</div>
<br><br><br><br><br><br>
<h2>"overflow: hidden;"</h2>
<div class="hidden">লে-আউট ভালো ভাবে নিয়ন্ত্রন করতে চাইলে আপনাকে overflow প্রোপার্টি ব্যবহার করতে হবে।<br>
একটি এলিমেন্ট এর ভেতরে কন্টেন্ট গুলো কিভাবে থাকবে overflow প্রোপার্টি দ্বারা তা নির্দেশ করা হয়।<br>
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে।<br>
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে।<br>
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে।<br>
</div>
<br><br>
<h2>"overflow: scroll;"</h2>
<div class="scroll">লে-আউট ভালো ভাবে নিয়ন্ত্রন করতে চাইলে আপনাকে overflow প্রোপার্টি ব্যবহার করতে হবে।<br>
একটি এলিমেন্ট এর ভেতরে কন্টেন্ট গুলো কিভাবে থাকবে overflow প্রোপার্টি দ্বারা তা নির্দেশ করা হয়।<br>
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে।<br>
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে।<br>
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে।<br>
</div>
<br><br>
<h2>"overflow: auto;"</h2>
<div class="visible">লে-আউট ভালো ভাবে নিয়ন্ত্রন করতে চাইলে আপনাকে overflow প্রোপার্টি ব্যবহার করতে হবে।<br>
একটি এলিমেন্ট এর ভেতরে কন্টেন্ট গুলো কিভাবে থাকবে overflow প্রোপার্টি দ্বারা তা নির্দেশ করা হয়।<br>
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে।<br>
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে।<br>
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে।<br>
</div>
</body>
</html>
ফলাফল
overflow-X এবং overflow-Y
overflow-X এবং overflow-Y প্রোপার্টি overflow কনটেন্টকে অনুভূমিক/উলম্ব অথবা উভয় ভাবে পরিবর্তন করে।
overflow-X দ্বারা কনটেন্টের বাম অথবা ডান প্রান্তে কি হবে তা নির্ধারণ করে।
overflow-Y দ্বারা কনটেন্টের উপর বা নিচ প্রান্তে কি হবে তা নির্ধারণ করে।
কন্টেন্টের লেআউট সঠিকভাবে নিয়ন্ত্রণ করতে চাইলে overflow প্রোপার্টিটি ব্যবহার করুন।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
div {
padding: 4px;
background-color: #eee;
width: 20em;
height: 8em;
border:1px dotted red;
overflow-x: hidden; /* হরিজন্টাল স্ক্রলবার অদৃশ্য থাকে */
overflow-y: scroll; /* ভার্টিক্যাল স্ক্রলবার যুক্ত হয় */
</style>
</head>
<body>
<h2>সিএসএস Overflow</h2>
<p>আপনি ওভারফ্লো কন্টেন্ট সবসময় horizontally অথবা vertically পরিবর্তন করতে পারবেন।</p>
<div>
<p>আপনি ওভারফ্লো কন্টেন্ট সবসময় horizontally অথবা vertically পরিবর্তন করতে পারবেন।</p>
<p>overflow-X দ্বারা কনটেন্টের বাম অথবা ডান প্রান্তকে নির্দেশ করে।<br>
overflow-Y দ্বারা কনটেন্টের উপরের বা নিচের প্রান্তকে নির্দেশ করে।</p>
</div>
</body>
</html>
ফলাফল