Posts

Showing posts from August, 2019

সিএসএস এর ফ্লোট কি?

Image
ফ্লোট

ফ্লোটের বাংলা হলো ভাসা। সিএসএস ফ্লোটের মাধ্যমে একটি এলিমেন্টকে ব্রাউজার স্ক্রিনের বাম অথবা ডান দিকে ঠেলে বা ভাসিয়ে দেয়া যায়। এতে ডকুমেন্টের অন্যান্য এলিমেন্টগুলো এর চারপাশ ঘিরে অবস্থান করে যা রেপ (wrap) নামে পরিচিত। ইমেজ নিয়ে কাজ করার ক্ষেত্রে সাধারণত ফ্লোট ব্যবহার করা হয় কিন্তু এর মূল ব্যবহার হয় পেজের লেআউট নিয়ে কাজ করার সময়।


যেভাবে একটি এলিমেন্ট ভাসে

এলিমেন্টগুলো হরাইজন্টালি ফ্লোট করে, এর মানে হলো একটি শুধু ডানে বা বামে ফ্লোট হতে পারে; উপরে বা নিচের দিকে নয়। একটি ফ্লোট এলিমেন্ট ডানে অথবা বামে যতদূর যাওয়া সম্ভব যেতে পারে। সাধারণত ফ্লোটিং এলিমেন্টটি যে এলিমেন্টের ভিতরে থাকে তার ডান বা বামের শেষ সীমা পর্যন্ত ফ্লোটেড হয়ে থাকে। ফ্লোটেড এলিমেন্টের পরের এলিমেন্টগুলো এর চারপাশে ফ্লো করবে বা ভাসবে। ফ্লোটেড এলিমেন্টের আগের এলিমেন্টগুলোর উপর এর কোন প্রভাব পড়বেনা। যদি কোন ছবি ডান দিকে ফ্লোট করে এর পরের টেক্সটগুলো এর চারপাশ ঘিরে অবস্থান করে যা রেপিং নামে পরিচিত।




উদাহরণ :--

<!DOCTYPE html>
<html>
<head>

<style>
img {
    float: right;
    margin: 0 0 10px 10px;
}
<…

সিএসএস এর ইনলাইন ব্লক কি?

Image
ইনলাইন-ব্লক

এখন অনেক কাল পরে বক্স এর গ্রিড তৈরি সম্ভব যা float প্রোপার্টি ব্যবহার করলে ব্রাউজার এর প্রসস্থতা অনুসারে পূর্ণ এবং সুন্দরভাবে ফিট হয়ে যায় অর্থাৎ যখন ব্রাউজার এর আকার পরিবর্তন করা হয়।
display প্রোপার্টি এর inline-block মান এটিকে আরও সহজ করেছে। inline-block এলিমেন্ট inline এলিমেন্ট এর মতই, কিন্তু এদের প্রসস্ততা ও উচ্চতা নির্ধারণ করা যায়।

পুরাতন পদ্ধতি অনুসারে float ব্যবহার করা অর্থাৎ floating বক্স এর পরে আমাদের clear প্রোপার্টিও নির্ধারণ করে দিতে হয়। একই কাজ display প্রোপার্টি এর inline-block মান নির্ধারণ করে দিয়েও করা যায় এবং কোন clear প্রোপার্টি এর পয়োজন হয় না।


<head>
<style>
.floating-box {
    display: inline-block;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21; 
}
</style>
</head>

উদাহরণ :-

 <!DOCTYPE html>
<html>
<head>

<style>
.floating-box {
    display: inline-block;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21; 
}

.after-box {
    border: 3p…

সিএসএস এর "এলাইন" কি? সিএসএস পার্ট -২২

Image
এলাইন [ Aline]
ওয়েব পেজের লে-আউট তৈরির ক্ষেত্রে এলাইন অত্যন্ত গুরুত্বপূর্ণ বিষয়। একটা ওয়েব পেজে ওয়েব সাইটটি কোন দিকে প্রদর্শিত হবে ডান দিকে বাম দিকে না মাঝখানে তা যেমন এলাইন করে নির্ধারণ করা হয়, এছাড়া সাইডবার নেভিগেশন বার, ফুটার, হেডার ইমেজের পজিশনও এলাইন করে নির্ধারণ করা হয়।
এলাইন করার বেশ কিছু পদ্ধতি রয়েছে। যেমনঃ

i) মার্জিন প্রোপার্টি
ii) পজিশন প্রোপার্টি
iii) ফ্লট প্রোপার্টি

মার্জিন প্রোপার্টি

যে কোন ভাল একটি ওয়েব টেমপ্লেট খেয়াল করলে দেখা যায়, টেমপ্লেটটি ব্রাউজারে প্রদর্শন করলে ঠিক মাঝখানে প্রদর্শন করে, একটা ওয়েব সাইটকে সুন্দর ভাবে প্রদর্শনের জন্য বিষয়টি খুবই গুরুত্বপূর্ণ।মার্জিন প্রোপার্টি ব্যবহার করে সেন্টার এলাইন করার মাধ্যমে এর গুরুত্বপূর্ণ কাজটি করা হয়।কোন ওয়েব সাইটকে ব্রাউজারে ঠিক মাঝখানে প্রদর্শন করার জন্য স্ট্যাইল সিটে উল্লেখ করতে হয়


, margin-left:auto; margin-right:auto; ।
<head>
<style>
.center {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}
</style>
</head>



উদাহরণ :-

<!DOCTYPE html>