সিএসএস(৩) মাল্টিপল কলাম
সিএসএস(৩) মাল্টিপল কলাম লেআউট
আপনি সিএসএস(৩) মাল্টিপল কলাম লেআউট ব্যবহার করে আপনার ওয়েব পেজে সহজে খবরের কাগজের মত একাধিক কলাম লিখতে পারবেনঃ
ক্রিকেট
মাশরাফি ভাবছেন অন্যভাবে
অধিনায়ক হিসেবে বাংলাদেশের হয়ে সবচেয়ে বেশি ম্যাচ জেতার রেকর্ডটি এত দিন ছিল হাবিবুল বাশারের দখলে। কাল আফগানিস্তানের বিপক্ষে পাওয়া রুদ্ধশ্বাস জয়ে সেটি নিজের করে নিয়েছেন মাশরাফি বিন মুর্তজা। টেস্ট, ওয়ানডে ও টি-টোয়েন্টি মিলিয়ে এখন পর্যন্ত মোট ৫৩টি ম্যাচে বাংলাদেশ দলকে নেতৃত্ব দিয়েছেন মাশরাফি। এর ৩১টিতেই জয় পেয়েছে বাংলাদেশ, হার ২১টিতে।
টেস্ট ও ওয়ানডেতে হাবিবুলের নেতৃত্বে ৮৭ ম্যাচ খেলে বাংলাদেশের জয় ৩০টি ও হার ৫৩টি। তিন সংস্করণের ক্রিকেট মিলিয়ে সাকিব আল হাসান নেতৃত্ব দিয়েছেন ৬২ ম্যাচে, জিতেছেন ২৪টিতে। আর মুশফিকুর রহিমের নেতৃত্বে ৮৪ ম্যাচে জয়ের সংখ্যা ২৩টি।
কিন্তু সবচেয়ে বেশি ম্যাচ জেতা অধিনায়ক হওয়ার গর্ব মাশরাফিকে তেমন একটা স্পর্শ করছে না। মুঠোফোনে বলছিলেন, ‘আমি এটা জানতাম না, এমনকি জানার পরও এটাকে বিশেষ কিছুই মনে হয়নি। এটা এমন কোনো ঘটনা নয়। স্বাভাবিক প্রক্রিয়ায়ই এসব জয় এসেছে।’
মাশরাফির কাছে এই রেকর্ডের চেয়েও গুরুত্বপূর্ণ আফগানিস্তানকে হারানোর ধরনটা, ‘আমি বেশি রোমাঞ্চিত বরং ওটা নিয়েই...আফগানিস্তানের বিপক্ষে ঘুরে দাঁড়িয়ে যেভাবে জিতলাম। এভাবে দল আরও ঐক্যবদ্ধ হয়ে ওঠে।’ অধিনায়কের ধারণা, অনেক দিন পর খেলতে নামাতেই লড়াইয়ের ওই স্পৃহাটা পেয়েছেন দলের খেলোয়াড়েরা, ‘আমার মনে হয়, অনেক দিন পর খেলতে নামাতেই সবাই এভাবে খেলেছে। এ রকম জয় মাঝেমধ্যেই প্রয়োজন। তাহলে কার কী ভুল ধরা পড়ে, সেগুলো শোধরানোর উপায় বের করা যায়। খেলোয়াড়দের মধ্যে পেশাদারি মনোভাব ফুটে ওঠে। নিজেকে সবাই নতুনভাবে চিনতে পারে।’
সিএসএস(৩) মাল্টিপল কলাম প্রোপার্টি
নিম্নের টেবিলে সকল মাল্টিপল কলাম প্রোপার্টিগুলো দেখানো হলঃ
একটি এলিমেন্ট কয়টি কলামে বিভক্ত হবে তা নির্ধারণ করে।
কলাম গুলোর অবস্থান নির্ধারণ করে।
দুইটি কলামের মাঝের দূরত্ব নির্ধারণ করে।
দুইটি কলামের মধ্যবর্তী স্টাইল নির্ধারণ করে।(অনেকটা বর্ডারের মত)
দুইটি কলামের মাঝের স্টাইলটি কেমন হবে তা নির্ধারণ করে।
দুইটি কলামের মাঝের স্টাইলটির কালার নির্ধারণ করে।
দুইটি কলামের মাঝের স্টাইলটির প্রস্থ নির্ধারণ করে।
একটি এলিমেন্ট কতগুলো কলাম একত্রিত হয়ে অবস্থান করবে তা নির্ধারণ করে।
কলাম গুলোর প্রস্থ নির্ধারণ করে।
column-width এবং column-count একত্রে নির্ধারণ করে।
সিএসএস(৩) মাল্টিপল কলাম তৈরি
একটি এলিমেন্টকে কয়টি কলামে বিভক্ত করবে তা column-count প্রোপার্টির দ্বারা নির্ধারণ করা হয়।
নিম্নের উদাহরণে <div> এলিমেন্টের লেখা গুলোকে ৩টি কলামে ভাগ করা হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস(৩) উদাহরণ</title>
<style>
.text {
-webkit-column-count: 3; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-moz-column-count: 3; /* ফায়ারফক্স এর জন্য*/
column-count: 3;
}
</style>
</head>
<body>
<div class="text">
মাশরাফি বিন মর্তুজা (জন্ম: অক্টোবর ৫, ১৯৮৩; নড়াইল জেলা) বাংলাদেশ ক্রিকেট দলের অন্যতম বোলিং
স্তম্ভ ও একদিনের আন্তর্জাতিকে দলের অধিনায়কের দায়িত্ব পালন করছেন। তার ডাক নাম ‘কৌশিক’।
তিনি একজন ডানহাতি ব্যাটসম্যান। তার বোলিংয়ের ধরন ডানহাতি মিডিয়াম পেস বোলার।
বাংলাদেশ জাতীয় দল ছাড়াও তিনি এশিয়া একাদশের একদিনের আন্তর্জাতিক দলে খেলেছেন।
</div>
<p><b>নোটঃ</b>column-count প্রোপার্টি ইন্টারনেট এক্সপ্লোরার ৯ এবং পূর্বের ভার্সন গুলোতে সাপোর্ট করে না।</p>
</body>
</html>
ফলাফল
সিএসএস(৩) এর দুইটি কলামের মাঝে দূরত্ব নির্ধারণ
দুইটি কলামের মাঝে দূরত্ব নির্ধারণ করার জন্য column-gap প্রোপার্টি ব্যবহার করা হয়।
নিম্নের উদাহরণে দুইটি কলামের মাঝে ফাকাস্থান 30px রাখা হয়েছেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস(৩) উদাহরণ</title>
<style>
.text {
-webkit-column-count: 3; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-moz-column-count: 3; /* ফায়ারফক্স এর জন্য*/
column-count: 3;
-moz-column-gap: 30px; /* ফায়ারফক্স এর জন্য*/
column-gap: 30px;
}
</style>
</head>
<body>
<div class="text">
মাশরাফি বিন মর্তুজা (জন্ম: অক্টোবর ৫, ১৯৮৩; নড়াইল জেলা) বাংলাদেশ ক্রিকেট দলের অন্যতম বোলিং
স্তম্ভ ও একদিনের আন্তর্জাতিকে দলের অধিনায়কের দায়িত্ব পালন করছেন। তার ডাক নাম ‘কৌশিক’।
তিনি একজন ডানহাতি ব্যাটসম্যান। তার বোলিংয়ের ধরন ডানহাতি মিডিয়াম পেস বোলার।
বাংলাদেশ জাতীয় দল ছাড়াও তিনি এশিয়া একাদশের একদিনের আন্তর্জাতিক দলে খেলেছেন।
</div>
<p><b>নোটঃ</b>column-gap প্রোপার্টি ইন্টারনেট এক্সপ্লোরার ৯ এবং পূর্বের ভার্সন গুলোতে সাপোর্ট করে না।</p>
</body>
</html>
ফলাফল
কলামের মাঝের স্টাইল
দুইটি কলামের মাঝে যেকোন ধরনের স্টাইল দেওয়ার জন্য column-rule-style প্রোপার্টি ব্যবহার করা হয়। ইহা অনেকটাই বর্ডারের মত কাজ করে। আপনি একটি বর্ডারে যে সকল স্টাইল ব্যবহার করতে পারেন ঠিক ঐ সকল স্টাইলই কলামের মাঝে এই প্রোপার্টি দ্বারা ব্যবহার করতে পারবেনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস(৩) উদাহরণ</title>
<style>
.text {
-webkit-column-count: 3; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-moz-column-count: 3; /* ফায়ারফক্স এর জন্য*/
column-count: 3;
-moz-column-gap: 30px; /* ফায়ারফক্স এর জন্য*/
column-gap: 30px;
-webkit-column-rule-style: solid; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-moz-column-rule-style: solid; /* ফায়ারফক্স এর জন্য*/
column-rule-style: solid;
}
</style>
</head>
<body>
<div class="text">
মাশরাফি বিন মর্তুজা (জন্ম: অক্টোবর ৫, ১৯৮৩; নড়াইল জেলা) বাংলাদেশ ক্রিকেট দলের অন্যতম বোলিং
স্তম্ভ ও একদিনের আন্তর্জাতিকে দলের অধিনায়কের দায়িত্ব পালন করছেন। তার ডাক নাম ‘কৌশিক’।
তিনি একজন ডানহাতি ব্যাটসম্যান। তার বোলিংয়ের ধরন ডানহাতি মিডিয়াম পেস বোলার।
বাংলাদেশ জাতীয় দল ছাড়াও তিনি এশিয়া একাদশের একদিনের আন্তর্জাতিক দলে খেলেছেন।
</div>
<p><b>নোটঃ</b>column-rule-style প্রোপার্টি ইন্টারনেট এক্সপ্লোরার ৯ এবং পূর্বের ভার্সন গুলোতে সাপোর্ট করে না।</p>
</body>
</html>
ফলাফল
দুইটি কলামের মাঝের স্টাইলটির প্রস্থ নির্ধারণ করার জন্য column-rule-width প্রোপার্টি ব্যবহার করা হয়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস(৩) উদাহরণ</title>
<style>
.text {
-webkit-column-count: 3; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-moz-column-count: 3; /* ফায়ারফক্স এর জন্য*/
column-count: 3;
-moz-column-gap: 30px; /* ফায়ারফক্স এর জন্য*/
column-gap: 30px;
-webkit-column-rule-style: solid; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-moz-column-rule-style: solid; /* ফায়ারফক্স এর জন্য*/
column-rule-style: solid;
-webkit-column-rule-width: 1px; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-moz-column-rule-width: 1px; /* ফায়ারফক্স এর জন্য*/
column-rule-width: 1px;
}
</style>
</head>
<body>
<div class="text">
মাশরাফি বিন মর্তুজা (জন্ম: অক্টোবর ৫, ১৯৮৩; নড়াইল জেলা) বাংলাদেশ ক্রিকেট দলের অন্যতম বোলিং
স্তম্ভ ও একদিনের আন্তর্জাতিকে দলের অধিনায়কের দায়িত্ব পালন করছেন। তার ডাক নাম ‘কৌশিক’।
তিনি একজন ডানহাতি ব্যাটসম্যান। তার বোলিংয়ের ধরন ডানহাতি মিডিয়াম পেস বোলার।
বাংলাদেশ জাতীয় দল ছাড়াও তিনি এশিয়া একাদশের একদিনের আন্তর্জাতিক দলে খেলেছেন।
</div>
<p><b>নোটঃ</b>column-rule-width প্রোপার্টি ইন্টারনেট এক্সপ্লোরার ৯ এবং পূর্বের ভার্সন গুলোতে সাপোর্ট করে না।</p>
</body>
</html>
ফলাফল
দুইটি কলামের মাঝের স্টাইলটির কালার নির্ধারণ করার জন্যcolumn-rule-colorপ্রোপার্টি ব্যবহার করা হয়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস(৩) উদাহরণ</title>
<style>
.text {
-webkit-column-count: 3; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-moz-column-count: 3; /* ফায়ারফক্স এর জন্য*/
column-count: 3;
-moz-column-gap: 30px; /* ফায়ারফক্স এর জন্য*/
column-gap: 30px;
-webkit-column-rule-style: solid; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-moz-column-rule-style: solid; /* ফায়ারফক্স এর জন্য*/
column-rule-style: solid;
-webkit-column-rule-width: 1px; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-moz-column-rule-width: 1px; /* ফায়ারফক্স এর জন্য*/
column-rule-width: 1px;
-webkit-column-rule-color: teal; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-moz-column-rule-color: teal; /* ফায়ারফক্স এর জন্য*/
column-rule-color: teal;
}
</style>
</head>
<body>
<div class="text">
মাশরাফি বিন মর্তুজা (জন্ম: অক্টোবর ৫, ১৯৮৩; নড়াইল জেলা) বাংলাদেশ ক্রিকেট দলের অন্যতম বোলিং
স্তম্ভ ও একদিনের আন্তর্জাতিকে দলের অধিনায়কের দায়িত্ব পালন করছেন। তার ডাক নাম ‘কৌশিক’।
তিনি একজন ডানহাতি ব্যাটসম্যান। তার বোলিংয়ের ধরন ডানহাতি মিডিয়াম পেস বোলার।
বাংলাদেশ জাতীয় দল ছাড়াও তিনি এশিয়া একাদশের একদিনের আন্তর্জাতিক দলে খেলেছেন।
</div>
<p><b>নোটঃ</b>column-rule-color প্রোপার্টি ইন্টারনেট এক্সপ্লোরার ৯ এবং পূর্বের ভার্সন গুলোতে সাপোর্ট করে না।</p>
</body>
</html>
ফলাফল
column-rule-width, column-rule-style এবং column-rule-color এই তিনটি প্রোপার্টি একত্রে column-rule প্রোপার্টি দ্বারা প্রকাশ করা যায়। অর্থাৎ তিনটি প্রোপার্টির সংক্ষিপ্ত প্রোপার্টি হচ্ছে column-rule প্রোপার্টি।
নিচের উদাহরণে কলামের মাঝে width, style এবং color নির্দেশ করা হয়েছেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস(৩) উদাহরণ</title>
<style>
.text {
-webkit-column-count: 3; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-moz-column-count: 3; /* ফায়ারফক্স এর জন্য*/
column-count: 3;
-moz-column-gap: 30px; /* ফায়ারফক্স এর জন্য*/
column-gap: 30px;
-webkit-column-rule: 1px solid teal; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-moz-column-rule: 1px solid teal; /* ফায়ারফক্স এর জন্য*/
column-rule: 1px solid teal;
}
</style>
</head>
<body>
<div class="text">
মাশরাফি বিন মর্তুজা (জন্ম: অক্টোবর ৫, ১৯৮৩; নড়াইল জেলা) বাংলাদেশ ক্রিকেট দলের অন্যতম বোলিং
স্তম্ভ ও একদিনের আন্তর্জাতিকে দলের অধিনায়কের দায়িত্ব পালন করছেন। তার ডাক নাম ‘কৌশিক’।
তিনি একজন ডানহাতি ব্যাটসম্যান। তার বোলিংয়ের ধরন ডানহাতি মিডিয়াম পেস বোলার।
বাংলাদেশ জাতীয় দল ছাড়াও তিনি এশিয়া একাদশের একদিনের আন্তর্জাতিক দলে খেলেছেন।
</div>
<p><b>নোটঃ</b>column-rule প্রোপার্টি ইন্টারনেট এক্সপ্লোরার ৯ এবং পূর্বের ভার্সন গুলোতে সাপোর্ট করে না।</p>
</body>
</html>
ফলাফল
কতগুলো কলাম নিয়ে একটি এলিমেন্ট
আপনি কলামের মাঝে অবস্থিত যে কোনো এলিমেন্ট কয়টি কলাম নিয়ে অবস্থান করবে তা column-span প্রোপার্টি দ্বারা নির্ধারণ করে দিতে পারেন।
নিচের উদাহরণে <h2> এলিমেন্টটি সকল কলামে বিস্তৃত থাকবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস(৩) উদাহরণ</title>
<style>
.text {
-webkit-column-count: 3; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-moz-column-count: 3; /* ফায়ারফক্স এর জন্য*/
column-count: 3;
-moz-column-gap: 30px; /* ফায়ারফক্স এর জন্য*/
column-gap: 30px;
-webkit-column-rule: 1px solid teal; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-moz-column-rule: 1px solid teal; /* ফায়ারফক্স এর জন্য*/
column-rule: 1px solid teal;
}
h2 {
-webkit-column-span: all; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
column-span: all;
}
</style>
</head>
<body>
<div class="text">
<h2>সাম্প্রতিক ক্রিকেট</h2>
মাশরাফি বিন মর্তুজা (জন্ম: অক্টোবর ৫, ১৯৮৩; নড়াইল জেলা) বাংলাদেশ ক্রিকেট দলের অন্যতম বোলিং
স্তম্ভ ও একদিনের আন্তর্জাতিকে দলের অধিনায়কের দায়িত্ব পালন করছেন। তার ডাক নাম ‘কৌশিক’।
তিনি একজন ডানহাতি ব্যাটসম্যান। তার বোলিংয়ের ধরন ডানহাতি মিডিয়াম পেস বোলার।
বাংলাদেশ জাতীয় দল ছাড়াও তিনি এশিয়া একাদশের একদিনের আন্তর্জাতিক দলে খেলেছেন।
</div>
<p><b>নোটঃ</b>column-span প্রোপার্টি ইন্টারনেট এক্সপ্লোরার ৯ এবং পূর্বের ভার্সন গুলোতে সাপোর্ট করে না।</p>
</body>
</html>
ফলাফল
কলামের প্রস্থ নির্ধারণ
একটি কলামের প্রস্থ কত হবে বা এটি কতটুকু জায়গা দখল করবে তা column-width প্রোপার্টি দ্বারা নির্ধারণ করে দিতে পারেন।
নিম্নের উদাহরণে প্রতিটি কলামের প্রস্থ 120px হবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস(৩) উদাহরণ</title>
<style>
.text {
-webkit-column-count: 3; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-moz-column-count: 3; /* ফায়ারফক্স এর জন্য*/
column-count: 3;
-webkit-column-width: 120px; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-moz-column-width: 120px; /* ফায়ারফক্স এর জন্য*/
column-width: 120px;
}
</style>
</head>
<body>
<div class="text">
মাশরাফি বিন মর্তুজা (জন্ম: অক্টোবর ৫, ১৯৮৩; নড়াইল জেলা) বাংলাদেশ ক্রিকেট দলের অন্যতম বোলিং
স্তম্ভ ও একদিনের আন্তর্জাতিকে দলের অধিনায়কের দায়িত্ব পালন করছেন। তার ডাক নাম ‘কৌশিক’।
তিনি একজন ডানহাতি ব্যাটসম্যান। তার বোলিংয়ের ধরন ডানহাতি মিডিয়াম পেস বোলার।
বাংলাদেশ জাতীয় দল ছাড়াও তিনি এশিয়া একাদশের একদিনের আন্তর্জাতিক দলে খেলেছেন।
</div>
<p><b>নোটঃ</b>column-width প্রোপার্টি ইন্টারনেট এক্সপ্লোরার ৯ এবং পূর্বের ভার্সন গুলোতে সাপোর্ট করে না।</p>
</body>
</html>
ফলাফল
ব্রাউজার সাপোর্ট
ব্রাউজার সাপোর্ট
| প্রোপার্টি | Google Chrome | Edge/IE | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| column-count | ৫০.০ ৪.০ -webkit- |
১০.০ | ২.০ -moz- | ৯.০ ৩.১ -webkit- |
৩৭.০ ১৫.০ -webkit- ১১.১ |
| column-gap | ৫০.০ ৪.০ -webkit- |
১০.০ | ২.০ -moz- | ৯.০ ৩.১ -webkit- |
৩৭.০ ১৫.০ -webkit- ১১.১ |
| column-rule | ৫০.০ ৪.০ -webkit- |
১০.০ | ২.০ -moz- | ৯.০ ৩.১ -webkit- |
৩৭.০ ১৫.০ -webkit- ১১.১ |
| column-rule-color | ৫০.০ ৪.০ -webkit- |
১০.০ | ২.০ -moz- | ৯.০ ৩.১ -webkit- |
৩৭.০ ১৫.০ -webkit ১১.১ |
| column-rule-style | ৫০.০ ৪.০ -webkit- |
১০.০ | ২.০ -moz- | ৯.০ ৩.১ -webkit- |
৩৭.০ ১৫.০ -webkit ১১.১ |
| column-rule-width | ৫০.০ ৪.০ -webkit- |
১০.০ | ২.০ -moz- | ৯.০ ৩.১ -webkit- |
৩৭.০ ১৫.০ -webkit ১১.১ |
| column-span | ৫০.০ ৪.০ -webkit- |
১০.০ | সাপোর্ট করে না | ৯.০ ৩.১ -webkit- |
৩৭.০ ১৫.০ -webkit ১১.১ |
| column-width | ৫০.০ ৪.০ -webkit- |
১০.০ | ২.০ -moz- | ৯.০ ৩.১ -webkit- |
৩৭.০ ১৫.০ -webkit ১১.১ |