Tamam, bir veya iki hafta önce basit bir düzen problemim vardı. Yani bir sayfanın bölümleri bir başlığa ihtiyaç duyuyordu:
+---------------------------------------------------------+
| Title Button |
+---------------------------------------------------------+Oldukça basit şeyler. Web dünyasında tablo nefretinin hakim olduğu bir şey var, HTML formları için neden tablolar yerine tanım listeleri (DL, DD, DT) etiketleri kullanmalıyım? Şimdi tablolar ile divs / CSS arasındaki genel konu daha önce tartışılmıştı, örneğin:
Yani bu, CSS ile mizanpaj tabloları hakkında genel bir tartışma değildir. Bu basitçe tek bir sorunun çözümü. Aşağıdakileri içeren CSS kullanarak yukarıdakilere çeşitli çözümler denedim:
- Düğme veya düğmeyi içeren bir div için sağa kayın;
- Düğmeye göre konum; ve
- Göreceli + mutlak konum.
Bu çözümlerin hiçbiri farklı nedenlerden dolayı tatmin edici değildi. Örneğin, göreli konumlandırma, açılır menümün içeriğin altında göründüğü bir z-endeksi sorunuyla sonuçlandı.
Böylece şuna geri döndüm:
<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>Ve mükemmel çalışıyor. Geriye dönük uyumluluğa sahip olabildiği kadar basit (muhtemelen IE5'te bile çalışacak) ve işe yarıyor. Konumlandırma veya şamandıralarla uğraşmak yok.
Öyleyse herhangi biri masasız eşdeğerini yapabilir mi?
Gereksinimler şunlardır:
- Geriye doğru uyumlu: FF2 ve IE6'ya;
- Makul ölçüde tutarlı: farklı tarayıcılarda;
- Dikey olarak ortalanmış: düğme ve başlık farklı yüksekliktedir; ve
- Esnek: konumlandırma (dolgu ve / veya kenar boşluğu) ve stil üzerinde makul ölçüde hassas kontrole izin verin.
Bir yan not olarak, bugün birkaç ilginç makaleye rastladım:
DÜZENLEME: Float konusunu detaylandırmama izin verin. Bu tür işler:
<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>Sayesinde Ant P için overflow: hiddenparçanın (neden olsa hala alamadım). Sorun burada devreye girer. Başlığın ve düğmenin dikey olarak ortalanmasını istediğimi varsayalım. Bu sorunludur çünkü elemanlar farklı yüksekliktedir. Bunu şununla karşılaştırın:
<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>hangi mükemmel çalışıyor.