यह आलेख बताता है कि CSS में 3-स्तंभ लेआउट कैसे बनाया जाता है। निर्देश CSS3 और पुराने पर लागू होते हैं।

अपना लेआउट बनाएं

आप अपना लेआउट कागज़ पर या a in में बना सकते हैं ग्राफिक्स प्रोग्राम. यदि आपके पास पहले से ही एक तार-फ्रेम या इससे भी अधिक व्यापक डिज़ाइन है, तो इसे साइट बनाने वाले मूल बॉक्स में सरल बनाएं। इस आलेख के साथ आने वाले इस डिज़ाइन में मुख्य सामग्री क्षेत्र में तीन कॉलम हैं, साथ ही एक शीर्षलेख और पाद लेख भी है। यदि आप बारीकी से देखें, तो आप देख सकते हैं कि तीनों स्तंभ चौड़ाई में समान नहीं हैं।

अपना लेआउट तैयार करने के बाद, आप आयामों के बारे में सोचना शुरू कर सकते हैं। इस उदाहरण डिजाइन में निम्नलिखित बुनियादी आयाम होंगे:

• 900 पिक्सेल से अधिक चौड़ा नहीं
• बाईं ओर 20 px गटर
• कॉलम और पंक्तियों के बीच 10 px
• 250px, 300px और 300px चौड़े स्तंभColumn
• शीर्ष पंक्ति 150px लंबी है
• नीचे की पंक्ति 100px लंबी है

बेसिक HTML/CSS लिखें और एक कंटेनर एलिमेंट बनाएं

चूंकि यह पेज मान्य होगा एचटीएमएल दस्तावेज़, एक खाली HTML कंटेनर से शुरू करें।

मूल सीएसएस शैलियों में जोड़ें पेज मार्जिन, बॉर्डर और पैडिंग को शून्य करें. जबकि अन्य हैं मानक सीएसएस शैलियों नए दस्तावेज़ों के लिए, ये शैलियाँ न्यूनतम हैं जिनकी आपको एक स्वच्छ लेआउट प्राप्त करने की आवश्यकता है। उन्हें अपने दस्तावेज़ के शीर्ष पर जोड़ें।

लेआउट का निर्माण शुरू करने के लिए, एक कंटेनर तत्व डालें। कभी-कभी ऐसा होता है कि आप बाद में कंटेनर से छुटकारा पा सकते हैं, लेकिन अधिकांश निश्चित-चौड़ाई वाले लेआउट के लिए, कंटेनर तत्व होने से विभिन्न वेब पर प्रबंधन करना आसान हो जाता है ब्राउज़रों.

कंटेनर को स्टाइल करें

कंटेनर परिभाषित करता है कि वेब पेज की सामग्री कितनी चौड़ी होगी, साथ ही बाहर के आसपास कोई भी मार्जिन और अंदर की तरफ पैडिंग। इस दस्तावेज़ के लिए, कंटेनर 870px चौड़ा है और बाईं ओर 20 पिक्सेल का गटर है। गटर एक मार्जिन शैली के साथ स्थापित किया गया है, लेकिन कंटेनर पर किसी भी तत्व को कंटेनर जितना चौड़ा होने से रोकने के लिए पैडिंग को शून्य कर दिया गया है।

यदि आप अपना दस्तावेज़ अभी सहेजते हैं, तो कंटेनर को देखना मुश्किल होगा क्योंकि इसमें कुछ भी नहीं है। यदि आप प्लेसहोल्डर टेक्स्ट जोड़ते हैं, तो आप कंटेनर तत्व को अधिक स्पष्ट रूप से देख पाएंगे।

हैडर के लिए हेडलाइन टैग का प्रयोग करें

आप शीर्ष लेख पंक्ति को कैसे शैलीबद्ध करने का निर्णय लेते हैं, यह इस पर निर्भर करता है कि इसमें क्या है। यदि शीर्षलेख पंक्ति में केवल लोगो ग्राफ़िक और शीर्षक होने वाला है, तो शीर्षक टैग का उपयोग करना (

) a. का उपयोग करने से अधिक समझ में आता है

. आप शीर्षक को उसी तरह शैलीबद्ध कर सकते हैं जैसे आप एक div शैली बनाते हैं, और आप बाहरी टैग से बचते हैं।

हेडर पंक्ति के लिए HTML कंटेनर के शीर्ष पर जाता है और इस तरह दिखता है:

फिर, उस पर शैलियों को सेट करने के लिए, नीचे एक लाल बॉर्डर जोड़ा गया ताकि आप देख सकें कि यह कहाँ समाप्त होता है, मार्जिन और पैडिंग शून्य हो गए थे, चौड़ाई 100% और ऊंचाई 150px पर सेट की गई थी।

इस तत्व को फ्लोट के साथ फ्लोट करना न भूलें: बाएं; संपत्ति। CSS लेआउट लिखने की कुंजी सब कुछ फ़्लोट करना है, यहाँ तक कि ऐसी चीज़ें भी जो कंटेनर के समान चौड़ाई की हैं। इस तरह, आप हमेशा जानते हैं कि पृष्ठ पर तत्व कहाँ स्थित होंगे।

ए सीएसएस वंशज चयनकर्ता शैलियों को केवल H1 तत्वों पर लागू किया जाता है जो #container तत्व के अंदर होते हैं।

तीन कॉलम प्राप्त करने के लिए, दो कॉलम बनाकर शुरू करें

जब आप CSS के साथ तीन-स्तंभ लेआउट बनाते हैं, तो आपको अपने लेआउट को दो के समूहों में विभाजित करने की आवश्यकता होती है। तो इस तीन-स्तंभ लेआउट के लिए, मध्य और दाएँ स्तंभ और समूहीकृत और बाएँ स्तंभ के बगल में दो-स्तंभ लेआउट में रखा गया है जहां बायां स्तंभ 250px चौड़ा है, और दायां स्तंभ 610px चौड़ा है (प्रत्येक दो स्तंभों के लिए 300, प्लस 10px के बीच के गटर के लिए) उन्हें)।

बाईं ओर का स्तंभ बाईं ओर तैरता है, जबकि दूसरा दाईं ओर तैरता है। क्योंकि दोनों स्तंभों की कुल चौड़ाई 860px है, उनके बीच 10px का गटर है।

चौड़े दूसरे कॉलम के अंदर दो कॉलम जोड़ें

तीन कॉलम बनाने के लिए, बड़े दूसरे कॉलम के अंदर दो डिव जोड़ें, जैसे आपने अंतिम चरण में कंटेनर कॉलम के अंदर 2 डिव जोड़े थे।

चूंकि ये दो 300px चौड़े बॉक्स 610px चौड़े बॉक्स के अंदर हैं, इसलिए उनके बीच फिर से 10px का गटर होगा।

पाद लेख में जोड़ें

अब जबकि शेष पृष्ठ को स्टाइल किया गया है, आप पाद लेख में जोड़ सकते हैं। "पाद लेख" आईडी के साथ अंतिम div का उपयोग करें, और सामग्री जोड़ें ताकि आप इसे देख सकें। आप शीर्ष पर एक बॉर्डर भी जोड़ सकते हैं, जिससे आपको पता चल जाएगा कि यह कहां से शुरू होता है।

अपनी व्यक्तिगत शैलियों और सामग्री में जोड़ें

अब जब आपके पास लेआउट समाप्त हो गया है, तो आप अपनी व्यक्तिगत शैलियों और सामग्री को जोड़ना शुरू कर सकते हैं। याद रखें कि हेडर और फ़ुटर पर बॉर्डर को लेआउट सेक्शन दिखाने के लिए जोड़ा गया था, न कि विशेष रूप से डिज़ाइन के लिए।