टेबल्सविना मांडणी तयार करण्यासाठी सीएसएस स्थिती कशी वापरायची

टेबललेस लेआउट नवीन डिझाइन फ्रंटियर्स उघडा

लेआऊटसाठी टेबल वापरण्याची अनेक कारणे आहेत. लोक वापरण्याचा सतत वापर करतात याचे एक कारण म्हणजे सीएसएस सह लेआउट करणे कठिण आहे. जरी सीएसएस स्क्रिप्टिंग लर्निंग वक्रची गरज पडत नसली तरी जेव्हा तुम्ही सीएसएस लेआउट कसे करावे हे समजता तेव्हा आपल्याला आश्चर्य वाटेल की ते किती सोपे असू शकते आणि एकदा आपण शिकताच, आपण सीएसएस वापरु नये म्हणून "सीझन लिहायची" ही दुसरी सर्वात सामान्य कारणास आपण संबोधित करणार आहोत. "टेबल तयार करणे जलद आहे." कारण हे सारण्या आपल्याला माहीत आहे, परंतु एकदा आपण सीएसएस शिकला की आपण लगेचच त्या बरोबर.

CSS पोझिशनिंगचा ब्राऊझर समर्थन

सर्व आधुनिक ब्राऊझर्समध्ये सीएसएस पोजीशनिंग उत्तम प्रकारे समर्थित आहे. जो पर्यंत आपण नेटस्केप 4 किंवा इंटरनेट एक्सप्लोरर 4 साठी साइट बनवत नाही तोपर्यंत आपल्या वाचकांना आपल्या सीएसएस-तैनात वेब पेजेस पाहण्यास त्रास होऊ नये.

पुनर्बांधणी कसे आपण एक पृष्ठ तयार

आपण टेबल वापरुन साइट तयार करता, तेव्हा आपल्याला एका टेबुलर स्वरुपनात विचार करावा लागतो. दुसऱ्या शब्दांत, आपण पेशी आणि पंक्ति आणि स्तंभांनुसार विचार करत आहात. आपली वेब पृष्ठे ही पद्धत प्रतिबिंबित करतील आपण सीझर पोजीशनिंग डिझाईनवर जाता तेव्हा, आपण सामग्रीच्या संदर्भात आपल्या पृष्ठांचा विचार करणे सुरू करू शकाल कारण सामग्री आपल्याला लेआउटमध्ये इच्छित असलेल्या कोणत्याही ठिकाणी ठेवता येऊ शकते-अगदी अन्य सामग्रीच्या शीर्षस्थानी देखील स्तरित केली जाऊ शकते.

भिन्न वेबसाइटची भिन्न संरचना आहेत एक प्रभावी पृष्ठ तयार करण्यासाठी, आपण त्यावर सामग्री नियुक्त करण्यापूर्वी कोणत्याही दिलेल्या पृष्ठाची संरचना याचे मूल्यांकन करा. उदाहरणार्थ पृष्ठात पाच भिन्न भागांचा समावेश असू शकतो:

1. शीर्षलेख बॅनर जाहिरात मुख्यपृष्ठ, साइट नाव, नेव्हिगेशन दुवा, एक लेख शीर्षक तसेच काही इतर गोष्टी म्हणून.
2. उजवा स्तंभ . शोध बॉक्स, जाहिराती, व्हिडिओ बॉक्सेस आणि शॉपिंग एरियासह पृष्ठाच्या हा उजव्या बाजूला आहे.
3. सामग्री लेख, ब्लॉग पोस्ट किंवा शॉपिंग कार्टचा मजकूर- पृष्ठाचे मांस आणि बटाटे
4. इनलाइन जाहिराती सामग्री आत इनलाइन जाहिरात.
5. तळटीप निमंत्रण नेव्हिगेशन, लेखक माहिती, कॉपीराइट माहिती, निम्न बॅनर जाहिराती आणि संबंधित दुवे.

त्या पाच घटकांना एका टेबलमध्ये ठेवण्यापेक्षा, सामग्रीचे विविध भाग परिभाषित करण्यासाठी HTML5 कलिंग घटक वापरा आणि नंतर पृष्ठावर सामग्री घटक ठेवण्यासाठी सीएसएस स्थिती वापरणे.

आपले सामग्री विभाग ओळखणे

आपण आपल्या साइटचे भिन्न सामग्री क्षेत्र परिभाषित केल्यानंतर, आपल्याला आपल्या HTML मध्ये ते लिहिण्याची आवश्यकता आहे आपण साधारणपणे आपल्या विभागांना कोणत्याही क्रमवारीत ठेवू शकता, परंतु प्रथम आपल्या पृष्ठाचे सर्वात महत्वाचे भाग ठेवणे ही एक चांगली कल्पना आहे. हा दृष्टिकोन शोध इंजिन ऑप्टिमायझेशनसह तसेच मदत करेल.

स्थिती प्रदर्शित करण्यासाठी, एका पृष्ठास तीन स्तंभांसह कल्पना द्या पण हेडर किंवा तळटीप नसावा. आपण पसंतीच्या कोणत्याही प्रकारची मांडणी तयार करण्यासाठी आपण पोजीशनिंगचा वापर करु शकता.

तीन-स्तंभ लेआउटसाठी, तीन विभाग परिभाषित करा: डावा स्तंभ, उजवा स्तंभ आणि सामग्री.

हे विभाग सामग्रीसाठी आर्टिकल घटक आणि दोन स्तंभांसाठी दोन सेक्शन घटक वापरून तत्क्षणीकृत केले जाईल. प्रत्येक गोष्टमध्ये तिला ओळखणारी विशेषता देखील असेल. आपण आयडी गुणधर्म वापरत असताना, आपण प्रत्येक आयडीसाठी एक अनन्य नाव लिहून घेणे आवश्यक आहे.

सामग्री स्थानावर

CSS वापरून, आपल्या ID'd घटकांसाठी स्थान परिभाषित करा. आपली स्थिती माहिती एका अशा प्रकारच्या कॉलमध्ये संचयित करा:

#content {

}

या घटकांमधील सामग्री जितकी जास्त शक्य तितकी जागा घेईल, म्हणजे वर्तमान स्थान किंवा पृष्ठाच्या रूंदीच्या 100 टक्के. एका विभागाच्या स्थानास ते एखाद्या निश्चित रूंदीवर बेशुद्ध न ठेवता पॅडिंग किंवा मार्जिन गुणधर्म बदलू शकतात.

या लेआऊटसाठी, दोन कॉलम निश्चित फॉर्म्स मध्ये सेट करा आणि मग त्यांची स्थिती निश्चित करा, जेणेकरुन ते HTML मध्ये कोठे सापडतील याचा परिणाम होणार नाही.

# डावे-स्तंभ {
स्थान: परिपूर्ण;
डावी: 0;
रूंदी: 150px;
समास-डावीकडे: 10px;
समास-शीर्ष: 20 पीएक्स;
रंग: # 000000;
पॅडिंग: 3px;
}
# उजव्या-स्तंभ {
स्थान: परिपूर्ण;
डावी: 80%;
शीर्ष: 20 पीएक्स;
रुंदीः 140px;
पॅडिंग-डावा: 10 पीएक्स;
z- सूची: 3;
रंग: # 000000;
पॅडिंग: 3px;
}

नंतर सामग्री क्षेत्रासाठी, उजवीकडे आणि डावीकडे मार्जिन सेट करा जेणेकरून सामग्री दोन बाहेरच्या स्तंभांवर आच्छादित करणार नाही

#content {
शीर्ष: 0 पिक्सेल;
समास: 0 पीएक्स 25% 0 165px;
पॅडिंग: 3px;
रंग: # 000000;
}

आपल्या पृष्ठाला HTML सारण्याऐवजी CSS वापरुन परिभाषित करणेसाठी थोडा अधिक तांत्रिक कौशल्य आवश्यक आहे, परंतु हे पैसे अधिक लवचिक आणि प्रतिसाद डिझाइनवरून आणि नंतर आपल्या पृष्ठावर स्ट्रक्चरल ऍडजस्टमेंट नंतर अधिक सहजतेने आवश्यक आहे.