সারণি ছাড়া লেআউট তৈরি করার জন্য সিএসএস পজিশনিং কিভাবে ব্যবহার করবেন?

টেবিলহীন লেআউট নতুন ডিজাইন ফ্রন্টিয়ার খুলুন

লেআউটের জন্য টেবিলের ব্যবহার না করার অনেক কারণ রয়েছে । সিএসএস এর সাথে লেআউট করা কঠিন, কারণ লোকেদের ব্যবহার করার জন্য তাদের বেশিরভাগই একমাত্র কারণ। যদিও সিএসএস স্ক্রিপ্টিং একটি শেখার বক্ররেখা প্রযোজ্য হয়, আপনি যখন CSS লেআউটটি কীভাবে করবেন তা বুঝতে হলে আপনাকে এটি কতটা সহজ হতে পারে তা নিয়ে অবাক হতে পারে। এবং একবার আপনি শিখেছেন, আপনি সিএসএস ব্যবহার না করে দ্বিতীয় সবচেয়ে সাধারণ কারণটি সম্বোধন করবেন - "টেবিল লিখতে দ্রুততর।" এটি দ্রুততর কারণ আপনি টেবিলগুলি জানেন, কিন্তু একবার আপনি সিএসএস শিখতে গেলে, আপনি যত দ্রুত সম্ভব সঙ্গে যে

CSS পজিশনিং এর ব্রাউজার সাপোর্ট

সিএসএস পজিশনিং সব আধুনিক ব্রাউজারে ভাল সমর্থিত। যদি আপনি নেটস্কেপ 4 বা ইন্টারনেট এক্সপ্লোরার 4 এর জন্য কোন সাইট তৈরি করেন না, তবে আপনার পাঠকরা আপনার CSS- করা ওয়েব পেজগুলি দেখতে কোনও সমস্যা হবে না।

আপনি একটি পৃষ্ঠা তৈরি কিভাবে পুনর্বিবেচনার

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

বিভিন্ন ওয়েবসাইটের বিভিন্ন কাঠামো রয়েছে। একটি কার্যকর পৃষ্ঠা তৈরি করতে, আপনি এটিতে সামগ্রী সন্নিবেশ করার আগে যেকোনো প্রদত্ত পৃষ্ঠার কাঠামো মূল্যায়ন করুন। একটি উদাহরণ পৃষ্ঠাটিতে পাঁচটি পৃথক বিভাগ অন্তর্ভুক্ত থাকতে পারে:

  1. শিরোনাম ব্যানার বিজ্ঞাপন, সাইট নাম, নেভিগেশন লিঙ্কগুলি, একটি নিবন্ধ শিরোনাম এবং সেইসাথে কয়েকটি অন্যান্য জিনিস হোম।
  2. ডান কলাম এটি সার্চ বক্স, বিজ্ঞাপন, ভিডিও বক্স এবং কেনাকাটা এলাকায় পৃষ্ঠার ডান দিকে।
  3. বিষয়বস্তু একটি নিবন্ধ, ব্লগ পোস্ট বা শপিং কার্টের পাঠ্য- পৃষ্ঠাটির মাংস ও আলু।
  4. ইনলাইন বিজ্ঞাপন বিজ্ঞাপনের মধ্যে বিজ্ঞাপনে ইনলাইন।
  5. পাদলেখ নীচে নেভিগেশন, লেখক তথ্য, কপিরাইট তথ্য, নিম্ন ব্যানার বিজ্ঞাপন, এবং সম্পর্কিত লিঙ্ক।

একটি টেবিলে পাঁচটি উপাদান নির্বাণ করার পরিবর্তে, HTML5 অংশীদারি উপাদানের উপাদানগুলির বিভিন্ন অংশ নির্ধারণ করতে ব্যবহার করুন, এবং তারপর পৃষ্ঠার বিষয়বস্তু উপাদানগুলি স্থাপন করার জন্য CSS পজিশনিং ব্যবহার করুন।

আপনার বিষয়বস্তু বিভাগ সনাক্ত করা

আপনার সাইটের বিভিন্ন সামগ্রী এলাকার সংজ্ঞায়িত করার পর আপনাকে তাদের আপনার HTML এ লিখতে হবে। আপনি সাধারণত, আপনার বিভাগগুলিকে যেকোন ক্রমে রাখুন, এটি আপনার পাতার সবচেয়ে গুরুত্বপূর্ণ অংশগুলি প্রথমে স্থাপন করার একটি ভাল ধারণা। এই পদ্ধতিটি সার্চ-ইঞ্জিন অপ্টিমাইজেশান হিসাবেও সহায়তা করবে।

পজিশনিং প্রদর্শন করতে, তিনটি কলামের একটি পৃষ্ঠা দেখুন কিন্তু কোন শিরোনাম বা পাদলেখ নেই। আপনি পছন্দ করে নিন কোনও লেআউট তৈরি করার জন্য আপনি পজিশনিং ব্যবহার করতে পারেন।

তিন-কলাম লেআউটের জন্য, তিনটি বিভাগ নির্ধারণ করুন: বাম কলাম, ডান কলাম এবং সামগ্রী।

এই বিভাগগুলিকে বিষয়বস্তু এবং উপাদানের দুটি কলামের জন্য দুটি উপাদানের উপাদান জন্য আর্টিকেল উপাদান ব্যবহার করে instantiated হবে। সবকিছুই এটির চিহ্নিতকরণের একটি বৈশিষ্ট্য থাকবে। যখন আপনি আইডি বৈশিষ্ট্যাবলী ব্যবহার করেন, তখন আপনাকে প্রতিটি id এর জন্য একটি অনন্য নাম হিসাবে গণ্য করা উচিত।

বিষয়বস্তু পজিশনিং

সিএসএস ব্যবহার করে, আপনার ID'd উপাদানগুলির জন্য অবস্থান নির্ধারণ করুন। এই ধরনের একটি শৈলী কল আপনার অবস্থান তথ্য সঞ্চয় করুন:

#content {

}

এই উপাদানগুলির মধ্যে বিষয়বস্তু যতটা সম্ভব স্থানটি গ্রহণ করবে, যেমনটি বর্তমান অবস্থানের প্রস্থের 100 শতাংশ বা পৃষ্ঠায়। এটি একটি নির্দিষ্ট প্রস্থের জন্য জোর করে একটি বিভাগের অবস্থান প্রভাবিত করার জন্য, প্যাডিং বা মার্জিন বৈশিষ্ট্যগুলি পরিবর্তন করুন।

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

# বাম-কলাম {
অবস্থান: পরম;
বামে: 0;
প্রস্থ: 150px;
মার্জিন বাম: 10 পিএক্স;
মার্জিন শীর্ষ: 20px;
রঙ: # 000000;
প্যাডিং: 3 পিএক্স;
}
# ডান-কলাম {
অবস্থান: পরম;
বাম: 80%;
শীর্ষ: 20px;
প্রস্থ: 140px;
প্যাডিং-বাম: 10 পিএক্স;
z- সূচক: 3;
রঙ: # 000000;
প্যাডিং: 3 পিএক্স;
}

তারপর সামগ্রী এলাকার জন্য, মার্জিনগুলি ডানদিকে এবং বামে সেট করুন যাতে বিষয়বস্তু দুটি বাহ্যিক কলামগুলির উপর ওভারল্যাপ করবে না।

#content {
শীর্ষ: 0 পিএক্স;
মার্জিন: 0 পিএক্স ২5% 0 165 পিএক্স;
প্যাডিং: 3 পিএক্স;
রঙ: # 000000;
}

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