Huge Sell on Popular Electronics
ইন্দ্র ভূষণ শুভ
CSS এ, উপাদানকে আনুভূমিক ভাবে সারিবদ্ধ করার জন্য বিভিন্ন ধরনের বৈশষ্ট্য ব্যবহার করা হয়।
সারিবদ্ধ ব্লক উপাদানসমূহ
ব্লক উপাদান হলো এক ধরণের উপাদান যা ব্যবহারযোগ্য সব width ব্যবহার করে, এবং আগে ও পরে একটি লাইন বিরতি থাকে।
ব্লক উপাদানের উদাহরণ
মার্জিন বৈশিষ্ট্য ব্যবহার করে কেন্দ্রে সারিবদ্ধ করা
বাম এবং ডান মার্জিনকে "auto" সেট করে ব্লক উপদানকে কেন্দ্রে সারিবদ্ধ করা যায়।
বিশেষ দ্রষ্টব্যঃ মার্জিন ব্যবহারঃ auto; IE8 এবং পুর্বের গুলোতে কাজ করে না যতক্ষণ না !DOCTYPE ধরা হয়।
বাম এবং ডান মার্জিন সয়ংক্রিয় ধরা হয় যাতে তারা ব্যবহারযোগ্য মার্জিন সমান ভাগে বিভক্ত করে। এর ফলে কেন্দ্রীভূত উপাদান পাওয়া যায়ঃ
উদাহরণ
.center {
margin-left: auto;
margin-right: auto;
width: 70%;
background-color: #b0e0e6;
}
নির্দেশঃ প্রস্থ যদি ১০০% হয় তবে কেন্দ্রে সারির কনো প্রভাব নেই।
স্থান বৈশিষ্ট্যকে ব্যবহার করে বাম এবং ডানে সারিবদ্ধ করা
পূর্ণ অবস্থানের জন্য সারিবদ্ধ উপাদানে একটি পদ্ধতি ব্যবহার কর হয়ঃ
উদাহরণ
.right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}
বিশেষ দ্রষ্টব্যঃ পূর্ণ অবস্থানের উপাদানকে স্বাভাবিক প্রবাহ থেকে সরিয়ে নেওয়া হয়, এবং উপাদানকে আবৃত করতে পারে।
Crossbrowser সামঞ্জস্যের সমস্যা
যখন উপাদানকে সারিবদ্ধ করা হয়,<body> উপাদানের জন্য মার্জিন এবং প্যাডিংকে পূর্বনির্ধারণ করা সর্বদাই একটি ভাল ধারণা। এটি করা হয় বিভিন্ন ব্রাউজেরের দৃশ্যমান পার্থক্য এড়ানোর জন্য।
যখন স্থান বৈশিষ্ট্য ব্যবহার করা হয় তখন IE8 এবং পুর্বের গুলোতে কিছু সমস্যা দেখা দেয়। যদি ধারক উপাদানটিতে ( এক্ষত্রে<div class="container">) নির্ধারিত প্রস্থ থাকে এবং !DOCTYPE না ধরা হয়, IE8 এবং পুর্বের গুলো ডান দিকে 17px এর একটি মার্জিন যোগ করে। এটি একটি স্ক্রলবারের জন্য সংরক্ষিত স্থান মনে করা হয়। স্থান বৈশিষ্ট্যে সবসময় !DOCTYPE সেট করতে হয়ঃ
উদাহরন
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
}
.right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}
ফ্লট বৈশিষ্ট্য ব্যবহার করে বামে এবং ডানে সারিবদ্ধ করা
ফ্লট বৈশিষ্ট্যের জন্য সারিবদ্ধ উপাদানে একটি পদ্ধতি ব্যবহার কর হয়ঃ
উদাহরণ
.right {
float: right;
width: 300px;
background-color: #b0e0e6;
}
Crossbrowser সামঞ্জস্যের সমস্যা
যখন উপাদানকে সারিবদ্ধ করা হয়,<body> উপাদানের জন্য মার্জিন এবং প্যাডিংকে পূর্বনির্ধারণ করা সর্বদাই একটি ভাল ধারণা। এটি করা হয় বিভিন্ন ব্রাউজেরের দৃশ্যমান পার্থক্য এড়ানোর জন্য।
যখন ফ্লট বৈশিষ্ট্য ব্যবহার করা হয় তখন IE8 এবং পুর্বের গুলোতে কিছু সমস্যা দেখা দেয়। যদি উপাদানটিতে !DOCTYPE না ধরা হয়, IE8 এবং পুর্বের গুলো ডান দিকে 17px এর একটি মার্জিন যোগ করে। এটি একটি স্ক্রলবারের জন্য সংরক্ষিত স্থান মনে করা হয়। স্থান বৈশিষ্ট্যে সবসময় !DOCTYPE সেট করতে হয়ঃ
উদাহরণ
body {
margin: 0;
padding: 0;
}
.right {
float: right;
width: 300px;
background-color: #b0e0e6;
}
