लेआउट: एक ही ऊंचाई के दो ब्लॉक

कार्य

दो ब्लॉक तत्व निर्दिष्ट किए गए हैं - एक लेख के पाठ के साथ (दस्तावेज़ की चौड़ाई का 75%), दूसरा पहला तत्व नेविगेट करने के लिए लिंक की सूची के साथ (25%, पहले ब्लॉक के बाईं ओर स्थित)। पाठ के साथ ब्लॉक की सामग्री के आधार पर, लेख वाले तत्व की ऊंचाई गतिशील रूप से सेट की जाती है। यह सुनिश्चित करना आवश्यक है कि नेविगेशन के साथ दूसरे ब्लॉक में ऊंचाई पैरामीटर का एक ही मान है, जिसमें लेख का मुख्य पाठ शामिल है।

तकनीकी विशिष्टता

पहले, टेबल टैग के टेबल-टीआरडी-टीडी परिवार का उपयोग करके इसी तरह के कार्यों को हल किया गया था, लेकिन इस दृष्टिकोण ने मार्कअप (मार्कअप - एचटीएमएल) में डेटा संरचना को अलग करने के सिद्धांत का उल्लंघन किया था, जिस तरह से उन्हें स्टाइल (सीएसएस) किया गया था, क्योंकि प्रस्तुत जानकारी की प्रकृति द्वारा डेटा ही नहीं था। सारणीबद्ध, लेकिन केवल पृष्ठ पर एक समान सारणीबद्ध प्रदर्शन विधि का उपयोग किया:

<table> <tr> <td id=”navigation”> ... a-href ... </td> <td id=”content”> .. ... </td> </tr> </table> 

बाद में, सीएसएस मानक को प्रदर्शन पैरामीटर के लिए अतिरिक्त तालिका, टेबल-सेल मानों के साथ विस्तारित किया गया था, जिसने हमें पृष्ठ लेआउट के HTML-संरचना में सामान्य DIV, SPAN तत्वों का उपयोग करने की अनुमति दी थी और उन्हें तालिका के रूप में प्रदर्शित करने के लिए उपयुक्त सीएसएस नियम सेट किए थे, जो प्रतिशत के रूप में रिपोर्टिंग कॉलम के साथ प्रदर्शित करते थे। चौड़ाई और ऊंचाई में:

 <div id=”wrapper”> <div id=”navigation”> ... a-href ... </div> <div id=”content”> ... ... </div> </div> 

 #wrapper { display: table; } #navigation, #content { display: table-cell } 

ऐसा लगता है कि समस्या हल हो गई थी, लेकिन दुर्भाग्य से, यह दृष्टिकोण ब्राउज़र के पुराने संस्करणों (IE 6, IE 7) में काम नहीं करता था, कोडर्स को अन्य तरीकों की तलाश करने के लिए मजबूर करता था। नेस्टेड रैपर तत्वों की मदद से समाधान जो एक दूसरे के सापेक्ष ऑफसेट करते हैं, समान ऊंचाई वाले स्तंभों के दृश्य प्रभाव को प्राप्त करने की अनुमति देता है:

 <div id="bg-one"> <div id="bg-two"> <div id="navigation"> ... a-href ... </div> <div id="content"> ...... </div> </div> </div> 

 #navigation, #content { position: relative; float: left; left: -50%; } #navigation { width: 50%; } #bg-one, #bg-two { position:relative; float: left; width: 100%; background-color: #9988ff; } #bg-one { overflow: hidden; } #bg-two { left: 50%; background-color: #99ff99; } 

यहां कॉलम की भूमिका टैग (# बीजी-एक, # बीजी-दो) को दर्ज करके की जाती है, जिनमें से प्रत्येक में संलग्न सामग्री (# कॉन्टेंट, #navigation) के साथ टैग डुप्लिकेट की संख्या होती है। यह तकनीक IE 6 में भी काम करती है, लेकिन इसका महत्वपूर्ण दोष स्तंभ पाठ (#content, #navigation) के साथ टैगिंग टैग्स में बड़ी संख्या में अतिरिक्त तत्वों (# bg-one, # bg-two) को जोड़ने की आवश्यकता है। ऐसे आवरण तत्वों (# बीजी-एन) की संख्या पाठ के स्तंभों के साथ वास्तविक ब्लॉक टैग की संख्या के बराबर है। उपरोक्त उदाहरण में, #navigation और #content के समान स्तर पर एक और कॉलम (#advertisement) कहने के लिए, आपको एक और सामान्य रैपिंग एलिमेंट bg-तीन जोड़ना होगा:

 <div id="bg-one"> <div id="bg-two"> <div id="bg-three"> <div id="navigation"> ..  a href... </div> <div id="content"> .. .... </div> <div id="advertisement"> ... ... </div> </div> </div> </div> 

 #navigation, #content, #advertisement { position: relative; float: left; left: -64%; } #navigation,#content { width: 32%; } #bg-one, #bg-two, #bg-three { position: relative; float: left; width: 100%; background-color: #9988ff; } #bg-one { overflow: hidden; } #bg-two { left: 32%; background-color: #99ff99; } #bg-three { left: 32%; background-color: #a0a0a0; } 

इस मामले में, html मार्कअप बहुत अधिक जटिल है - रैपिंग टैग की उपस्थिति का कारण स्पष्ट नहीं है। इस प्रकार, मार्कअप की खराब पठनीयता के कारण html टेबल्स को छोड़ना, हम कम पठनीय कोड पर भी आते हैं। कॉलम के साथ रैपिंग टैग को एक स्तर पर ले जाकर स्थिति में सुधार किया जा सकता है:

 <div id="wrapper"> <div id="navigation-bg"></div> <div id="navigation"> ..   a href.. </div> <div id="content-bg"></div> <div id="content"> ... ... </div> </div> 

 #wrapper{ position: relative; float: left; width: 100%; } #navigation, #content { position: relative; float: left; width: 50%; } #navigation-bg { position: absolute; left: 0; width: 50%; height: 100%; background-color: #ffaaaa; } #content-bg { position: absolute; left: 50%; width: 50%; height: 100%; background-color: #aaffaa; } 

इस मामले में, एक पृष्ठभूमि (# नेविगेशन-बीजी, # सामग्री-बीजी) वाले तत्व कॉलम टेक्स्ट वाले टैग के सामने स्थित होते हैं, जो मार्कअप की समझ में काफी सुधार करता है। लेकिन दुर्भाग्य से IE 6 पूर्ण स्थिति के साथ ब्लॉक तत्वों के लिए ऊंचाई पैरामीटर में निर्दिष्ट प्रतिशत मान को नहीं समझता है, और ब्राउज़रों के अधिक हाल के संस्करणों के लिए प्रदर्शन का समर्थन करता है: तालिका नियम, जो कॉलम की पृष्ठभूमि वाले अतिरिक्त div तत्वों से बचता है (उदाहरण में # सामग्री-बीजी से ऊपर) , # नेविगेशन-बीजी)।

निर्णय

कार्य को पढ़ना, यह ध्यान देने योग्य हो जाता है कि प्रदर्शन के बाद के अनुप्रयोग पर एक नज़र के साथ पाठ का मार्कअप: टेबल सीएसएस नियम में एक अतिरिक्त टैग भी शामिल है:

 <div id=”wrapper”> <nav class=”shakespeare”> ... ... </nav> <article class=”shakespeare”> ... ... </article> </div> 

 #wrapper { display: table; } .shakespeare { display: table-cell; background-color: #f0f0f0; } 

दरअसल, इस मामले में, स्तंभ की ऊंचाई की निर्भरता द्विदिश है, अर्थात, नौसेना टैग द्वारा निर्दिष्ट ब्लॉक की ऊंचाई लेख टैग द्वारा निर्दिष्ट ब्लॉक की ऊंचाई पर निर्भर करती है और इसके विपरीत - लेख ब्लॉक नौसेना ब्लॉक की ऊंचाई पर निर्भर करता है। हालांकि इस मामले में केवल नौसेना ब्लॉक की ऊंचाई को लंबे समय तक लेख टैग की ऊंचाई तक समायोजित किया जाना चाहिए, उलटा संबंध अतिशय है:

 <article> <aside> ... ... </aside> ..  </article> 

 article { position: relative; display: block; width: 75%; left: 25%; background-color: #8888FF; } aside { position: absolute; display: block; width: 33%; left: -33%; height: 100%; background-color: #F88888; } 

पूर्ण तत्वों के साथ-साथ प्रदर्शन के लिए प्रतिशत मान: IE ब्राउज़र में तालिका का काम केवल आठवें संस्करण से शुरू होता है। अलग-अलग ब्लॉक की चौड़ाई और लंबाई के मान को लेख ब्लॉक के आकार के सापेक्ष गणना से लिया जाता है, क्योंकि सीएसएस में पूर्ण के साथ तत्व के निर्देशांक और आकार को गैर-स्थैतिक (सापेक्ष, पूर्ण, निश्चित) मान के साथ पहले मूल तत्व से शुरू किया जाता है। यही है, अलग-अलग कंटेनर के लिए लेख ब्लॉक की चौड़ाई (जो दस्तावेज़ की चौड़ाई का 75% है) 100% है, जिससे अनुपात:

 75% - 100% 25% - ? 

हमें मिलता है

 25% * 100% / 75% = 33.33% 

यह लेख ब्लॉक के प्रतिशत में नि: शुल्क स्क्रीन का 25% है।
इस प्रकार, हम एक अतिरिक्त आवरण तत्व से छुटकारा पा सकते हैं, कोड में दूसरे पर एक कॉलम की निर्भरता प्रदर्शित कर सकते हैं और गैर-तालिका डेटा के लिए तालिका स्थिति विधि का सहारा नहीं ले सकते।