সি এস এস এর একটা গুরুত্বপূর্ণ প্রোপার্টি হচ্ছে overflow। ওয়েব ডিজাইনারদের সি এস এস এর overflow প্রোপার্টি সম্পর্কে ভালো ধারণা থাকা উচিৎ। ওভারফ্লো প্রোপার্টিসম্পর্কে বলার পূর্বে আমরা এমন একটা div ইলিমেন্ট চিন্তা করি যার জন্য ইতোপূর্বে width এবং height প্রোপার্টি নির্ধারণ করে দেয়া হয়েছে। ধরে নেই width:500px; এবং height:600px;। তাহলে ঐ div ইলিমেন্ট এর জন্য নির্ধারিত ডাইমেনশন হচ্ছে 500px X 600px। এখন যদি div ইলিমেন্ট এর কনটেন্ট (টেক্সট,ইমেজ,মিডিয়া কনটেন্ট) এর সম্মিলিত ডাইমেনশন 500px X 600px কে অতিক্রম করে তাহলে বাড়তি কনটেন্ট এর কি হবে ? এই সমস্যার সমাধানের জন্যই overflow প্রোপার্টি ব্যবহার করা হয়।

বাড়তি কনটেন্ট কি প্রদর্শিত হবে ?, না হবে না ?, আর প্রদর্শিত হলে কি স্ক্রল করবে ?, না সরাসরি প্যারেন্ট ইলিমেন্টের ডাইমেনশন অতিক্রম করে প্রদর্শিত হবে ? এই সমস্যা গুলোর উত্তর overflow প্রোপার্টির ভ্যালুর মাধ্যমে বলে দেয়া হয়।

overflow প্রোপার্টির সম্ভাব্য ভ্যালু সমূহ

• visible: কনটেন্ট ক্লিপ হবে না, বাড়তি কনটেন্ট প্যারেন্ট ইলিমেন্টের ডাইমেনশন অতিক্রম করে প্রদর্শিত হবে। এটাই overflow প্রোপার্টির  ডিফল্ট ভ্যালু।
• hidden: বাড়তি কনটেন্ট প্রদর্শিত হবে না।
• scroll: বাড়তি কনটেন্ট থাকলে স্বাভাবিকভাবে প্রদর্শিত হবে না এবং একটা স্ক্রলবার দেখা যাবে। বাড়তি কনটেন্ট থাকলে, স্ক্রল করলে তা প্রদর্শিত হবে। বাড়তি কনটেন্ট থাকলেও স্ক্রলবার দেখাবে না থাকলেও দেখাবে।
• auto: বাড়তি কনটেন্ট থাকলে স্বাভাবিকভাবে প্রদর্শিত হবে না এবং একটা স্ক্রলবার দেখা যাবে। বাড়তি কনটেন্ট না থাকলে স্ক্রলবার প্রদর্শিত হবে না।
• initial: ডিফল্ট ভ্যালু হিসেবে  visible ব্যবহৃত হবে।
• inherit: প্যারেন্ট ইলিমেন্টের overflow প্রোপার্টির ভ্যালু এই ইলিমেন্ট এর জন্য নির্ধারিত হবে।

অনুশীলন

কোডিং পর্যালোচনা

১ম div টির জন্য css নির্ধারণ করা হয়েছে div.ov_visible{overflow:visible;}
তাই বাড়তি কনটেন্ট প্যারেন্ট ইলিমেন্টের ডাইমেনশন অতিক্রম করে প্রদর্শিত হচ্ছে।

২য় div টির জন্য css নির্ধারণ করা হয়েছে div.ov_hidden{overflow:hidden;}
তাই বাড়তি কনটেন্ট প্রদর্শিত হচ্ছে না।

৩য় div টির জন্য css নির্ধারণ করা হয়েছে div.ov_scroll{overflow:scroll;}
তাই বাড়তি কনটেন্ট স্বাভাবিকভাবে প্রদর্শিত হচ্ছে না এবং একটা স্ক্রলবার দেখা যাচ্ছে।

৪র্থ div এর জন্য css নির্ধারণ করা হয়েছে div.ov_auto{overflow:auto;}
তাই বাড়তি কনটেন্ট থাকায় স্ক্রলবার দেখা যাচ্ছে।

৫ম div এর জন্য css নির্ধারণ করা হয়েছে div.ov_auto{overflow:auto;}
কিন্তু বাড়তি কনটেন্ট না থাকায় স্ক্রলবার দেখা যাচ্ছে না।

কোর্সে সক্রিয় অংশগ্রহণকারীদের জন্য কিছু করণীয়

এখন থেকে প্রতিটা পর্বে কোর্সে সক্রিয় অংশগ্রহণকারীদের জন্য কিছু প্রশ্ন, প্রজেক্ট বা বিশেষ কিছু করণীয় থাকবে। এগুলো সম্পন্ন করে কোর্সে আপনার সক্রিয়তা নিশ্চিৎ করুন। এই কোর্সের সাথে সম্পৃক্ত বিচারক মন্ডলী এগুলো পর্যবেক্ষণ করবেন এবং প্রয়োজনীয় নির্দেশনা প্রদান করবেন।

ওয়েব ডিজাইন মাস্টার [পর্ব-২২] :: সি এস এস ওভারফ্লো (সি এস এস-১২) ওভারফ্লো  প্রোপার্টির ব্যবহার এর জন্য কিছু সহজ প্রশ্ন থাকছে। আপনারা টিউমেন্ট করে প্রশ্ন গুলোর সঠিক উত্তর প্রদানের চেষ্টা করুন।

• প্রশ্ন ১: বাড়তি কনটেন্ট প্রদর্শিত না করার জন্য overflow প্রোপার্টির ভ্যালু কোনটা হবে ?
  
• প্রশ্ন ২: overflow প্রোপার্টির ডিফল্ট ভ্যালু কোনটা ?
• প্রশ্ন ৩: বাড়তি কনটেন্ট থাকলে স্ক্রলবার দেখাবে না থাকলে দেখাবে না এর জন্য overflow প্রোপার্টির ভ্যালু কোনটা হবে?

কোর্সের কোন পার্ট সম্পর্কে বা প্রোগ্রাম সম্পর্কে কোন বিষয় আমাকে জানানোর জন্য টিউমেন্ট করতে পারেন এর পাশাপাশি আমাকে ফেসবুকে ম্যাসেজ দিতে পারেন।

কোর্সে সক্রিয়ভাবে অংশ গ্রহণ করুন, আপনার মতামত, জিজ্ঞাসা, সবার সাথে শেয়ার করুন। প্রতিদিন কিছু না কিছু শেখার চেষ্টা করুন। নূন্যতম প্রতিদিন দুই ঘন্টা করে কোডিং করুন। আপনার ইচ্ছা আর সক্রিয় অংশগ্রহণই আপনাকে এ বিষয়ে অভিজ্ঞ করে তুলবে। তাহলে ওয়েব ডিজাইন মাস্টার হওয়ার জন্য আপনি প্রস্তুত তো!

আজ এ পর্যন্তই। সবাইকে ধন্যবাদ। শুভকামনা রইলো।