সিএসএস এবং এইচটিএমএল ব্যবহার করে স্ক্রোলিং টেক্সট সহ একটি বক্স তৈরি করুন
একটি এইচটিএমএল স্ক্রোল বক্স একটি বাক্স যা বক্সের আকারের তুলনায় বাক্সের বিষয়বস্তু বড় এবং ডানদিকে স্ক্রোল বার যুক্ত করে। অন্য কথায়, যদি আপনার কাছে একটি বাক্স থাকে যা প্রায় 50 শব্দে মাপতে পারে, এবং আপনার কাছে 200 শব্দ লেখা আছে, তাহলে একটি এইচটিএমএল স্ক্রোল বক্সটি আপনাকে 150 টি অতিরিক্ত শব্দ দেখতে দিলে স্ক্রোল বারগুলি লাগবে। স্ট্যান্ডার্ড এইচটিএমএল যে বাক্সের বাইরের অতিরিক্ত টেক্সট ধাক্কা করবে।
এইচটিএমএল স্ক্রল তৈরি করা মোটামুটি সহজ। আপনি যে উপাদানটি স্ক্রোল করতে চান তার প্রস্থ ও উচ্চতা সেট করতে হবে এবং তারপর স্ক্রোলিংটি কীভাবে তৈরি করতে চান সেটি সেট করার জন্য আপনি CSS ওভারফ্লো প্রোপার্টিটি ব্যবহার করুন।
অতিরিক্ত টেক্সট দিয়ে কি করবেন?
যখন আপনি আপনার লেআউটের স্থানটিতে আরোহনের চেয়ে বেশি পাঠ্য আছে, আপনার কাছে কয়েকটি বিকল্প রয়েছে:
- পাঠ্যটি পুনরাবৃত্তি করুন যাতে এটি ছোট এবং মাপসই হবে।
- লেখাটি সীমার বাইরে প্রবাহিত করার অনুমতি দেয় এবং আশা করা যায় যে লেআউটটি এটি সমর্থন করতে পারে।
- পাঠ্যটি কেটে ফেলুন যেখানে এটি প্রবাহিত হয়।
- স্ক্রোল বারগুলি যোগ করুন (সাধারণত পাঠ্যের জন্য উল্লম্ব) যাতে স্পেস স্ক্রোল অতিরিক্ত পাঠ্য প্রদর্শন করতে পারে।
সেরা বিকল্পটি সাধারণত শেষ বিকল্প: একটি স্ক্রোলিং টেক্সট বক্স তৈরি করুন তারপর অতিরিক্ত পাঠ্য পড়া যেতে পারে, কিন্তু আপনার নকশা আপোস করা হয় না।
এই জন্য HTML এবং CSS হবে:
ওভারফ্লো: স্বয়ংক্রিয়; ব্রাউজারকে স্ক্রল বারগুলি যোগ করার জন্য বলে যদি তারা ডিভিশনের সীমারেখা অতিক্রম করে লেখাটি রাখতে থাকে তবে কিন্তু এই কাজ করার জন্য, আপনি div উপর সেট প্রস্থ এবং উচ্চতা শৈলী বৈশিষ্ট্য প্রয়োজন, যাতে ওভারফ্লো যাও সীমানা আছে।
আপনি ওভারফ্লা পরিবর্তন করে পাঠ্য কাটাও করতে পারেন: স্বয়ংক্রিয়; ওভারফ্লো: লুকানো;। আপনি ওভারফ্লো সম্পত্তি ছেড়ে যদি, টেক্সট DIV এর সীমানা উপর ছিটকে হবে।
আপনি শুধু টেক্সট চেয়ে আরও স্ক্রল বার যোগ করতে পারেন
যদি আপনার একটি বড় ছবি থাকে যা আপনি একটি ছোট স্থান প্রদর্শন করতে চান, আপনি টেক্সট হিসাবে একই ভাবে স্ক্রল বারগুলি জুড়তে পারেন।
এই উদাহরণে, 400x509 চিত্র একটি 300x300 অনুচ্ছেদের ভিতরে।
টেবিল স্ক্রল বার থেকে উপকার করতে পারেন
তথ্য লম্বা টেবিল খুব দ্রুত পড়তে খুব কঠিন হতে পারে, কিন্তু একটি সীমিত আকারের একটি DIV ভিতরে তাদের ভিতরে এবং তারপর ওভারফ্লো সম্পত্তি যোগ করা, আপনি আপনার পৃষ্ঠার চরম স্থান নিতে না যে প্রচুর তথ্য টেবিল তৈরি করতে পারেন ।
সবচেয়ে সহজ উপায় হল ইমেজ এবং টেক্সটের মতো, টেবিলের চারপাশে একটি ডিভি যোগ করুন, ডিভিটির প্রস্থ এবং উচ্চতা সেট করুন এবং ওভারফ্লো প্রোপার্টি যুক্ত করুন:
| নাম | ফোন | 502-5366 .... যখন আপনি এটি করবেন তখন যে একটি জিনিস ঘটে তা হল একটি অনুভূমিক স্ক্রল বার যা সাধারণত দেখায় কারণ ব্রাউজারটি মনে করে যে স্ক্রল বারগুলির ক্রোমটি টেবিলে ওভারল্যাপ করছে। টেবিলের প্রস্থ পরিবর্তন এবং অন্যদের থেকে এটি ঠিক করার জন্য অনেক উপায় আছে। কিন্তু আমার প্রিয় সিএসএস 3 সম্পত্তি ওভারফ্লো-এক্স সহ অনুভূমিক স্ক্রোলিং বন্ধ করতে হয়। শুধু ওভারফ্লো-এক্স যোগ করুন: লুকানো; ডিভিতে, এবং যে অনুভূমিক স্ক্রল বার মুছে ফেলা হবে। এটি পরীক্ষা করা নিশ্চিত করুন, যে বিষয়বস্তুগুলি অদৃশ্য হয়ে যায় তা হতে পারে। ওভারফ্লো জন্য TBODY ট্যাগ ব্যবহার করে ফায়ারফক্স সমর্থন করেফায়ারফক্স ব্রাউজারের একটি সত্যিই চমৎকার বৈশিষ্ট্য হলো আপনি ভেতরের টেবিলের মত টাওয়ার এবং থ্যাড বা টাফ ফুটতে অতিরিক্ত প্রবাহের সম্পত্তি ব্যবহার করতে পারেন। এর মানে হল যে আপনি টেবিলের বিষয়বস্তুতে স্ক্রল বারগুলি সেট করতে পারেন, এবং শিরোলেখ কক্ষগুলি তাদের উপরে নোঙ্গর রাখে। এটি শুধুমাত্র ফায়ারফক্সে কাজ করে , যা খুব খারাপ, কিন্তু এটি একটি চমৎকার বৈশিষ্ট্য যদি আপনার পাঠকরা কেবল ফায়ারফক্স ব্যবহার করেন। ফায়ারফক্সে এই উদাহরণটি ব্রাউজ করুন যাতে আমি কী বোঝাতে পারি। <টেবিল শৈলী = "প্রস্থ: 300 পিক্স;"> নাম | ফোন | জেনিফার | 502-5366 ...
| |
|---|