ঠিক আছে, আমি এক বা দুই সপ্তাহ আগে আমার একটি সাধারণ বিন্যাস সমস্যা ছিল। একটি পৃষ্ঠার অংশে একটি শিরোনাম প্রয়োজন:
+---------------------------------------------------------+
| Title Button |
+---------------------------------------------------------+
খুব সহজ স্টাফ। বিষয়টি হ'ল টেবিল বিদ্বেষটি ওয়েব জগতে চলে গেছে বলে মনে হচ্ছে, যখন আমি জিজ্ঞাসা করলাম কেন টেবিলের পরিবর্তে এইচটিএমএল ফর্মগুলির জন্য সংজ্ঞা তালিকা (ডিএল, ডিডি, ডিটি) ট্যাগ ব্যবহার করবেন? এখন সারণী বনাম ডিভ / সিএসএসের সাধারণ বিষয় আগে আলোচনা করা হয়েছে, উদাহরণস্বরূপ:
সুতরাং এটি বিন্যাসের জন্য সিএসএস বনাম সারণীগুলি সম্পর্কে সাধারণ আলোচনার উদ্দেশ্য নয়। এটি কেবল একটি সমস্যার সমাধান। আমি সিএসএস ব্যবহার করে উপরের বিভিন্ন সমাধানের চেষ্টা করেছি:
- বোতামের জন্য ডানদিকে ভাসা বা বোতামযুক্ত একটি ডিভ;
- বোতামের জন্য আপেক্ষিক অবস্থান; এবং
- অবস্থান আপেক্ষিক + পরম।
এই সমাধানগুলির কোনওটিই বিভিন্ন কারণে সন্তোষজনক ছিল না। উদাহরণস্বরূপ আপেক্ষিক পজিশনিংয়ের ফলে জেড-ইনডেক্স ইস্যু হয়েছিল যেখানে আমার ড্রপডাউন মেনুটি সামগ্রীটির আওতায় এসেছে।
সুতরাং আমি ফিরে যেতে শেষ:
<style type="text/css">
.group-header { background-color: yellow; width: 100%; }
.group-header td { padding: 8px; }
.group-title { text-align: left; font-weight: bold; }
.group-buttons { text-align: right; }
</style>
<table class="group-header">
<tr>
<td class="group-title">Title</td>
<td class="group-buttons"><input type="button" name="Button"></td>
</tr>
</table>
এবং এটি পুরোপুরি কাজ করে। এটি সহজ, এটি যতটা পশ্চাদপটে তুলনামূলকভাবে আসে (এটি সম্ভবত আই 5 তেও কাজ করবে) এবং এটি ঠিক কাজ করে। পজিশনিং বা ভাসমান নিয়ে কোনও ঝামেলা নেই।
সুতরাং কেউ টেবিল ছাড়া সমতুল্য করতে পারেন?
প্রয়োজনীয়তাগুলি হ'ল:
- পিছনে সামঞ্জস্যপূর্ণ: এফএফ 2 এবং আই 6;
- যুক্তিসঙ্গতভাবে সামঞ্জস্যপূর্ণ: বিভিন্ন ব্রাউজার জুড়ে;
- উল্লম্বভাবে কেন্দ্রিক: বোতাম এবং শিরোনামটি বিভিন্ন উচ্চতার হয়; এবং
- নমনীয়: পজিশনিং (প্যাডিং এবং / বা মার্জিন) এবং স্টাইলিংয়ের উপর যথাযথভাবে যথাযথ নিয়ন্ত্রণের অনুমতি দিন।
এক পক্ষের নোটে, আমি আজ বেশ কয়েকটি আকর্ষণীয় নিবন্ধগুলি পেয়েছি:
সম্পাদনা: ভাসমান ইস্যুটি সম্পর্কে আমার আরও বিস্তারিত জানাতে দিন। এই ধরণের কাজগুলি:
<html>
<head>
<title>Layout</title>
<style type="text/css">
.group-header, .group-content { width: 500px; margin: 0 auto; }
.group-header { border: 1px solid red; background: yellow; overflow: hidden; }
.group-content { border: 1px solid black; background: #DDD; }
.group-title { float: left; padding: 8px; }
.group-buttons { float: right; padding: 8px; }
</style>
</head>
<body>
<div class="group-header">
<div class="group-title">This is my title</div>
<div class="group-buttons"><input type="button" value="Collapse"></div>
</div>
<div class="group-content">
<p>And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.</p>
<p>So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?</p>
<p>On a side note, I came across a couple of interesting articles today:</p>
</div>
</body>
</html>
অংশটির জন্য পিঁপড়াকে ধন্যবাদ overflow: hidden(এখনও কেন তা পান না)। সমস্যাটি এখানেই আসে Say বলুন আমি চাই শিরোনাম এবং বোতামটি উল্লম্বভাবে কেন্দ্রীভূত হোক। এটি সমস্যাযুক্ত কারণ উপাদানগুলি বিভিন্ন উচ্চতার। এর সাথে তুলনা করুন:
<html>
<head>
<title>Layout</title>
<style type="text/css">
.group-header, .group-content { width: 500px; margin: 0 auto; }
.group-header { border: 1px solid red; background: yellow; overflow: hidden; }
.group-content { border: 1px solid black; background: #DDD; }
.group-header td { vertical-align: middle; }
.group-title { padding: 8px; }
.group-buttons { text-align: right; }
</style>
</head>
<body>
<table class="group-header">
<tr>
<td class="group-title">This is my title</td>
<td class="group-buttons"><input type="button" value="Collapse"></td>
</tr>
</table>
<div class="group-content">
<p>And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.</p>
<p>So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?</p>
<p>On a side note, I came across a couple of interesting articles today:</p>
</div>
</body>
</html>
যা নিখুঁতভাবে কাজ করে।