Ok, tydzień lub dwa temu miałem prosty problem z układem. Mianowicie sekcje strony wymagały nagłówka:
+---------------------------------------------------------+
| Title Button |
+---------------------------------------------------------+
Całkiem proste rzeczy. Rzecz w tym, że nienawiść do tabel zdaje się przejąć kontrolę w świecie sieci Web, o czym przypomniałem sobie, gdy zapytałem Po co używać tagów list definicji (DL, DD, DT) w formularzach HTML zamiast tabel? Teraz omówiono już ogólny temat tabel vs div / CSS, na przykład:
Więc to nie jest ogólna dyskusja na temat CSS i tabel w układzie. To jest po prostu rozwiązanie jednego problemu. Wypróbowałem różne rozwiązania powyższego za pomocą CSS, w tym:
- Przenieś się w prawo dla przycisku lub elementu div zawierającego przycisk;
- Pozycja względem przycisku; i
- Pozycja względna + bezwzględna.
Żadne z tych rozwiązań nie było zadowalające z różnych powodów. Na przykład względne pozycjonowanie spowodowało problem z indeksem Z, w którym moje menu rozwijane pojawiło się pod treścią.
Więc wróciłem do:
<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>
I działa doskonale. Jest to proste, tak kompatybilne wstecz, jak to tylko możliwe (prawdopodobnie będzie działać nawet w IE5) i po prostu działa. Bez majstrowania przy pozycjonowaniu lub pływaniu.
Czy więc każdy może zrobić odpowiednik bez tabel?
Wymagania są następujące:
- Kompatybilny wstecz: do FF2 i IE6;
- Raczej spójne: w różnych przeglądarkach;
- Wyśrodkowany w pionie: przycisk i tytuł mają różną wysokość; i
- Elastyczny: umożliwia dość precyzyjną kontrolę nad pozycjonowaniem (wyściółką i / lub marginesem) i stylizacją.
Na marginesie, trafiłem dzisiaj na kilka interesujących artykułów:
EDYCJA: Pozwól mi rozwinąć kwestię pływaka. Tego rodzaju prace:
<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>
Dzięki Ant P za tę overflow: hiddenczęść (nadal nie rozumiem dlaczego). Tutaj pojawia się problem. Powiedzmy, że chcę, aby tytuł i przycisk były wyśrodkowane w pionie. Jest to problematyczne, ponieważ elementy mają różną wysokość. Porównaj to z:
<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>
który działa doskonale.