ডিজাইন ওয়েব পৃষ্ঠার লেআউটগুলিতে সিএসএস ফ্লোট সম্পত্তি ব্যবহার করা
CSS বৈশিষ্ট্যটি লেআউটের জন্য একটি অত্যন্ত গুরুত্বপূর্ণ বৈশিষ্ট্য। এটি আপনাকে আপনার ওয়েব পৃষ্ঠা ডিজাইনের অবস্থান ঠিক করার জন্য অনুমোদন করে দেয় যেমনটি আপনি প্রদর্শন করতে চান- কিন্তু এটি ব্যবহার করার জন্য আপনাকে এটি কীভাবে কাজ করে তা বুঝতে হবে।
একটি শৈলী শীট, CSS ফ্লোট সম্পত্তি এই মত দেখায়:
ঠিক আছে (float: right; }
এটি ব্রাউজারকে বলে যে "ডান" বর্গের সাথে সবকিছু ডানদিকে তোলপাড় করা উচিত।
আপনি এটি এই মত প্রদান করা হবে:
ক্লাস = "ডান" />
আপনি কি সিএসএস ভাসা সম্পত্তি সঙ্গে ভাসা করতে পারেন?
আপনি একটি ওয়েব পৃষ্ঠায় প্রতিটি উপাদান ফ্লোট করতে পারবেন না। আপনি শুধুমাত্র ব্লক-স্তরের উপাদানগুলি ভাসতে পারেন এইগুলি এমন উপাদান যা পৃষ্ঠায় একটি ব্লকের স্থান নেয়, যেমন চিত্র (), অনুচ্ছেদ (), বিভাগ (), এবং তালিকা ()।
পাঠ্য প্রভাবিত করে এমন অন্যান্য উপাদানগুলি, কিন্তু পৃষ্ঠায় একটি বাক্স তৈরি করে না যাতে ইনলাইন উপাদানগুলি বলা হয় এবং তা শুরু করা যায় না। এই স্প্যান (), লাইন বিরতি (), শক্তিশালী জোর (), বা তির্যক () মত উপাদান।
কোথায় তারা ভাসা?
আপনি ডান বা বামে উপাদান ভাসতে পারেন ভাসমান উপাদান অনুসরণ করে যে কোন উপাদান অন্য দিকে floated উপাদান চারপাশে প্রবাহিত হবে।
উদাহরণস্বরূপ, যদি আমি বামে একটি ছবিটি ভাসতে থাকি, তবে কোনও টেক্সট বা অন্য উপাদানগুলি এটির ডানদিকে চারদিকে ছড়িয়ে পড়বে। এবং যদি আমি ডানদিকে একটি ছবি ভাসতে থাকি, তাহলে কোনও পাঠ্য বা অন্য উপাদানগুলি এটির চারপাশে বাম দিকে প্রবাহিত হবে একটি চিত্র যা প্রযোজ্য কোনও ফাঁকা শৈলী ছাড়াই পাঠের একটি ব্লকের মধ্যে স্থাপন করা হবে তবে ব্রাউজারটি ছবিগুলি প্রদর্শনের জন্য সেট করা হবে।
এটি সাধারণত চিত্রের নীচের অংশে প্রদর্শিত নীচের টেক্সটের প্রথম লাইনের সাথে।
তারা কতটা বাস করবে?
একটি উপাদান যা চালু করা হয়েছে সেটি যতদূর সম্ভব কনটেইনার উপাদান বাম বা ডানে চলে যাবে। আপনার কোড লিপিবদ্ধ করা হয়েছে তার উপর ভিত্তি করে এটি বিভিন্ন বিভিন্ন পরিস্থিতিতে ফলাফল।
এই উদাহরণগুলির জন্য, আমি বামে একটি ছোট DIV উপাদান ভাসমান হবে:
- যদি ভাসমান উপাদানটি পূর্বনির্ধারিত প্রস্থ না থাকে, তবে এটি ভাসমানের প্রযোজ্য এবং উপলব্ধ হিসাবে যতটা অনুভূমিক স্থানটি গ্রহণ করবে। দ্রষ্টব্য: কিছু ব্রাউজার নির্দিষ্ট উপাদানগুলির পাশে উপাদান স্থাপন করার চেষ্টা করে যখন প্রস্থটি সংজ্ঞায়িত হয় না- সাধারণত অ-ভাসমান উপাদানটি কেবলমাত্র একটি ছোট পরিমাণ স্থান প্রদান করে। সুতরাং আপনি সবসময় floated উপাদানগুলির উপর একটি প্রস্থ সংজ্ঞায়িত করা উচিত।
- যদি ধারক উপাদানটি এইচটিএমএল এলিমেন্ট হয়, তবে floated DIV পৃষ্ঠার বাম মার্জিনে বসবে।
- যদি ধারক উপাদান নিজে অন্য কিছু দ্বারা অন্তর্ভূক্ত থাকে, তবে floated DIV ধারকটির বাম মার্জিনে বসবে।
- আপনি ঘাঁটি অবজেক্ট উপাদান করতে পারেন, এবং যে একটি বিস্ময়কর জায়গায় ফ্লোআউট শেষ হতে পারে। উদাহরণস্বরূপ, একটি float DIV- এর ভিতর একটি বাম প্রবাহিত DIV হয়।
- ধারক এ রুম আছে যদি ভাসমান উপাদান একে অপরের পাশে বসতে হবে। উদাহরণস্বরূপ, এই কন্টেইনারটিতে 400 পিএক্স বিস্তৃত ধারকটিতে তিনটি 100 পিএক্স বিস্তৃত ডিভি উপাদান রয়েছে।
আপনি একটি ফটো গ্যালারি বিন্যাস তৈরি করতে floats ব্যবহার করতে পারেন। আপনি প্রত্যেকটি থাম্বনেইল (এটি সবই একই আকারে কাজ করে) ক্যাপশন সহ DIV- এ এবং ডিএইচ উপাদানের ভাসা সঙ্গে রাখুন।
ব্রাউজার উইন্ডো কতটা বিস্তৃত তা কোন ব্যাপার না, থাম্বনেলগুলি অভিন্নভাবে লাইন হবে।
ফ্ল্যাট বন্ধ চালু
একবার আপনি ভাসা একটি উপাদান পেতে কিভাবে জানি, এটি ফ্লোট বন্ধ কিভাবে জানতে গুরুত্বপূর্ণ। আপনি সিএসএস পরিষ্কার সম্পত্তি সঙ্গে ভাসমান বন্ধ। আপনি বাম ফ্লাট পরিষ্কার করতে পারেন, ডান floats বা উভয়:
পরিষ্কার: বাম;
পরিষ্কার: ডান;
স্পষ্ট উভয়;
যে কোনও উপাদান যা আপনি পরিষ্কার বৈশিষ্ট্যের জন্য সেট করেছেন তা এমন একটি উপাদানের নীচে প্রদর্শিত হবে যা সেই দিকটি প্রবাহিত হবে। উদাহরণস্বরূপ, এই উদাহরণে পাঠ্যের প্রথম দুটি অনুচ্ছেদের সাফ করা হয় না, তবে তৃতীয়টি হল
বিভিন্ন লেআউট প্রভাব পেতে আপনার নথি বিভিন্ন উপাদান স্পষ্ট মান খেলুন।
সবচেয়ে আকর্ষণীয় floated লেআউটগুলির মধ্যে একটি হল পাঠ্যের অনুচ্ছেদগুলির পাশে ডান বা বামের কলামে চিত্রগুলির একটি সিরিজ। এমনকি যদি ইমেজটি অতীতের স্ক্রোল করার জন্য পাঠ্য যথেষ্ট না হয়, তবে আপনি আগের ইমেজের পাশে বরং কলামের মধ্যে উপস্থিত হওয়া নিশ্চিত করতে সমস্ত চিত্রগুলিতে স্পষ্ট ব্যবহার করতে পারেন।
HTML (এই অনুচ্ছেদটি পুনরাবৃত্তি করুন):
Duis একটি তাত্পর্যপূর্ণ উদ্দীপক এবং ভলিউটেট মধ্যে রিপোর্ট করার সময় তিনি কিছু সময়ের মধ্যে কাজ করতে হবে। কল্পনাপ্রসূত অকর্মণ্য কাজ এবং শ্রোতাদের জন্য কোনও মাপকাঠি।
সিএসএস (বামদিকে ইমেজ ভাসতে):
img.float {ফ্লোট: বাম;
পরিষ্কার: বাম;
মার্জিন: 5px;
}
এবং ডানদিকে:
img.float {float: অধিকার;
স্পষ্ট: ডান;
মার্জিন: 5px;
}
লেআউট জন্য floats ব্যবহার করে
একবার আপনি ভাসা সম্পত্তি কাজ কিভাবে বুঝতে, আপনি আপনার ওয়েব পেজ প্রস্থান করার জন্য এটি ব্যবহার শুরু করতে পারেন। এইগুলি আমি একটি floated ওয়েব পৃষ্ঠা তৈরি করতে নিতে পদক্ষেপগুলি হয়:
- লেআউট ডিজাইন করুন (কাগজ বা একটি গ্রাফিক টুল বা আমার মাথায়)।
- পৃষ্ঠা বিভাগ কোথায় হতে যাচ্ছে তা নির্ধারণ করুন।
- বিভিন্ন পাত্রে এবং তাদের মধ্যে উপাদানগুলির প্রস্থ নির্ধারণ করুন।
- সব ভাসা এমনকি বহিঃস্থ কন্টেইনার উপাদানটি বাম দিকে তলিয়ে যায় যাতে আমি জানতে পারি এটি ব্রাউজার ভিউ পোর্ট সম্পর্কিত।
যতক্ষণ আপনি আপনার লেআউট বিভাগগুলির প্রস্থ (শতকরা জরিমানা) জানেন, ততক্ষণ আপনি তাদের পৃষ্ঠায় থাকা অবস্থানের জন্য float property ব্যবহার করতে পারেন। এবং চমৎকার জিনিস হল, আপনি ইন্টারনেট এক্সপ্লোরার বা ফায়ারফক্সের জন্য ভিন্ন ভিন্ন বক্স মডেলের বিষয়ে চিন্তা করতে হবে না।