Oke, saya mengalami masalah tata letak sederhana satu atau dua minggu yang lalu. Yaitu bagian dari halaman membutuhkan header:
+---------------------------------------------------------+
| Title Button |
+---------------------------------------------------------+Hal-hal yang cukup sederhana. Masalahnya adalah kebencian tabel tampaknya telah mengambil alih di dunia Web, yang saya ingat ketika saya bertanya Mengapa menggunakan tag daftar definisi (DL, DD, DT) untuk formulir HTML daripada tabel? Sekarang topik umum tabel vs divs / CSS telah dibahas sebelumnya, misalnya:
- DIV vs Tabel ; dan
- Tabel, bukan DIV .
Jadi ini tidak dimaksudkan sebagai diskusi umum tentang CSS vs tabel untuk tata letak. Ini hanyalah solusi untuk satu masalah. Saya mencoba berbagai solusi di atas menggunakan CSS termasuk:
- Mengambang tepat untuk tombol atau div yang berisi tombol;
- Posisi relatif untuk tombol; dan
- Posisi relatif + absolut.
Tak satu pun dari solusi ini memuaskan karena alasan yang berbeda. Misalnya pemosisian relatif menghasilkan masalah indeks-z di mana menu tarik-turun saya muncul di bawah konten.
Jadi saya akhirnya kembali ke:
<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>Dan itu bekerja dengan sempurna. Ini sederhana, kompatibel dengan versi sebelumnya (yang mungkin akan bekerja bahkan pada IE5) dan berfungsi. Tidak mengotak-atik positioning atau float.
Jadi, adakah yang bisa melakukan hal yang setara tanpa tabel?
Persyaratannya adalah:
- Kompatibel dengan versi sebelumnya : ke FF2 dan IE6;
- Cukup konsisten: di berbagai browser;
- Ditengah vertikal: tombol dan judul memiliki ketinggian yang berbeda; dan
- Fleksibel: memungkinkan kontrol yang cukup tepat atas pemosisian (padding dan / atau margin) dan gaya.
Di samping catatan, saya menemukan beberapa artikel menarik hari ini:
EDIT: Izinkan saya menguraikan masalah float. Jenis pekerjaan ini:
<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>Terima kasih kepada Ant P untuk overflow: hiddenbagiannya (masih belum mengerti mengapa). Di sinilah masalahnya masuk Misalnya saya ingin judul dan tombol berada di tengah secara vertikal. Ini bermasalah karena elemen memiliki ketinggian yang berbeda. Bandingkan ini dengan:
<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>yang bekerja dengan sempurna.