লিঙ্কগুলির একটি তালিকা সহ একটি ব্লক তৈরি করার সময়, সাধারণত ব্লক বা ইনলাইন-ব্লক বৈশিষ্ট্যগুলির সাথে প্রদর্শন সম্পত্তি ব্যবহার করার পরামর্শ দেওয়া হয়, যা সক্রিয় লিঙ্ক ক্ষেত্রের আকার বৃদ্ধি করবে। বড় সক্রিয় লিঙ্ক ক্ষেত্রগুলি উপাদানগুলির ব্যবহারযোগ্যতা উন্নত করে;
প্রদর্শন সহ উপাদান: ব্লক ব্লক উপাদান হিসাবে রেন্ডার করা হয়।
প্রদর্শন সহ একটি উপাদান: ইনলাইন-ব্লক একটি ব্লক উপাদান হিসাবে রেন্ডার করা হয় যা অন্যান্য উপাদানগুলির চারপাশে মোড়ানো হয় যেন এটি ইনলাইন ছিল। বিষয়বস্তু একটি ব্লক উপাদান হিসাবে ফর্ম্যাট করা হয়, এবং উপাদান নিজেই ইনলাইন হিসাবে ফর্ম্যাট করা হয়.
আসুন লিঙ্কগুলির একটি তালিকা সহ একটি সাধারণ উদাহরণ দেখি:
- এই সামান্য
- শূকর গেল
- বাজার
আপনি যদি লিঙ্কগুলির শৈলী পরিবর্তন না করেন তবে তাদের সক্রিয় ক্ষেত্রগুলির আকার তাদের ভিতরের পাঠ্যের আকারের সাথে মিলে যায়।
আমরা সক্রিয় ক্ষেত্রের আকারকে মূল উপাদানের প্রস্থ করে এটি উন্নত করতে পারি।
উল এ ( প্রদর্শন: ব্লক;) 
আমরা আরও ভালো করতে পারি।
- নিশ্চিত করুন যে তালিকার আইটেমগুলিতে লিঙ্কের বিপরীতে ক্ষেত্র নেই।
- লিঙ্কগুলির মার্জিন নেই কারণ মার্জিনগুলি উপাদানগুলির সক্রিয় ক্ষেত্র নয়।
নিবন্ধটি সুস্পষ্ট জিনিসগুলি নিয়ে গঠিত, তবে প্রায়শই আমরা ইন্টারনেটে লিঙ্কগুলির ব্লকগুলি খুঁজে পেতে পারি যা বর্ধিত সক্রিয় ক্ষেত্রগুলির দ্বারা "বিকৃত" হয় না।
মূল নিবন্ধ: 11/29/2010 তারিখে ক্রিস কোয়ের দ্বারা মার্জিনগুলিকে লিঙ্ক তালিকার বাইরে রাখুন
এই নিবন্ধে আমি আপনাকে বলতে চাই কিভাবে সঠিকভাবে স্থাপন করা যায় ক্ষেত্র(প্যাডিং) এবং ইন্ডেন্টেশন(মার্জিন) সিএসএস-এ।
প্রথমত, আসুন W3C স্পেসিফিকেশন অনুসারে মার্জিন এবং প্যাডিংয়ের সংজ্ঞাটি মনে করি। বক্স মডেলে, মার্জিন হল বিষয়বস্তু এবং বাক্সের সীমানার মধ্যে দূরত্ব। এবং প্যাডিং হল একটি ব্লকের সীমানা এবং একটি সংলগ্ন বা মূল উপাদানের সীমানার মধ্যে দূরত্ব।
এইভাবে, যদি উপাদানটির সীমানা এবং পটভূমি নির্দিষ্ট করা না থাকে, তাহলে কোন পার্থক্য নেই, ইন্ডেন্ট সেট করতে প্যাডিং বা মার্জিন বৈশিষ্ট্য ব্যবহার করুন, তবে শর্ত থাকে যে উপাদানটির প্রস্থ (প্রস্থ) এবং উচ্চতা (উচ্চতা) নির্দিষ্ট করা নেই এবং বক্স-সাইজিং বৈশিষ্ট্য ব্যবহার করে বিষয়বস্তুর আকার গণনা করার জন্য অ্যালগরিদম।
যে কোনো ক্ষেত্রে, মনে রাখবেন যে মার্জিন উপাদানটির প্রস্থ বা উচ্চতায় অন্তর্ভুক্ত হতে পারে বা নাও থাকতে পারে। ইন্ডেন্ট সবসময় উপাদানের বাইরে সেট করা হয়।
এখন আসুন দেখুন কিভাবে সঠিকভাবে মার্জিন এবং উপাদানগুলির মধ্যে স্থান স্থাপন করা যায়। একটি উদাহরণ হিসাবে নিম্নলিখিত ব্লক গ্রহণ করা যাক.
এই খবর ব্লক. এটি একটি শিরোনাম, সংবাদের একটি তালিকা এবং একটি "অন্যান্য সংবাদ" লিঙ্ক নিয়ে গঠিত। চলুন তাদের নিম্নলিখিত শ্রেণীর নাম দেওয়া যাক: news__title, news__list এবং news__more-link।
খবর
অন্যান্য খবর
যেহেতু এই উপাদানগুলির প্রতিটিতে একই বাম এবং ডান মার্জিন রয়েছে, তাই প্রতিটি উপাদানের জন্য পৃথকভাবে বাম এবং ডান মার্জিন সেট করার পরিবর্তে প্যারেন্ট ব্লকে মার্জিন সেট করা ভাল।
খবর ( প্যাডিং: 20px 25px; )
এইভাবে, যদি আপনার ডান এবং বাম দিকের ক্ষেত্রগুলির মান পরিবর্তন করতে হয় তবে এটি করা দরকার এক জায়গায়. এবং নিউজ ব্লকের ভিতরে একটি নতুন উপাদান যোগ করার সময়, এটি ইতিমধ্যেই বাম এবং ডানদিকে প্রয়োজনীয় ইন্ডেন্টেশন থাকবে।
এটি প্রায়শই ঘটে যে একটি ব্লকের মধ্যে সমস্ত উপাদানের বাম এবং ডানদিকে একই প্যাডিং থাকে, একটি ব্যতীত, যার প্যাডিং মোটেই উচিত নয়, উদাহরণস্বরূপ, পটভূমির কারণে। এই ক্ষেত্রে, আপনি উপাদানটির জন্য নেতিবাচক প্যাডিং সেট করতে পারেন। তারপরে আপনাকে অন্যান্য উপাদানগুলির জন্য ব্লকের ভিতরে ক্ষেত্রগুলি সরাতে হবে না।
এখন আপনাকে উপাদানগুলির মধ্যে উল্লম্ব মার্জিন সেট করতে হবে। এটি করার জন্য, আপনাকে উপাদানগুলির মধ্যে কোনটি তা নির্ধারণ করতে হবে বাধ্যতামূলক. স্পষ্টতই, একটি নিউজ ব্লক একই সময়ে, একটি "অন্যান্য খবর" লিঙ্ক নাও থাকতে পারে, উদাহরণস্বরূপ, যখন নকশা পরিবর্তন করা হয়;
এটি বিবেচনায় নিয়ে, আমরা শিরোনামের জন্য নীচে ইন্ডেন্ট এবং "অন্যান্য খবর" লিঙ্কের জন্য শীর্ষে ইন্ডেন্ট সেট করি।
News__title ( margin-bottom: 10px; ) .news__more-link ( margin-top: 12px; )
আমরা খবরের তালিকার উপরে এবং নীচে প্যাডিং যোগ করে একই বাহ্যিক ফলাফল অর্জন করতে পারি।
সংবাদ__তালিকা ( মার্জিন: 10px 0 12px 0; )
এখন আপনাকে পৃথক সংবাদ আইটেমের মধ্যে ইন্ডেন্ট সেট করতে হবে। আবার, দয়া করে মনে রাখবেন যে সংবাদ আইটেমের সংখ্যা পরিবর্তিত হতে পারে এবং শুধুমাত্র একটি সংবাদ আইটেম তালিকাভুক্ত হতে পারে।
আপনি প্রথমটি বাদে প্রতিটি সংবাদের জন্য একটি শীর্ষ ইন্ডেন্ট সেট করতে পারেন, বা শেষটি ব্যতীত প্রতিটি সংবাদের জন্য একটি নীচের ইন্ডেন্ট সেট করতে পারেন৷ প্রথম বিকল্পটি বাঞ্ছনীয় কারণ:প্রথম-শিশু ছদ্ম-নির্বাচক CSS 2.1 স্পেসিফিকেশনে যোগ করা হয়েছিল এবং এর ব্যাপক সমর্থন রয়েছে, যা:লাস্ট-চাইল্ড সিউডো-নির্বাচকের বিপরীতে, যা শুধুমাত্র CSS 3.0 স্পেসিফিকেশনে যোগ করা হয়েছিল।
সংবাদ__তালিকা-আইটেম ( মার্জিন-টপ: 18px; ) .সংবাদ__তালিকা-আইটেম:প্রথম-শিশু ( মার্জিন-টপ: 0; )
এইভাবে, মার্জিন এবং ইন্ডেন্টের সঠিক বসানো আপনাকে শৈলীতে পরিবর্তন না করে এবং নকশাকে বিরক্ত না করে যেকোন ব্লকের চেহারা নমনীয়ভাবে পরিবর্তন করতে দেয়। সবচেয়ে গুরুত্বপূর্ণ বিষয় হল কোন ব্লক উপাদানগুলি প্রধান ( বাধ্যতামূলক), এবং কোনটি ঐচ্ছিক.
কখনও কখনও আমরা প্রয়োজনীয় উপাদানের উপর নির্ভর করতে পারি না। উদাহরণস্বরূপ, আমাদের একটি পপআপ উইন্ডো রয়েছে, যার ভিতরে কিছু শিরোনাম এবং পাঠ্য প্রদর্শিত হতে পারে। তাছাড়া কোন কোন ক্ষেত্রে কোন লেখা নাও থাকতে পারে, আবার কোন কোন ক্ষেত্রে শিরোনাম নাও থাকতে পারে। অর্থাৎ উভয় উপাদানই ঐচ্ছিক।
এই ক্ষেত্রে, আপনি ইন্ডেন্ট সেট করার জন্য নিম্নলিখিত পদ্ধতি ব্যবহার করতে পারেন।
পপআপ__হেডার + .পপআপ__টেক্সট ( মার্জিন-টপ: 15px; )
তারপর ইন্ডেন্টেশন শুধুমাত্র প্রদর্শিত হবে যদি উভয় উপাদান ব্যবহার করা হয়। শুধুমাত্র শিরোনাম বা শুধুমাত্র টেক্সট প্রদর্শনের ক্ষেত্রে, কোন অতিরিক্ত ইন্ডেন্টেশন থাকবে না।
উল্লম্ব মার্জিন সঙ্কুচিত হচ্ছে
আরেকটি সূক্ষ্মতা যা সম্পর্কে সবাই জানে না তা সংলগ্ন ব্লকগুলির মধ্যে উল্লম্ব স্থানগুলির সাথে সম্পর্কিত। আমি উপরে যে ইন্ডেন্টেশনের সংজ্ঞা দিয়েছি তা বলে যে ইন্ডেন্টেশন হল মধ্যবর্তী দূরত্ব সীমানাবর্তমান এবং প্রতিবেশী ব্লক। এইভাবে, যদি আমরা দুটি ব্লক একে অপরের নীচে রাখি এবং তাদের একটিকে 30px এর নীচের মার্জিন এবং অন্যটিকে 20px এর উপরের মার্জিন দিই, তবে তাদের মধ্যে মার্জিন 50px নয়, 30px হবে।
অর্থাৎ, ইন্ডেন্টেশনগুলি ওভারল্যাপ হবে, এবং ব্লকগুলির মধ্যে ইন্ডেন্টেশন বৃহত্তম ইন্ডেন্টেশনের সমান হবে, এবং ইন্ডেন্টেশনের যোগফল নয়। এই প্রভাবকে "পতন"ও বলা হয়।
অনুগ্রহ করে মনে রাখবেন যে অনুভূমিক ইন্ডেন্টগুলি, উল্লম্বগুলির বিপরীতে, "পতন" হয় না, তবে সংক্ষিপ্ত হয়৷ ক্ষেত্রগুলি (প্যাডিং)ও সংক্ষিপ্ত করা হয়।
ইন্ডেন্ট পতন সম্পর্কে জেনে, আমরা আমাদের সুবিধার জন্য এই বৈশিষ্ট্যটি ব্যবহার করতে পারি। উদাহরণস্বরূপ, যদি আমাদের একটি নিবন্ধের ভিতরে শিরোনাম এবং পাঠ্য ইন্ডেন্ট করার প্রয়োজন হয়, তাহলে প্রথম স্তরের শিরোনামের জন্য আমরা নীচের ইন্ডেন্টটি 20px এ সেট করব এবং দ্বিতীয় স্তরের শিরোনামের জন্য শীর্ষ ইন্ডেন্টটি 20px এবং নীচে 10px এবং এর জন্য সমস্ত অনুচ্ছেদ আমরা 10px এ শীর্ষ ইন্ডেন্ট সেট করি।
H1 ( মার্জিন-বটম: 24px; ) h2 ( মার্জিন-টপ: 24px; মার্জিন-বটম: 12px; ) p ( মার্জিন-টপ: 12px; )
এখন h2 শিরোনামটি h1 শিরোনামের পরে বা অনুচ্ছেদের পরে স্থাপন করা যেতে পারে। যাই হোক না কেন, শীর্ষ মার্জিন 24px এর বেশি হবে না।
সাধারণ নিয়ম
সংক্ষেপে, আমি মার্জিন এবং ইন্ডেন্টগুলি সাজানোর সময় যে নিয়মগুলি অনুসরণ করি তা তালিকাভুক্ত করতে চাই।
- যদি সন্নিহিত উপাদানগুলির একই প্যাডিং থাকে, তাহলে উপাদানগুলির পরিবর্তে প্যারেন্ট কন্টেইনারে সেট করা ভাল৷
- উপাদানগুলির মধ্যে ইন্ডেন্ট সেট করার সময়, উপাদানটি প্রয়োজনীয় বা ঐচ্ছিক কিনা তা বিবেচনা করা উচিত।
- অনুরূপ উপাদানগুলির একটি তালিকার জন্য, ভুলে যাবেন না যে উপাদানগুলির সংখ্যা পরিবর্তিত হতে পারে।
- উল্লম্ব প্যাডিং সম্পর্কে সচেতন থাকুন এবং এই বৈশিষ্ট্যটি ব্যবহার করুন যেখানে এটি আপনাকে উপকৃত করবে।
টাস্ক
বুলেটযুক্ত বা সংখ্যাযুক্ত তালিকার চারপাশে প্যাডিং সরান।
সমাধান
UL বা OL নির্বাচকের জন্য একটি শূন্য মান সহ মার্জিন এবং প্যাডিং শৈলী বৈশিষ্ট্য ব্যবহার করুন, তালিকার প্রকারের উপর নির্ভর করে, যেমন উদাহরণ 1 এ দেখানো হয়েছে।
উদাহরণ 1: তালিকা ইন্ডেন্টেশন
HTML5 CSS 2.1 IE Cr Op Sa Fx
- চেবুরাশকা
- কুমির জিনা
- শাপোক্লিয়াক
এই উদাহরণের ফলাফল চিত্রে দেখানো হয়েছে। 1.
ভাত। 1. উল্লম্ব এবং অনুভূমিক ইন্ডেন্ট ছাড়াই তালিকা করুন
লক্ষ্য করুন যে ওয়েব পৃষ্ঠার বাম প্রান্তে প্রদর্শিত তালিকা চিহ্নিতকারীগুলি অদৃশ্য হয়ে গেছে। তালিকাটি বামে না সরিয়ে শুধুমাত্র উপরের এবং নীচের মার্জিনগুলি সরাতে, মার্জিন-টপ এবং মার্জিন-নিচের বৈশিষ্ট্যগুলি ব্যবহার করুন (উদাহরণ 2)।
উদাহরণ 2: তালিকা ইন্ডেন্টেশন
HTML5 CSS 2.1 IE Cr Op Sa Fx
- চেবুরাশকা
- কুমির জিনা
- শাপোক্লিয়াক
CSS এর খুব কমই আলোচিত সুবিধার মধ্যে রয়েছে ওভারলে করার ক্ষমতা পটভূমি ছবিবিভিন্ন প্রভাব প্রাপ্ত করার জন্য। CSS2 মান অনুযায়ী, প্রতিটি ব্যাকগ্রাউন্ড ইমেজের জন্য একটি আলাদা HTML উপাদান প্রয়োজন। বেশিরভাগ ক্ষেত্রে, সাধারণ ইন্টারফেস উপাদানগুলির বর্ণনাকারী সাধারণ কোড আমাদের বেশ কয়েকটি প্রদান করে এইচটিএমএল উপাদান. এরকম একটি কেস হল বুকমার্ক-ভিত্তিক নেভিগেশন। এটি বুকমার্কগুলির নিয়ন্ত্রণ ফিরিয়ে নেওয়ার সময়, যা ক্রমাগত একটি প্রাথমিক নেভিগেশন টুল হিসাবে জনপ্রিয়তা বৃদ্ধি পাচ্ছে৷ এবং এখন, ব্যাপক CSS সমর্থনের জন্য ধন্যবাদ, আমরা আমাদের সাইটে বুকমার্কের গুণমান এবং চেহারা উন্নত করতে পারি। আপনি সম্ভবত ইতিমধ্যেই সচেতন যে সিএসএস একটি সাধারণ ক্রমবিহীন তালিকাকে নিয়ন্ত্রণ করতে ব্যবহার করা যেতে পারে। আপনি সম্ভবত এমন কিছু বুকমার্ক ডিজাইনের তালিকাও দেখেছেন যা দেখতে এইরকম: আমরা যদি আগের উদাহরণ থেকে কোডটি সঠিকভাবে নিতে পারি এবং বুকমার্কগুলিকে এর মতো কিছুতে পরিণত করতে পারি: কিছু সাধারণ CSS দিয়ে, এটি সম্ভব।নতুন কি? অনেক সিএসএস বুকমার্ক (সিএসএস ভিত্তিক বুকমার্ক) যেগুলিকে আমি দেখেছি তাদের ডিজাইনে একঘেয়েমি আছে: রঙিন আয়তক্ষেত্র, সম্ভবত একটি রূপরেখা সহ, বর্তমান বুকমার্ক একটি রূপরেখা ছাড়াই, হোভার স্টেটের জন্য রঙ পরিবর্তন হচ্ছে। এই সত্যিই সব CSS অফার আছে? একই রঙের ভরাট সহ বেশ কয়েকটি আয়তক্ষেত্র?সর্বজনীনভাবে উপলব্ধ কারণ এটি স্কেল করা যেতে পারে। তাই এতে অবাক হওয়ার কিছু নেই যে প্লেইন টেক্সট নেভিগেশন ওয়েব ডিজাইনে প্রত্যাবর্তন করছে। যাইহোক, CSS বুকমার্কের উপস্থিতি এখন পর্যন্ত ডিজাইনে এক ধাপ পিছিয়ে গেছে, এবং অবশ্যই এমন কিছু নয় যা ডিজাইন পোর্টফোলিওতে অন্তর্ভুক্ত করা যেতে পারে। নতুন প্রযুক্তিগুলি (যেমন CSS) আপনাকে আরও ভাল কিছু তৈরি করতে এবং একই ডিজাইনের গুণমানের সাথে যা বিটম্যাপ-ভিত্তিক টেবিল এবং বুকমার্ক ব্যবহার করে অর্জন করা হয়েছিল। স্লাইডিং ডোর পদ্ধতি আমরা সুন্দর, সত্যিকারের নমনীয় UI উপাদান তৈরি করতে পারি যা দুটি পৃথক পটভূমি চিত্র ব্যবহার করে পাঠ্য আকারের উপর ভিত্তি করে প্রসারিত এবং সংকোচন করে। একটি বুকমার্কের বাম দিকের জন্য, অন্যটি ডানদিকের জন্য৷ কল্পনা করুন যে এই জোড়া ছবি একটি দরজা ঢেকে দরজা স্লাইড করছে। যদি দরজাটি সরু হয় তবে এই দরজাগুলি আরও স্লাইড করে এবং ওভারল্যাপ করে এবং এর বিপরীতে, যদি আপনি একটি প্রশস্ত স্থান বন্ধ করতে চান তবে তারা কম স্লাইড করে এবং ওভারল্যাপ করে। এটি চিত্রে দেখানো হয়েছে: এই মডেল অনুসারে, একটি চিত্র অন্যটির অংশকে ওভারল্যাপ করে। আমাদের ছবির প্রান্তের চারপাশে অনন্য কিছু আছে, যেমন বুকমার্কের গোলাকার কোণে, আমরা একটি ছবি চাইবার সম্ভাবনা কম।সম্পূর্ণরূপে পিছনে আরেকটি ঢেকে. এটি যাতে না ঘটে তার জন্য, আমরা সামনের (আমাদের ক্ষেত্রে বামে) ছবিটি যতটা সম্ভব সংকীর্ণ করব। কিন্তু একই সময়ে, ছবিটি তার দৃশ্যমান স্বতন্ত্রতা রক্ষা করার জন্য যথেষ্ট প্রশস্ত হতে হবে। আমাদের ক্ষেত্রে, বৃত্তাকার কোণগুলি অনন্য, তাই সামনের চিত্রটি চিত্রটির এই বৃত্তাকার অংশের প্রস্থের হবে: যদি বুকমার্কের আকার বৃদ্ধি পায়, উদাহরণস্বরূপ, পাঠ্যকে স্কেল করার ফলে, আমাদের চিত্রগুলি ছড়িয়ে পড়বে পক্ষ থেকে, একটি অপ্রীতিকর ফাঁক প্রকাশ. অতএব, গ্রহণযোগ্য সম্প্রসারণের স্কেল মূল্যায়ন করা প্রয়োজন। ব্রাউজারে পাঠ্য স্কেলিং করার সময় একটি বস্তু কতটা বৃদ্ধি পেতে পারে? বাস্তবসম্মতভাবে, আপনার 300% পর্যন্ত বৃদ্ধি আশা করা উচিত। এই বৃদ্ধির জন্য ক্ষতিপূরণের জন্য, আপনাকে ব্যাকগ্রাউন্ড ইমেজ প্রসারিত করতে হবে। আমাদের উদাহরণে, আমরা একটি পিছনের চিত্র তৈরি করব () আকার 400x150 পিক্সেল, এবং সামনেরটি 9x150 পিক্সেল। ভুলে যাবেন না যে ব্যাকগ্রাউন্ড ইমেজগুলি শুধুমাত্র "ডোরওয়ে" এলিমেন্টের "ডোরওয়ে" তে দৃশ্যমান যা তারা প্রয়োগ করা হয়েছে ("ডোরওয়ে" - বিষয়বস্তু এলাকা + প্যাডিং)। আমাদের ছবি দুটি তাদের নিজ নিজ উপাদানের বাইরের কোণে সংযুক্ত করা হয়. এই চিত্রগুলির দৃশ্যমান অংশগুলি দরজার ভিতরে একত্রিত হয়ে একটি বুকমার্কের আকৃতি তৈরি করে: বুকমার্কটি বড় হওয়ার সাথে সাথে ছবিগুলি বিস্তৃত খোলার জন্য আলাদা হয়ে যায় এবং চিত্রগুলির দৃশ্যমান ক্ষেত্রটিও বড় হয়: আমাদের উদাহরণের জন্য, আমি ফটোশপে দুটি চিত্র তৈরি করেছি একটি নরম, ত্রিমাত্রিকতা, টোনিংয়ের জন্য, আমি ফিলটি হালকা করেছি এবং স্ট্রোকটিকে অন্ধকার করেছি - এই বিকল্পটি বাম দিকের নির্বাচিত মডেলটিকে অনুসরণ করবে সঠিক চিত্র, আমাদের ছবিটিকে দুটি অংশে কাটাতে হবে: হালকা চিত্রের সাথে একই কাজ করা উচিত এখন যেহেতু আমাদের কাছে 4টি চিত্র রয়েছে (1, 2, 3, 4) আমরা আমাদের বুকমার্কগুলির জন্য কোড এবং CSS তৈরি করা শুরু করতে পারি। বুকমার্ক তৈরি করা আমরা অনুভূমিক তালিকা তৈরির সাথে আরও পরিচিত হয়ে উঠছি। CSS সাহায্য আপনি একটি সারিতে বস্তুর একটি গ্রুপ সাজানোর অন্তত দুটি উপায় লক্ষ্য করবেন। প্রতিটির নিজস্ব সুবিধা এবং অসুবিধা রয়েছে। উভয়ের জন্যই CSS-এর বেশ জটিল দিকগুলির সমাধান করা প্রয়োজন এবং দ্রুত বিভ্রান্তিকর হয়ে উঠতে পারে। প্রথম পদ্ধতিটি ইনলাইন উপাদান ব্যবহার করে, দ্বিতীয়টি ফ্লোট বৈশিষ্ট্য ব্যবহার করে।প্রথম পদ্ধতি - সম্ভবত আরও সাধারণ - প্রদর্শন বৈশিষ্ট্য "ইনলাইন" এ পরিবর্তন করা জড়িত। "লাইন" পদ্ধতিটি তার সরলতায় আকর্ষণীয়। যাইহোক, এটি আমাদের পদ্ধতি বাস্তবায়নে সমস্যার দিকে পরিচালিত করে স্লাইডিং দরজাএকটি অনুভূমিক সারিতে তালিকা আইটেমগুলি সাজাতে। ভাসমান মডেল, যাইহোক, এছাড়াও হতাশাজনক হতে পারে. তার পরস্পরবিরোধী আচরণ কখনও কখনও সমস্ত অনুমানযোগ্য যুক্তি লঙ্ঘন করে। তবুও, একাধিক ভাসমান উপাদানগুলির সাথে কীভাবে মোকাবিলা করতে হয় এবং একটি ভাসমান সারি থেকে "প্রস্থান" করার নির্ভরযোগ্য উপায়গুলি জানা (বা এটি একটি পাত্রে রাখা) সম্পর্কে একটি সাধারণ ধারণা বিস্ময়কর কাজ করতে পারে। আমরা অন্য একটি ভাসমান কন্টেইনার উপাদানের ভিতরে বেশ কয়েকটি ভাসমান উপাদান রাখার চেষ্টা করব। এটি অবশ্যই করা উচিত যাতে বাইরের প্যারেন্ট ফ্লোট সম্পূর্ণরূপে অভ্যন্তরীণ ফ্লোটগুলিকে ঘিরে থাকে। তারপর আমরা আমাদের বুকমার্কের পিছনে একটি ব্যাকগ্রাউন্ড কালার বা ব্যাকগ্রাউন্ড ইমেজ যোগ করতে পারি। এটা মনে রাখা গুরুত্বপূর্ণ যে বুকমার্ক অনুসরণকারী উপাদানের অবস্থান পরিষ্কার CSS বৈশিষ্ট্য ব্যবহার করে পুনরুদ্ধার করতে হবে। তারপর ভাসমান বুকমার্ক অন্যান্য পৃষ্ঠা উপাদান স্থাপন প্রভাবিত করতে সক্ষম হবে না. উপাদান: # শিরোনাম ( float:left; width:100%; background:yellow; font-size:93%; line-height:normal; ) এছাড়াও আমরা ul এবং li উপাদানের মার্জিন এবং প্যাডিং শূন্যে সেট করব এবং অপসারণ করব তালিকা চিহ্নিতকারী। সমস্ত তালিকা উপাদানের জন্য আমরা একটি float:left declaration লিখব: #header ul ( margin:0; padding:0; list-style:none; ) #header li ( float:left; margin:0; padding:0; ) for লিঙ্কগুলি আমরা ব্লক প্রদর্শন সেট করব যাতে আমরা ইনলাইন মডেল সম্পর্কে উদ্বিগ্ন না হয়ে কী ঘটছে তা নিয়ন্ত্রণ করতে পারি: #header a ( display:block; ) তারপর আমরা তালিকা আইটেমটিতে আমাদের সঠিক পটভূমি চিত্র যুক্ত করব (পরিবর্তন এবং সংযোজনগুলি বোল্ডে দেখানো হয়েছে): #header li ( float:left ; background:url("norm_right.gif") no-repeat right top; padding:0; ) বাম ব্যাকগ্রাউন্ড ইমেজ যোগ করার আগে, আসুন বিরতি দিয়ে দেখি উদাহরণ 1-এ এই পর্যন্ত আমাদের কী আছে . লিঙ্কে এটি প্রয়োগ করে ডানদিকে সামনে (আমাদের ভিতরের উপাদান)। বুকমার্কের প্রান্ত থেকে পাঠ্যটিকে দূরে সরানোর জন্য অবিলম্বে একটি প্যাডিং যুক্ত করা যাক: #header a ( display:block; background:url("norm_left.gif") no-repeat left top; padding:5px 15px; ) ফলাফল উদাহরণ 2 এ দেখানো হয়েছে। আমাদের বুকমার্কগুলি আকার নিতে শুরু করেছে। এই মুহুর্তে, আসুন বিভ্রান্ত IE5/Mac ব্যবহারকারীদের সম্বোধন করি যারা নিজেদেরকে জিজ্ঞাসা করছেন, “এখানে কী হচ্ছে? বুকমার্কগুলি উল্লম্বভাবে স্ট্যাক করা হয় এবং পুরো স্ক্রীন জুড়ে প্রসারিত হয়।" চিন্তা করবেন না, আমরা শীঘ্রই আপনার সাথে যোগাযোগ করব। ইতিমধ্যে, কি ঘটছে তার উপর নজর রাখুন বা অস্থায়ীভাবে অন্য ব্রাউজারে স্যুইচ করুন এবং আশ্বস্ত থাকুন যে আমরা শীঘ্রই IE5/Mac সমস্যাটি সমাধান করব। আমরা মূলত বডি এলিমেন্টের জন্য যে প্যাডিং যোগ করেছিলাম তা সরিয়ে ফেলব এবং ul এলিমেন্টের উপরে, বাম এবং ডানে 10 পিক্সেল প্যাডিং যোগ করব: #header ( float:left; width:100%; background:#DAE0D2 url ("bg.gif") পুনরাবৃত্তি করুন -x নীচে; লাইন-উচ্চতা: সাধারণ; বুকমার্কে, এটি সীমান্তের ওপারে বর্তমান বুকমার্কটিকে "ফাঁস" করতে রয়ে গেছে, যেমনটি আমরা ইতিমধ্যে উপরে আলোচনা করেছি। আপনি ভাবতে পারেন যে আমরা আমাদের বুকমার্কগুলিতে একটি নীচের সীমানা প্রয়োগ করব যা #header উপাদানের ব্যাকগ্রাউন্ড চিত্রের নীচের স্ট্রোকের সাথে মেলে এবং তারপরে বর্তমান বুকমার্কের জন্য সীমানা রঙটি সাদাতে পরিবর্তন করব৷ যাইহোক, এর ফলে মনোযোগী চোখে দৃশ্যমান একটি ক্ষুদ্র "পদক্ষেপ" হবে। কিন্তু যদি আমরা লিঙ্কগুলির জন্য প্যাডিং পরিবর্তন করি, আমরা বর্তমান বুকমার্কের ভিতরে তীক্ষ্ণ এবং ডান কোণ তৈরি করতে পারি, যেমনটি বর্ধিত ছবিতে দেখানো হয়েছে: আমরা একটি নিয়মিত লিঙ্কের জন্য নীচের প্যাডিংকে 1 পিক্সেল (5px - 1px = কমিয়ে দিয়ে এটি অর্জন করব) 4px), এবং তারপর বর্তমান লিঙ্কে এই পিক্সেল যোগ করুন: #header a ( display:block; background:url("norm_left.gif") no-repeat left top; padding:5px 15px 4px; ) #header #current a ( background-image:url(" norm_left_on.gif"); প্যাডিং-বটম:5px আমরা উদাহরণ 3 পাই। চূড়ান্ত পদক্ষেপ একটি সতর্ক চোখ আগের উদাহরণে বুকমার্কের কোণে সাদা অংশগুলি লক্ষ্য করতে পারে। এই অস্বচ্ছ কোণগুলি সামনের চিত্রের বাম কোণ দিয়ে পিছনের চিত্রটিকে দৃশ্যমান হতে বাধা দেয়। তাত্ত্বিকভাবে, আমরা এই কোণগুলিকে তাদের পিছনের পটভূমির মতো একই রঙ করতে পারি। কিন্তু আমাদের বুকমার্কগুলি উচ্চতা বৃদ্ধি পেতে পারে এবং তারপরে পিছনের গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড নীচে চলে যাবে, যা কোণার রঙ এবং ব্যাকগ্রাউন্ড গ্রেডিয়েন্টের অমিলের দিকে নিয়ে যাবে। পরিবর্তে, আমরা তাদের কোণগুলি স্বচ্ছ করে আমাদের ছবিগুলি পরিবর্তন করব। যদি বুকমার্কের আউটলাইনে অ্যান্টি-অ্যালিয়াসিং প্রয়োগ করা হয়, আমরা হিসাবে সেট করব আসুন নিম্নলিখিত কোড দিয়ে শুরু করি: · হোম · সংবাদ · পণ্য · সম্পর্কে · যোগাযোগ অনুশীলনে, # হেডার ব্লকে থাকতে পারে, উদাহরণস্বরূপ, একটি লোগো এবং একটি অনুসন্ধান ফর্ম। আমাদের উদাহরণে, আমরা "#" এ প্রতিটি লিঙ্কের জন্য href মান সংক্ষিপ্ত করব। এটা স্পষ্ট যে বাস্তব জীবনে, এই আইকনের পরিবর্তে, একটি ফাইল বা ফোল্ডারের পথ নির্দেশিত হবে।(ম্যাট) ব্যাকগ্রাউন্ড গ্রেডিয়েন্টের গড় মান। এখন কোণগুলি স্বচ্ছ, ডান চিত্রের একটি অংশ বাম দিকের স্বচ্ছ কোণে দৃশ্যমান। এটি এড়াতে, বাম চিত্রের (9px) প্রস্থের সমান তালিকা আইটেমে একটি ছোট বাম প্যাডিং যোগ করুন। একটি তালিকা আইটেমে ইন্ডেন্টেশন যোগ করার পরে পাঠ্যটিকে কেন্দ্রীভূত রাখতে, আপনাকে লিঙ্ক থেকে একই পরিমাণ বাম ইন্ডেন্টেশন সরাতে হবে (15px - 9px = 6px): #header li ( float:left; background:url("right.gif ") no-repeat right top; margin:0; padding:0 0 0 9px; ) #header a ( display:block; background:url("left.gif") no-repeat left top; padding:5px 15px 4px 6px ; ) কিন্তু এই বিকল্পটি আমাদের জন্য উপযুক্ত হবে না, যেহেতু বাম চিত্রটি এখন বুকমার্কের বাম প্রান্ত থেকে 9 পিক্সেল যোগ করা হয়েছে। এখন যেহেতু বাম এবং ডান "ডোরওয়ে" এর ভিতরের প্রান্তগুলি একে অপরের সাথে মিলিত হয়েছে, আমাদের আর বাম ছবি সামনে রাখার দরকার নেই৷ এবং আমরা বিপরীত উপাদানগুলিতে প্রয়োগ করে পটভূমি চিত্রগুলির ক্রম পরিবর্তন করতে পারি। আমাদের বর্তমান বুকমার্কের জন্য ছবিগুলিও পরিবর্তন করতে হবে: #header li ( float:left; background:url("left.gif") no-repeat left top; margin:0; padding:0 0 0 9px; ) #header a, #header শক্তিশালী, #header span ( display:block; background:url("right.gif") no-repeat right top; padding:5px 15px 4px 6px; ) #header #current ( background-image:url(" left_on gif"); ) #header #current a ( background-image:url("right_on.gif"); padding-bottom:5px; ) এটি করার পরে, আমরা উদাহরণ 4 পাই। লক্ষ্য করুন যে আমরা তৈরি করতে যে পদক্ষেপগুলি নিয়েছিলাম স্বচ্ছ কোণগুলি, বুকমার্কের বাম দিকে একটি ছোট "মৃত" অঞ্চলের উপস্থিতির দিকে পরিচালিত করে, যেখানে এটি মাউস হভারে সাড়া দেয় না। মৃত অঞ্চলটি পাঠ্যের বাইরে, তবে এটি এখনও লক্ষণীয়।স্বচ্ছ ছবি আমাদের বুকমার্কের প্রতিটি পাশের জন্য এটি ব্যবহার করার প্রয়োজন নেই। যদি আমরা আমাদের বুকমার্কে একটি মৃত এলাকা না রাখতে পছন্দ করি, তাহলে আমাদের গ্রেডিয়েন্টের পরিবর্তে বুকমার্কগুলির পিছনে একটি কঠিন ফিল ব্যবহার করতে হবে এবং বুকমার্কগুলির কোণগুলিকে একই রঙের করতে হবে। আপাতত আমরা কোণগুলোকে স্বচ্ছ রাখব। [ ] - - - এবং অবশেষে, সমাপ্তি স্পর্শ. একযোগে: সমস্ত পাঠ্যকে বোল্ড করুন, নিয়মিত বুকমার্কগুলিতে পাঠ্যটি বাদামী করুন এবং বর্তমান বুকমার্কগুলিতে গাঢ় ধূসর করুন, হোভার লিঙ্কের অবস্থার জন্য পাঠ্যে একই রঙ বরাদ্দ করুন, লিঙ্কগুলির আন্ডারলাইনিং সরান৷ এই বিন্দু পর্যন্ত করা সমস্ত সংযোজন এবং পরিবর্তনগুলি উদাহরণ 5 এ উপস্থাপিত হয়েছে। সামঞ্জস্য নিশ্চিত করার আরেকটি পদ্ধতি উদাহরণ 2 দেখার পরে, আমরা বুঝতে পেরেছি যে IE5/Mac-এর সাথে একটি সমস্যা ছিল, যা বুকমার্কগুলিকে উইন্ডোর সম্পূর্ণ প্রস্থ পর্যন্ত প্রসারিত করে, লাইনিং উল্লম্বভাবে একটি অন্য নীচে তাদের আপ. আমরা যে প্রভাবটি খুঁজছি তা পুরোপুরি নয়। এই নেভিগেশনটি দ্রুত লোড হয়, রক্ষণাবেক্ষণ করা সহজ এবং এর ভিতরের পাঠ্যটি নকশাকে ব্যাহত না করে যে কোনও দিকে উল্লেখযোগ্যভাবে স্কেল করা যেতে পারে। বলাই বাহুল্য, যে কোনো পরিশীলিত ন্যাভিগেশন তৈরির জন্য এই পদ্ধতিটি কতটা নমনীয়? IE/Win-এ, উল্লেখিত "মৃত" অঞ্চলটি এই পদক্ষেপগুলি নেওয়ার আগেও এবং লিঙ্ক পাঠ্যের সব দিকে বিদ্যমান ছিল। এই সমস্যার সমাধান সিএসএসের স্লাইডিং ডোরস-এর পরবর্তী নিবন্ধে বলা হয়েছে - প্রায়। অনুবাদক] ব্যবহৃত কৌশলটিতে অন্যান্য প্রভাব যুক্ত হতে পারে, যা আমরা এখানে বিবেচনা করি না। আমাদের উদাহরণে, আমরা হোভার স্টেটের জন্য পাঠ্যের রঙ পরিবর্তন করেছি, কিন্তু আকর্ষণীয় রোলওভার প্রভাবের জন্য কেন পুরো পটভূমি চিত্রটি পরিবর্তন করব না। আমাদের কোডে দুটি নেস্টেড এইচটিএমএল উপাদান সহ, আমরা সর্বদা ব্যাকগ্রাউন্ড চিত্রগুলিকে ওভারলে করতে CSS ব্যবহার করতে পারি এবং এমন প্রভাবগুলি অর্জন করতে পারি যা আমরা স্বপ্নেও ভাবিনি৷ আমাদের উদাহরণে, আমরা বুকমার্কগুলির একটি অনুভূমিক সারি তৈরি করেছি, তবে স্লাইডিং ডোর পদ্ধতিটি অন্যান্য অনেক ক্ষেত্রে ব্যবহার করা যেতে পারে। আপনি এই পদ্ধতির জন্য কোন অ্যাপ্লিকেশন প্রস্তাব করবেন?
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip equinder a equinder equinder uptate "Velit esse cillum dolore eu Fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, culpa qui officia deserunt mollit anim id est laborum." অনুচ্ছেদ 1.10.32 "ডি ফিনিবাস বোনরাম এট ম্যালোরাম", 45 খ্রিস্টাব্দে সিসেরো দ্বারা লেখা। "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt envoluptatum a volupitasum voluptatum ut odit ut fugit, sedquia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt ut enim ad minima veniam , QUIS NOSTRUM Exercitational Ullam Corporis Suscipit Laboriosam, Nisi UAT Ex Ea Commodi Consequatur, Ea Commodi Consequatur, Ea Commodi Consequatur? তুর? ইংরেজি অনুবাদ 1914, এইচ. র্যাকহ্যাম "কিন্তু আমি আপনাকে অবশ্যই ব্যাখ্যা করব যে কীভাবে আনন্দের নিন্দা করা এবং ব্যথার প্রশংসা করার এই সমস্ত ভুল ধারণার জন্ম হয়েছিল এবং আমি আপনাকে সিস্টেমের একটি সম্পূর্ণ বিবরণ দেব এবং মহান অনুসন্ধানকারীর প্রকৃত শিক্ষাগুলি ব্যাখ্যা করব। সত্যের, মানব সুখের মাস্টার-নির্মাতা কেউই আনন্দকে প্রত্যাখ্যান করে না, অপছন্দ করে না বা এড়িয়ে যায়, কারণ এটি আনন্দ, কিন্তু কারণ যারা আনন্দকে অনুসরণ করতে জানে না তারা এমন পরিণতির মুখোমুখি হয় যা অত্যন্ত বেদনাদায়ক এবং আবার নেই। যে কেউ ভালোবাসে বা সাধনা করে বা নিজের ব্যথা পেতে চায়, কারণ এটি ব্যথা, তবে মাঝে মাঝে এমন পরিস্থিতি ঘটে যার মধ্যে তেল এবং ব্যথা তাকে কিছু দুর্দান্ত আনন্দ জোগায়, একটি তুচ্ছ উদাহরণ নিতে, আমাদের মধ্যে কে কখনও শ্রমসাধ্য শারীরিক অনুশীলন করে, এর থেকে কিছু সুবিধা পাওয়া ব্যতীত কার কোন অধিকার আছে এমন একজন ব্যক্তির সাথে দোষ খুঁজে বের করার যে এমন একটি আনন্দ উপভোগ করতে পছন্দ করে যার কোন বিরক্তিকর পরিণতি নেই, বা যে এমন ব্যথা এড়িয়ে চলে যা কোন ফল আনন্দ দেয় না? অনুচ্ছেদ 1.10.33 "ডি ফিনিবাস বোনরাম এট ম্যালোরাম", 45 খ্রিস্টাব্দে সিসেরো দ্বারা লেখা। "Vero EOS et Accusamus et Iusto dignissimos qui blanditiis praesentium voluptatum deleniti atti quos Dolores molestias experim Ecati Cupiditate Non Provider, Similique Sunt in Culpa Qui Officia Deserunt Mollitia Aini, 2018 tinctio নাম libero tempor , সঙ্গে সল্যুটা নোবিস est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumend est, omnis dolor repellendus et aut officiis debitis or rerum necessitatibus volupetudie volunte volupe estiae non recusandae Itaque earum rerum হাই টেনেটুর এবং সেপিয়েন্ট ডিলেক্টাস, ইউটি আউট রিসিয়েন্ডিস ভলুপ্টাটিবাস মাইওরেস ওরফে কনসেকুয়াচার বা পারফেরেন্ডিস ডলোরিবাস অ্যাসপিরিওরস রিপেলাট।" ইংরেজি অনুবাদ 1914, এইচ. র্যাকহ্যাম "অন্যদিকে, আমরা ধার্মিক ক্ষোভ এবং অপছন্দের সাথে নিন্দা জানাই যারা এই মুহূর্তের আনন্দের মোহন দ্বারা এতটাই প্রতারিত এবং হতাশ, ইচ্ছা দ্বারা এতটাই অন্ধ যে তারা ব্যথা এবং কষ্টের পূর্বাভাস দিতে পারে না। এবং সমান দোষ তাদের জন্য যারা ইচ্ছাশক্তির দুর্বলতা দ্বারা সঙ্কুচিত হয়, যা আমাদের পছন্দের ক্ষমতার ক্ষেত্রে সম্পূর্ণরূপে সরল এবং সহজ অপ্রত্যাশিত এবং যখন কোন কিছুই আমাদের সবচেয়ে ভালো কাজ করতে সক্ষম হতে বাধা দেয় না, তখন প্রতিটি আনন্দকে স্বাগত জানাতে হবে এবং প্রতিটি ব্যথা এড়িয়ে যেতে হবে কিন্তু নির্দিষ্ট পরিস্থিতিতে এবং দায়িত্বের দাবি বা ব্যবসার বাধ্যবাধকতার কারণে এটি প্রায়শই ঘটবে। প্রত্যাখ্যান করা এবং বিরক্তিগুলি গ্রহণ করা হয়েছে তাই জ্ঞানী ব্যক্তি এই বিষয়গুলিতে নির্বাচনের এই নীতিটি ধরে রাখেন: তিনি অন্যান্য বৃহত্তর আনন্দগুলিকে সুরক্ষিত করার জন্য আনন্দকে প্রত্যাখ্যান করেন, অন্যথায় তিনি আরও খারাপ ব্যথা এড়াতে যন্ত্রণা সহ্য করেন।"
সেটিংস
