ওভার ফ্লো (Overflow)
top, left, height,width, padding, border ইত্যাদি প্রোপার্টি ব্যবহার করে একটি বক্স ডিজাইন করার পর যদি বক্সের আকার প্রয়োজনীয় কনটেন্ট এর আকৃতির চেয়ে ছোট হয়, তাহলে বাড়তি কনটেন্ট কিভাবে প্রদর্শিত হবে তা ওভার ফ্লো প্রোপার্টির মাধ্যমে নির্ধারণ করা হয়। ওভার ফ্লো প্রোপার্টির বেশ কিছু মান হতে পারে তার মধ্যে উল্লেখযোগ্য হচ্ছে,
- ওভার ফ্লো ভিজিবল (overflow:visible)
- ওভার ফ্লো হিডেন (overflow:hidden)
- ওভার ফ্লো অটো (overflow:auto)
- ওভার ফ্লো স্ক্রল(overflow:scroll)
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFC}
h3{color:red;}
p{background:#FCF;
left:100px;
top:70px;
height:90px;
width:350px;
padding:10px;
border:#F09 1px solid;}
#visible{overflow:visible;
margin-bottom:60px;}
#hidden{overflow:hidden;}
#auto{overflow:auto;}
#scroll{overflow:scroll;}
</style>
</head>
<body >
<h3> This is an example of visible overflow</h3>
<p id="visible">
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.We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p>
<h3> This is an example of hidden overflow</h3>
<p id="hidden">
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.We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.</p>
<h3> This is an example of auto overflow</h3>
<p id="auto">
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.We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.</p>
<h3> This is an example of scroll overflow</h3>
<p id="scroll">
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>
</body>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
তিনি ইলেকট্রিক্যাল ইঞ্জিনিয়ারিং এ লেখাপড়া করছেন। টিউটোরিয়ালবিডি ও বিজ্ঞানপ্রযুক্তি ব্লগে তিনি ইলেক্ট্রনিক্স সহ বিভিন্ন টেকনোলজি বিষয়ে লিখে থাকেন। বর্তমানে তিনি লেখাপড়ার পাশাপাশি টিউটোহোস্টে কর্মরত আছেন।
কপি রাইট © ২০১১থেকে যতদিন চলবে সর্বস্বত্ত্ব সংরক্ষিত