somewhere in... blog
x
ফোনেটিক ইউনিজয় বিজয়

CSS ট্রিকস পার্ট-১: আপনার ওয়েব সাইটে যুক্ত করুন ভাসমান অবজেক্ট

২৬ শে মে, ২০১৩ ভোর ৪:৫৮
এই পোস্টটি শেয়ার করতে চাইলে :

হ্যালো বন্ধুরা, কেমন আছেন আপনারা? আমি অনেক ভাল। অনেকদিন পর দেখা তাই না? পাক্কা একবছর পর কোন টিউটোরিয়াল লিখতে বসেছি। দিন দিন চরম অলস হয়ে যাচ্ছি। অলসতায় যদি নোবেল প্রাইস দেবার ব্যাবস্থা থাকতো, ১০০% গ্যারান্টি সেটা আমার হাতেই ধরায়ে দিত। :D
আপনাদের সাথে আমি নিতমিত ছিলাম ও আছি। নিয়মিত আপনাদের পোস্ট পড়ি। কখনো অনেক পোস্ট হয়তো অনেক ভাল লাগে। খুব ইচ্ছে করে কমেন্ট করে এটলিস্ট একটা থাঙ্কস জানিয়ে দিতে। কিন্তু শেষ পর্যন্ত সেটা আর করা হয়ে ওঠে না। কারন একটাই, ঐ অলসতা। :P কমেন্ট করতে হলে আবার লগইন করতে হবে তারপর কমেন্ট। আজ অবশেষে লগইন করেই ফেললাম, সেইসাথে একটা টিউটোরিয়ালও। ইচ্ছে আছে এবার সকল অলসতা কাটিয়ে নিয়মিতই রবো আপনাদের সাথে এবং সেই সাথে আপনাদের মাঝে ধারাবাহিক ভাবে শেয়ার করব অনেক মজাদার সব ওয়েব ডেভলোপিং এর জন্য টিপস ও ট্রিকস। যেগুলো ব্যাবহার করে খুব সহজেই আপনি আপনার ওয়েব সাইটকে করে তুলতে পারেন আরো আকর্ষনীয় ও প্রফেশনাল। আশা করি আপনারা সবাই আমার সাথেই থাকবেন এবং ভাল ভাল সব টিউটোরিয়াল করার জন্য উৎসাহ দিয়ে যাবেন।

যাই হোক, মুল কথায় ফিরে আসি। আজ আমি আপনাদের দেখাব কিভাবে আপনার সাইটে কোন কিছুকে ভাসমান অবস্থায় রাখা যায়। প্রথমে এই সাইটটি একটু দেখে আসুন। এটি আমার এক ক্লায়েন্ট এর সাইট। সাইটটিতে ডান পাশে একটা ম্যাসেস বা নোটিশ বোর্ড আছে, যেটা ভাসমান। সাইটটি স্ক্রল করে নিচের দিকে গেলেও নোটিশবোর্ডটি ভাসমান অবস্থা নিচের দিকে চলে আসবে। এবার এই সাইটটি দেখুন। এটিও আমার আর এক ক্লায়েন্ট এর নিউজ ওয়েব সাইট। নিচের দিকে একটা ব্রেকিং নিউজ আছে। যেটা সাইটে সব সময় ভাসমান অবস্থায় আছে। এই সাইটটি দেখুন। এটি মুলত আমার নিজের ওয়েব সাইট। সাইটটিতে ডানদিকে নিচে মানি ব্যাক গ্যারান্টির একটা ম্যাসেজ রয়েছে। সাইটটি স্ক্রল করে নিচের দিকে গেলেও এটি ভাসমান অবস্থায় সব সময় ওখানেই থাকবে।
এখন দেখা যাক এই ধরনের কোন কিছুকে আপনার সাইটে কিভাবে বানাবেন। এর জন্য আমাদের দরকার দুইটা জিনিস, একটা HTML পার্ট। আর একটা CSS পার্ট।
HTML অংশে প্রথমে আপনাকে একটা ডিভ নিতে হবে। এখানে একটা আইডি দিয়ে আপনাকে সিএসএস এর সাথে কানেক্ট করতে হবে। যেকোন একটা নাম বা আইডি দিতে পারেন আপনার পছন্দ মত। রহিম, করিম, কুদ্দুস, মফিস, আবুল, আপনার যা ইচ্ছে। ধরুন আমি দিলাম "razibwrapper" । তাহলে আমাদের ডিভ কোডটি দাড়ালো এরকমঃ






এই ডিভের মাঝে আপনাকে মুল HTML কোড টি দিতে হবে, যা আপনি ভাশমান অবস্থায় রাখতে চান। ধরুন আমি একটি ইমেজ ভাশমান অবস্থায় দিতে চাই। ঐ ইমেজটির জন্য html কোড হবে অনেকটা এরকমঃ



এখন আমাদের পুরো কোডটি দাঁড়ায় এরকমঃ









এখন আমাদের দরকার একটা সি এসএস পার্ট, যেটা আমাদের এই কোডটুকুকে ভাশমান অবস্থায় কমান্ড করবে। তাহলে দেখা যাক সিএসএস অংশটা আমাদের কি রকম হবেঃ

প্রথমেই CSS অংশ লেখার জন্য এরকম একটা ট্যাগ দিয়ে নিলেমঃ





এর মধ্যে আমাদের CSS অংশটুকু লিখতে হবে। HTML অংশটুকুকে কল করার জন্য আমাকে এখানে ঐ আইডি দিয়ে চিনিয়ে নিতে হবে। যেমনঃ

#razibwrapper{

position: fixed;

width: 300px;

height: 185px;

bottom: 0px;

left: 0px;

}

পুরো কোডটি হবে এরকমঃ




এখানে #razibwrapper দিয়ে HTML অংশটিকে চিনিয়ে দেয়া হয়েছে। position: fixed; মানে এই HTML অংশটা সব সময় ফিক্সড অবস্থায় থাকবে।

width: 300px;

height: 185px; মানে এই অংশের সাইজ ( ওয়াইড ও হাইট) কত হবে তা বলা হয়েছে।

bottom: 0px;

left: 0px;

এই অংশটি খুব গুরুত্বপুর্ন। এই অংশটি দিয়ে এই ভাশমান অংশটি সাইটের কথায় দেখা যাবে তা বলা হয়েছে। bottom: 0px; এটি আপনার সাইটের একেবারে নিচে অবস্থান করবে এবং left: 0px; মানে এটি একেবারে বাম পাশে অবস্থান করবে। আপনি চাইলে এখানে মান পরিবর্তনের মাধ্যমে অবস্থান চেঞ্জও করতে পারেন। ধরুন এটি নিচ থেকে ১০০ পিক্সেল উপরে দিতে চান, তাহলে বোটম দিন bottom: 100px; আশা করি ব্যাপারটা বুঝতে পেরেছেন।

এখন কোড দুটি ( html ও css অংশ) আপনার সাইটে কপি পেস্ট করুন। ওয়ার্ডপ্রেস সাইটের ক্ষেত্রে আপনি চাইলে আপনার ড্যাশবোর্ড থেকে ইউজেট মেনুতে গিয়ে টেক্সট ইউজেটেও কোডটি বসাতে পারেন অথবা appearance থেকে edit এ ক্লিক করে header.php এডিট করুন। সব কোড এর একেবারে শেষে এই কোড দুটি পেস্ট করে সেভ দিন। সর্বশেষে এই ইমেজটি দেখতে হবে এরকম।

চলুন এবার আর একটি কোড দেখা যাক।














Notice Board
This is Notice board test content. This is Notice board test content. This is Notice board test content. This is Notice board test content. This is Notice board test content. This is Notice board test content. This is Notice board test content.




এখানে দুইটি সেল এর একটা টেবিল নিয়েছি, যেটি আমি নোটিশবোর্ড হিসেবে ব্যাবশার করব। প্রথম রোতে আমি হিডার দিয়েছি এবং ২য় রোতে নিয়েছি কন্টেন্ট অংশ। পুরো টেবিলটি একটি ডিভের ভেতরে দিয়ে নিয়েছি। এখন এই অংশের জন্য আমি css কোড নিলাম এরকমঃ





এখানে সবই ঠিক রেখেছি, শুধু আইডি চেঞ্জ করেছি এবং অবস্থান নিয়েছি রাইট সাইটে। অর্থাৎ এটি ওয়েব সাইটের ডান পাশে অবস্থান করবে। আশা করি কোড দেখে আপনারা পুরোটা বুঝতে পারবেন। কোথাও বুঝতে সমস্যা হলে অবশ্যই কমেন্ট করে জানাবেন। আমি তো আছিই।

আজ তাহলে এই পর্যন্তই। টিউটোরিয়ালটা আপনাদের ভাল লাগলে অবশ্যই কমেন্ট করে জানাবেন। আর যদি খারাপ লাগে তাহলে একটা গালি দেবার জন্য হইলেও একটা কমেন্ট কইরেন। সবাই অনেক অনেক ভাল থাকবেন। পরবর্তিতে আরো অনেক সুন্দর সুন্দর টিপস শেয়ার করার প্রতিশ্রুতি নিয়ে আজকে এখানেই শেষ করছি। আল্লাহ হাফেজ।
সর্বশেষ এডিট : ২৬ শে মে, ২০১৩ ভোর ৫:০৫
৮টি মন্তব্য ২টি উত্তর

আপনার মন্তব্য লিখুন

ছবি সংযুক্ত করতে এখানে ড্রাগ করে আনুন অথবা কম্পিউটারের নির্ধারিত স্থান থেকে সংযুক্ত করুন (সর্বোচ্চ ইমেজ সাইজঃ ১০ মেগাবাইট)
Shore O Shore A Hrosho I Dirgho I Hrosho U Dirgho U Ri E OI O OU Ka Kha Ga Gha Uma Cha Chha Ja Jha Yon To TTho Do Dho MurdhonNo TTo Tho DDo DDho No Po Fo Bo Vo Mo Ontoshto Zo Ro Lo Talobyo Sho Murdhonyo So Dontyo So Ho Zukto Kho Doye Bindu Ro Dhoye Bindu Ro Ontosthyo Yo Khondo Tto Uniswor Bisworgo Chondro Bindu A Kar E Kar O Kar Hrosho I Kar Dirgho I Kar Hrosho U Kar Dirgho U Kar Ou Kar Oi Kar Joiner Ro Fola Zo Fola Ref Ri Kar Hoshonto Doi Bo Dari SpaceBar
এই পোস্টটি শেয়ার করতে চাইলে :
আলোচিত ব্লগ

Sajna

লিখেছেন আরমান আরজু, ০৭ ই নভেম্বর, ২০২৬ বিকাল ৩:৩১



Sajna
Love is sacred;
Commences from the intense mystery of pure souls.
Has a beginning, but no end;
Here, only peace prevails.
So, love—
Solely for the sincere and the disenchanted,
Not for the pharisaic.
...বাকিটুকু পড়ুন

বিপ্লব সংহতি দিবস সফল ও সার্থক হোক.....

লিখেছেন কলিমুদ্দি দফাদার, ০৭ ই নভেম্বর, ২০২৬ বিকাল ৫:১১



আজকে নাকি বিপ্লব সংহতি দিবস। দল ক্ষমতায় থাকলে অনেক রকমের দিবস পালিত হয়। আওয়ামী লীগের সময় শেখ জামাল-কামালের বিবাহ দিবস, শিশু শহীদ শেখ রাসেলের সুন্নাতে খৎতা দিবস আরো কতো কি?... ...বাকিটুকু পড়ুন

ঝাল্লাগে ভাল্লাগে- ২

লিখেছেন শেরজা তপন, ০৭ ই নভেম্বর, ২০২৬ বিকাল ৫:৪৯


"যে-রাঁধুনী জানে তার তরকারিতে স্বাদ হয়নি, সে নিমেষে লঙ্কার কৌটো উপুড় করে দেবে। তারপর অতিথি যখন কান দিয়ে ধোঁয়া ছেড়ে হাঁউমাউ করবে, রাঁধুনী তখন মিটিমিটি হেসে বলবে—‘একটু ঝাল বেশি... ...বাকিটুকু পড়ুন

চা এর আড্ডা।

লিখেছেন নাহল তরকারি, ০৭ ই নভেম্বর, ২০২৬ রাত ৮:১৬



শনিবার
৭ নভেম্বর ২০২৬
২২ কার্তিক ১৪৩৩ বঙ্গাব্দ
২৬ জমাদিউল আ. ১৪৪৮ হিজরি

কিছু মুহূর্ত কখনো হারিয়ে যায় না, সময়ের স্রোতে শুধু স্মৃতি হয়ে মনের গভীরে জমা থাকে।

২০১১ সাল। তখন আমি ইন্টারে পড়ি। নানীর... ...বাকিটুকু পড়ুন

২৪'র ৫ আগস্ট পরবর্তী সময়ে দেশে ডানপন্থা ও মৌলবাদী চেতনা-রাজনীতির চরম উত্থান

লিখেছেন শেহজাদ আমান, ০৮ ই নভেম্বর, ২০২৬ সকাল ১১:২৩



২৪-এর ৫ আগস্টের পর দেশ দীর্ঘদিনের স্বৈ/রাচারী শাসন থেকে মুক্ত হয়েছিল ঠিকই; কিন্তু দুঃখজনকভাবে দেশ চলে গিয়েছিল বিপুল সংখ্যক ডা*নপন্থী বা মৌ*লবাদী চেতনা বা রাজনীতির ধারক-বাহক-সমর্থকদের কবলে।
হ্যাঁ, হাসিনার পতনে... ...বাকিটুকু পড়ুন

×