ठीक है, मुझे एक या दो हफ्ते पहले एक साधारण लेआउट की समस्या थी। पृष्ठ के कुछ हिस्सों को शीर्ष लेख की आवश्यकता होती है:
+---------------------------------------------------------+
| Title Button |
+---------------------------------------------------------+
बहुत साधारण सामान। बात यह है कि वेब की दुनिया में थिंग्स से नफरत की गई है, जो मुझे याद दिलाया गया था जब मैंने पूछा था कि तालिकाओं के बजाय एचटीएमएल रूपों के लिए परिभाषा सूचियों (डीएल, डीडी, डीटी) का उपयोग क्यों करें? अब टेबल बनाम div / CSS के सामान्य विषय पर पहले चर्चा की जा चुकी है, उदाहरण के लिए:
- DIV बनाम तालिका ; तथा
- DIV के बजाय टेबल्स ।
तो यह लेआउट के लिए सीएसएस बनाम तालिकाओं के बारे में एक सामान्य चर्चा करने का इरादा नहीं है। यह केवल एक समस्या का समाधान है। मैंने CSS का उपयोग करते हुए उपरोक्त विभिन्न समाधानों की कोशिश की:
- बटन के लिए फ्लोट दाईं ओर या बटन वाले डिव;
- बटन के लिए स्थिति सापेक्ष; तथा
- स्थिति सापेक्ष + निरपेक्ष।
इनमें से कोई भी समाधान विभिन्न कारणों से संतोषजनक नहीं था। उदाहरण के लिए सापेक्ष स्थिति एक जेड-इंडेक्स समस्या में हुई, जहां मेरा ड्रॉपडाउन मेनू सामग्री के तहत दिखाई दिया।
इसलिए मैंने वापस जाना समाप्त कर दिया:
<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>
और यह पूरी तरह से काम करता है। यह सरल है, पिछड़े कॉम्पिटिबाइल के रूप में यह हो जाता है (कि शायद IE5 पर भी काम करेंगे) और यह सिर्फ काम करता है। पोजिशनिंग या फ्लोट्स के बारे में कोई गड़बड़ नहीं।
तो क्या कोई बिना तालिकाओं के बराबर कर सकता है?
आवश्यकताएं हैं:
- पीछे की ओर संगत: FF2 और IE6 के लिए;
- यथोचित संगत: विभिन्न ब्राउज़रों में;
- ऊर्ध्वाधर रूप से केंद्रित: बटन और शीर्षक अलग-अलग ऊंचाइयों के हैं; तथा
- लचीला: स्थिति (गद्दी और / या मार्जिन) और स्टाइल पर यथोचित सटीक नियंत्रण की अनुमति देता है।
एक साइड नोट पर, मुझे आज के कुछ दिलचस्प लेख मिले:
- CSS का उपयोग लेआउट के लिए क्यों नहीं किया जाना चाहिए ; तथा
- टेबल्स बनाम सीएसएस: सीएसएस ट्रोल भीख माँगता है
संपादित करें: मुझे फ्लोट मुद्दे पर विस्तार से बताएं। इस प्रकार के कार्य:
<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(अभी भी नहीं मिलता है, हालांकि)। यहीं पर समस्या आती है। कहो कि मैं शीर्षक और बटन को लंबवत केंद्रित करना चाहता हूं। यह समस्याग्रस्त है क्योंकि तत्व अलग-अलग ऊंचाई के हैं। इसकी तुलना करें:
<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>
जो पूरी तरह से काम करता है।