भाषाएँ

यह एक अनुवाद है। इसमें त्रुटियां हो सकती हैं या यह अंग्रेजी संस्करण के संबंध में पुराना हो सकता हैं। लेखक: Maneesh Sharma (Hosting One Cent)

वेब स्टाइल शीट्स सीएसएस युक्तियाँ एवं चालाकियाँ

सभी युक्तियों का सूचकांक भी देखें ।

इस पृष्ठ पर:

एक पिन-डाउन मेनू

इस पृष्ठ पर दाईं ओर आप जिस मेनू को देखते हैं, वह केवल एक UL सूची है। लेकिन, जब आप पृष्ठ को स्क्रॉल करते हैं तो यह निश्चित रहता है। (आपको पहले स्क्रॉल बार प्राप्त करने के लिए विंडो को छोटा करना पड़ सकता है।) इसे एक जगह पर रखने के लिए सभी कार्य स्टाइल शीट में नियमों द्वारा किए गए हैं। यहाँ मेनू का मार्क-अप है, यह सीधे इस पृष्ठ के स्रोत से सीधे लिया गया है: 

<ul id=menu>
<li><a href="#L384">अनुभाग 1 </a>
<li><a href="#details">अनुभाग 2 </a>
<li><a href="#FAQ">अनुभाग 3</a>
</ul>

सीएसएस के बिना एक ब्राउज़र में, या यदि सीएसएस को बंद कर दिया है, यह सिर्फ लिंक के साथ एक सामान्य सूची होगी। लेकिन सीएसएस के साथ, नीचे दिए गए नियमों के कारण, यह ब्राउज़र विंडो के दाईं ओर स्थिर होकर पृष्ठ के शीर्ष पर "float" करता हुआ दिखाई देगा: 

#menu {
  position: fixed;
  right: 0;
  top: 50%;
  width: 8em;
  margin-top: -2.5em;
}

यहाँ दिलचस्प नियम 'position: fixed', है, जो स्क्रीन पर DIV को स्थिर रखता है । 'top: 50%' और'right: 0' यह निर्धारित करता है कि DIV कहां प्रदर्शित होता है। इस मामले में: विंडो के शीर्ष से 50% नीचे, और दाईं ओर से निरंतर 0px। अन्य गुण, मार्जिन, सीमा, रंग, आदि को व्यक्तिगत पसंद के अनुसार जोड़ा जा सकता है।

स्क्रीन के बाईं या नीचे के एलिमेंट को एंकर करने के लिए 'left' और 'bottom' गुण भी मौजूद हैं।

अधिक जानकारी

अधिक सटीक रूप से: एक बार एक एलिमेंट 'position: fixed', के साथ तय हो जाने के बाद , तीन गुण 'left', 'width' और 'right' मिलकर विंडो के सापेक्ष क्षैतिज स्थिति और आकार निर्धारित करते हैं। (सीएसएस अधिक सामान्य शब्द viewport; का उपयोग करता है ; विंडो viewport का एक उदाहरण है।)

आपको ज्यादा से ज्यादा तीन में से दो गुणों की आवश्यकता है, अर्थात, left और width, right और width, या left और right। तीन में से सिर्फ एक को सेट करना, या कोई भी नहीं करना भी संभव है। उस स्थिति में, सीएसएस एलिमेंट के प्राकृतिक ("intrinsic") आकार और / या स्थिति का उपयोग करेगा, आवश्यकतानुसार, किसी भी गुण के लिए जो उनके डिफ़ॉल्ट मान ('auto') पर छोड़ दिए जाते हैं।

यही स्थिति इस तिकड़ी 'top', 'height' और 'bottom' के लिए है। आपको उनमें से ज्यादा से ज्यादा दो को सेट करने की आवश्यकता है:यदि आप विंडो के शीर्ष से दूरी को नियंत्रित करना चाहते हैं तो 'top', नीचे से दूरी को नियंत्रित करने के लिए 'bottom', और यदि आप एक निश्चित ऊंचाई निर्दिष्ट करना चाहते हैं तो 'height' ।

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

सामान्य प्रश्न: विंडोज में IE 5 और 6?

यदि आप विंडोज ("WinIE5" और "WinIE6") में माइक्रोसॉफ्ट इंटरनेट एक्सप्लोरर 5 या 6 के साथ इस पृष्ठ को देखते हैं, तो आप देखेंगे कि यह काम नहीं करता है। बहुत से लोग मुझसे इस बारे में पूछते हैं, इसलिए यहाँ थोड़ा स्पष्टीकरण है। संक्षिप्त में: बग ब्राउज़र में है, इस पृष्ठ में नहीं।

WinIE5 और WinIE6 'fixed' को लागू नहीं करते हैं। यह दुर्भाग्यपूर्ण है, लेकिन बड़ी समस्या यह है कि वे 'position' गुण को सही ढंग से पार्स नहीं करते हैं। ऐसा ब्राउज़र जो 'fixed' नहीं जानता है, उसे नियम 'position:fixed' को हटा देना चाहिए और स्टाइल शीट में 'position' का पिछला मान जो भी हो, उसे लौटाना चाहिए। हम 'fixed' से ठीक पहले 'position:absolute' जोड़ सकते थे और ब्राउज़र इसका उपयोग करेगा। लेकिन WinIE 5 और 6 में ऐसा नहीं है। जाहिरा तौर पर 'fixed' कीवर्ड को किसी तरह 'static' के रूप में व्याख्या किया गया।

आप WinIE5 और 6 में 'fixed' को काम नहीं करा सकते हैं, लेकिन पार्सिंग की समस्या के लिए एक समाधान है। जोहानस कोच ने मुझे इस ट्रिक के बारे में बताया. (अपने समाधानों के संग्रह [archive.org का पृष्ठ] से). पहले 'position:fixed' को ऊपर दिए स्टाइल नियम में 'position:absolute' से बदल दें और फिर स्टाइल शीट में निम्नलिखित नियम डालें: 

*>#intro {position: fixed}

इसका प्रभाव यह है कि सीएसएस के '>' (child) सिलेक्टर के बारे में जानने वाले ब्राउज़र इस नियम का उपयोग करेंगे, लेकिन वे ब्राउज़र जो यह नहीं जानते, विशेष रूप से WinIE5 और WinIE6, वे इसे अनदेखा कर देंगे। नियम 'position:absolute' का उपयोग इसके स्थान पर किया जाएगा और मेनू सही जगह पर होगा, सिवाय इसके कि जब आप स्क्रॉल करेंगे तो यह निश्चित नहीं रहेगा।

यह महत्वपूर्ण है कि '>' के आसपास रिक्त स्थान न हों।

बर्ट बोस, डबल्यू3सी स्टाइल क्रियाकलाप अगुआ
प्रतिलिप्याधिकार © 1994–2021 W3C® Privacy policy

17 जनवरी 2001 को बनाया गया;
आखिरी अपडेट बुधवार 06 जन॰ 2021 05:40:49 पूर्वाह्न UTC

भाषाएँ

अनुवादों के बारे में