Codepal

डाक टैग की गईं 'सीएसएस'

JqTransform और इसके समाधान का उपयोग करने के बाद समस्या 'चुनें'

गुरुवार, 18 फरवरी, 2010

परियोजना

मेरा हाल ही में इस परियोजना में, मैं एक लैंडिंग पृष्ठ का निर्माण करने के लिए आवश्यक था. इस लैंडिंग पृष्ठ में, वहाँ भाषाओं की सूची हो सकता है और बाद उपयोगकर्ता किसी विशेष भाषा का चयन, साइट के होमपेज में संबंधित चयनित भाषा में स्वचालित रूप से खुला होता है. यह भी जिस तरह से यह लैंडिंग पृष्ठ के डिजाइन में दिया गया था में चयन सूची बॉक्स शैली के लिए आवश्यक था. तो मैं के लिए चुना jqTransform प्लग में jQuery, जो मैं एक बार इस्तेमाल किया शैली के कुछ रूपों. jqTransform बहुत अच्छा है एक बहुत ही आसान तरीका में अनुकूलित रूपों प्लग में और अंत उत्पाद नहीं सुंदर संदेह है. लेकिन इस मामले में, यह एक छोटी सी गति अपनी प्रगति के लिए ब्रेकर बन गया.

समस्या

html फार्म का नियंत्रण सूची ड्रॉप डाउन 'चुनें' टैग जो विभिन्न 'विकल्प' टैग संलग्न हैं. यहाँ एक फार्म है जो मैं इस ट्यूटोरियल में का उपयोग कर रहा हूँ समस्या की व्याख्या करने के लिए है:

 <form>
	 <h4> jqTransform </ h4> बिना बॉक्स का चयन करें
	 <div id="box-city" class="select-menus">
		 <label> सिटी <लेबल />
		 <br/>
		 <select name="select-country">
  		         <option> गोथम </ विकल्प>
			 <option> न्यूयॉर्क शहर </ विकल्प>
			 <option> Smallville </ विकल्प>
		 </ चयन करें>
		 class="clear"> <div </ div>
	 </ Div>
 <फार्म />

JqTransform क्या करता है, यह पूरी 'चुनें' टैग स्कैन और एक unordered सूची ड्रॉप - डाउन सूची में विकल्पों के हाइपर - लिंक युक्त बनाता है. यह तो मूल 'का चयन करें' टैग और उसकी सामग्री को छुपाता है.

 <form class="jqtransform jqtransformdone">
	 <h4> jqTransform और सामान्य का चयन करें परिवर्तन विधि के साथ बॉक्स का चयन करें </ h4>
	 <div class="select-menus" id="box-name">
		 <Label style="cursor: pointer;"> नाम </ लेबल>
		 <div style="z-index: class="jqTransformSelectWrapper" 10; width: 150px;">
			 <div>
				 <span style="width: 119px;"> बैटमैन </ span>
				 <a class="jqTransformSelectOpen" href="#"> </ a>
			 </ Div>
                         <ul style="width: 148px; display: none; visibility: height: visible; 100px; overflow: hidden;">
				 <li> <a index="0" href="#" class="selected"> बैटमैन </ a> </ li>
				 <li> <a index="1" href="#"> रॉबिन </ a> </ li>
				 <li> <a index="2" href="#"> सुपरमैन </ a> </ li>
				 <li> <a index="3" href="#"> स्पाइडरमैन </ a> </ li>
			 </ Ul>
			 <select name="select-country" class="jqTransformHidden" style="">
	 				 <option> बैटमैन </ विकल्प>
					 <option> रॉबिन </ विकल्प>
					 <option> सुपरमैन </ विकल्प>
					 <option> स्पाइडरमैन </ विकल्प>
			 </ चयन करें>
		 </ Div>
		 class="clear"> <div </ div>
	 </ Div>
 <फार्म />

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

यह सामान्य रूप से चयन नियंत्रण के 'परिवर्तन' विधि का उपयोग करके जावास्क्रिप्ट में हासिल की. 'परिवर्तन' विधि मूल्य परिवर्तन घटना कब्जा है और हम निम्नलिखित तरीके में उपयोगकर्ता द्वारा चयनित मूल्य का उपयोग कर सकते हैं.

 / / गैर रूपांतरित का चयन करें बॉक्स के परिवर्तन घटना पर कब्जा.
 परिवर्तन ("# बॉक्स शहर चुनें") $ (function () {
	 var मान = $ (यह) (वैल).
     चेतावनी ("चयनित मूल्य =" मूल्य +);
 });

लेकिन का उपयोग करने के बाद jqTransform प्लगइन, 'चुनें' टैग नहीं है पर परिवर्तन करने की पद्धति लागू.

समाधान

इस के लिए हल, एक बहुत ही सरल है. हम jqTransformed ड्रॉप डाउन सूची के लिए unordered सूची के भीतर अति लिंक तत्व के लिए एक क्लिक समारोह को लागू करने के द्वारा परिवर्तन घटना अनुकरण कर सकते हैं. तो फिर हम जहां चयनित तत्व सेट या प्रदर्शित अवधि टैग के पाठ तक पहुँचने के द्वारा चयनित मूल्य है सकते हैं.

 / / रूपांतरित का चयन करें बॉक्स मूल्य परिवर्तन घटना पर कब्जा करने का संशोधित विधि का उपयोग कर परिवर्तन घटना पर कब्जा.
 क्लिक करें $ ("# बॉक्स उम्र div.jqTransformSelectWrapper उल ली एक") (function () {
	 var मान = $ ("# div.jqTransformSelectWrapper बॉक्स उम्र अवधि") (पाठ)
	 चेतावनी ("चयनित मूल्य =" मूल्य +);
	 वापसी झूठी; / / डिफ़ॉल्ट ब्राउज़र कार्रवाई को रोकने के
 });

निष्कर्ष

यह jqTransform का उपयोग कर उन्हें अनुकूलित करने के बाद ड्रॉप - डाउन सूची बक्सों के लिए परिवर्तन समारोह अनुकरण के एक तरीका है. दूसरे विकल्प के लिए jqTransform प्लगइन ही संशोधित करने के लिए ठीक से 'चुनें' बक्से के onchange घटना का उपयोग है. मुझे आशा है कि jqTransform प्लग में डेवलपर्स अपने प्लग - इन की अगली रिलीज में इस समस्या को ठीक कर सकते हैं. हालांकि यह एक बहुत ही महत्वपूर्ण है या आम बग नहीं है, लेकिन मुझे आशा है कि यह कुछ मदद की थी.

टैग: सीएसएस , रूपों , jqTransform , jQuery
में पोस्ट ट्यूटोरियल | 71 टिप्पणियाँ »

प्रोएक्टिव समाधान ब्रिटेन

शनिवार, दिसंबर 19 वीं, 2009

बक डिजाइन लिमिटेड एक एकल पृष्ठ वेबसाइट अपने नए ग्राहक, प्रोएक्टिव समाधान के लिए विकसित करना चाहता था . इस एकल पृष्ठ वेबसाइट जो सिर्फ कंपनी के बारे में सम्पर्क करने का विवरण शामिल होगा एक ऑनलाइन व्यापार कार्ड के रूप में कार्य करेगा.

चैलेंज

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

समाधान

वेबपेज के डिजाइन एक विशेष संकल्प के लिए बनाया गया था. लेकिन वेब पृष्ठों स्क्रीन प्रस्तावों की एक किस्म में देखा जा सकता है है. अब अगर कंप्यूटर के स्क्रीन संकल्प के लिए डिज़ाइन किया एक से अधिक था, तो जाहिर सार नीले बॉक्स लोगो से दूर कदम के रूप में यह ब्राउज़र के ठीक किनारे करने के लिए संलग्न किया जाना चाहिए होगा.

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

टैग: सीएसएस , XHTML / सीएसएस करने के लिए PSD
में पोस्ट पोर्टफोलियो | नहीं टिप्पणियाँ »

'हे Brien और Carr वेबसाइट

मंगलवार, दिसंबर 1, 2009

'हे Brien और Carr वेबसाइट एक साफ व्यावसायिक ब्रोशर वेबसाइट है जो भी एक PHP आधारित गैलरी के होते है . BuckDesign स्टूडियोज उनके डिजाइन करने के लिए एक पूरी तरह से काम वेबसाइट में तब्दील हो जो बहुत तेजी से लोड करने के लिए और उपयोगकर्ता के अनुकूल होगा चाहता था जब यह अपलोड छवियों के लिए आया था गैलरी में. हम के लिए अतिरिक्त समय और एक बहुत संतुष्ट ग्राहक के भार के साथ लक्ष्य हासिल की.

टैग: सीएसएस , XHTML / सीएसएस करने के लिए PSD
में पोस्ट पोर्टफोलियो | नहीं टिप्पणियाँ »

आपके चहचहाना फ़ीड प्रदर्शन सीएसएस बॉक्स का उपयोग करके ऊपर स्पाइस

शुक्रवार, अक्टूबर 23, 2009

अब एक बहुत लंबे समय के लिए वहाँ वेबसाइट साइडबार, पाद लेख या शीर्ष लेख पर प्रदर्शित tweets के इस प्रवृत्ति किया गया है. कई डिजाइनरों सुंदर नेत्र पकड़ने उन्हें युक्त चित्र बनाने के द्वारा tweets प्रदर्शित करने के सरल तरीके से डिजाइन किया गया है. उन्हें नेत्रहीन आकर्षक बनाने का मुख्य उद्देश्य है ताकि आगंतुकों को दिलचस्पी पाने के लिए और है कि साइट के मालिक प्रदान कर रहा है ताजा अद्यतन पढ़ सकते हैं. इस ट्यूटोरियल के लिए जा रहा है तुम क्या करने के लिए सक्षम है अपने चहचहाना फ़ीड प्रदर्शन बॉक्स इंटरैक्टिव ताकि आपके आगंतुकों जाना 'वाह कर सकते हैं! यह बहुत अच्छा है जब वे अपनी साइट पर जाएँ या अपने फ़ीड्स पढ़ने के '. तो यहाँ यह जाता है:

चरण 1. मैं अपनी वेबसाइट में कैसे सम्मिलित फ़ीड?

अपनी वेबसाइट में अपने कलरव खाते फ़ीड डालने मुश्किल हो सकता है. यह एक अच्छी बात है वहाँ बाहर इतने सारे ट्यूटोरियल है जो आप आसानी से इन फ़ीड्स डालने के ज्ञान के साथ प्रदान कर रहे हैं. यहाँ कुछ संसाधनों जो तुम चहचहाना से अपने बहुत ही साइट पर फ़ीड प्राप्त करने के लिए सक्षम हो जाएगा रहे हैं:

1. चहचहाना अपडेट के लिए एक अद्वितीय पेज डिजाइनिंग
2. 10 विस्मयकारी तरीके अपनी वेबसाइट के साथ चहचहाना एकीकृत करने के लिए
3. कलरव!

WordPress उपयोगकर्ताओं को कुछ भयानक plugins का उपयोग करने के लिए अपनी साइट पर अपने ट्विटर फ़ीड प्राप्त कर सकते हैं:

एक WordPress के लिए 35 विस्मयकारी चहचहाना प्लगइन्स
2. Juitter
3. चहचहाना के लिए jQuery प्लगइन

चरण 2. छवि प्रेत बनाना.

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

हमारा प्राथमिक उद्देश्य क्या है कि जब कभी उपयोगकर्ता मंडराना ट्विटर फ़ीड बॉक्स पर है, कुछ कार्रवाई करने के लिए जगह ले जा रहा है. हमारे मामले में चहचहाना पक्षी उपयोगकर्ता दिशा में दिखेगा.

आप विभिन्न चहचहाना जो वेब समुदाय के साथ अपने काम साझा प्यार कुछ अद्भुत डिजाइनरों द्वारा बनाई गई माउस का उपयोग इस तरह डिजाइन बना सकते हैं. यहाँ इन चिह्न के लिए एक परम स्रोत है.

100 + उल्लेखनीय सुंदर चहचहाना प्रतीक और बटन (हमेशा के लिए इन चिह्न का उपयोग करने से पहले डिजाइनर पहले पूछना याद है.)
ProductiveDreams.com द्वारा मुफ्त सदिश सेट आइकन

मैं ProductiveDreams द्वारा बनाया माउस का इस्तेमाल किया है. Photoshop में एक सरल बॉक्स बनाने के बाद. यानी पक्षी के क्रॉस अनुभागीय दृश्य के साथ एक सामान्य चहचहाना पक्षी आइकन ऐसी है कि पक्षी बॉक्स के अंदर देख प्रतीत होता है बॉक्स के नीचे सही पक्ष पर, प्लेस. अब अन्य चहचहाना पक्षी आइकन, जो दिखाई देता है दर्शक की ओर देख रहे हो पेस्ट करें.

फिर बड़े चिह्न जो आप ऐसी है कि यह एक दो सिरों चहचहाना पक्षी की तरह दिखाई देता है के रूप में नीचे दिखाया बॉक्स के नीचे दायें कोने पर रखा से ऊपर झुका पक्षी आइकन धक्का

अब झुका चहचहाना पक्षी आइकन को छिपाने के लिए और ठीक से एक वर्ग सामान्य चहचहाना गाइड लाइनों का उपयोग पक्षी युक्त निशान. यकीन है कि दोनों झुका और सामान्य पक्षी दिशानिर्देशों द्वारा किए गए एक ही वर्ग में ठीक से फिट.

छवि फसल और दिशा निर्देशों के साथ सामान्य चहचहाना पक्षी आइकन के साथ एक नई फ़ाइल खोलने और यह वहाँ पेस्ट करें. फिर फसली छवि की ऊंचाई की जाँच करें और उस राशि से कैनवास आकार खड़ी वृद्धि. यह किया जाता है ताकि आप एक ही कैनवास पर झुका चहचहाना पक्षी संस्करण पेस्ट छवि प्रेत को अंतिम रूप दे सकते हैं.

सामान्य चहचहाना पक्षी आइकन छिपाएँ और अन्य झुका पक्षी दिखाई. फिर छवि को फिर से फसल गाइड लाइन बस के रूप में आप पिछले छवि के लिए किया था के साथ. छवि की प्रतिलिपि बनाएँ और नव निर्मित कैनवास जहाँ आप अन्य छवि चिपकाया पर चिपकाएँ. छवियों को समायोजित इतना है कि वे ठीक से पूरे कैनवास फिट. आपकी छवि प्रेत उपयोग के लिए तैयार है और इस तरह दिखना चाहिए:

चरण 3. जीवन के लिए पक्षी कोडिंग!

चहचहाना फ़ीड बॉक्स के html कंकाल एक साधारण एक होने जा रहा है. वहाँ एक मुख्य कंटेनर चहचहाना फ़ीड, पक्षी और एक वैकल्पिक "मुझे का पालन करें" लिंक युक्त div होगा.

 < div id = " चहचहाना " >
	 < a href = " http://twitter.com/SumeetChawla&quot, आईडी = " चहचहाना लिंक " > मुझे का पालन करें < / a & gt ;
	 < div id = " चहचहाना - पक्षी " > < / div >
	 < - आपके चहचहाना फ़ीड यहाँ आता है! >
 < / div >

'#' चहचहाना कंटेनर div के लिए सीएसएस बहुत सरल है. '# चहचहाना पक्षी' div पक्षी होते जा रहा है. यह मूल प्रेत की आधी ऊंचाई हम बनाया क्योंकि प्रेत में दो छवियों के केवल एक प्रदर्शित किया जाएगा चाहिए. सीएसएस sprites का उपयोग करना एक अच्छा अभ्यास है क्योंकि यह सर्वर अनुरोधों को कम कर देता है, इसलिए लोड समय घट जाती है और छवि का अचानक चमक से बचाता है जब पहली बार के लिए पर hovered है.

चहचहाना पक्षी div सही करने के लिए जारी किया जाना चाहिए और एक नकारात्मक मार्जिन को सौंपा जाना चाहिए ताकि पक्षी क्या कंटेनर div के बाहर कुछ प्रतीत होता है. पृष्ठभूमि स्थिति इतनी 'ऊपर' है कि सामान्य चहचहाना पक्षी प्रदर्शित किया जाता है बनाओ. हमारे चहचहाना फ़ीड बॉक्स के लिए परिष्करण छू दे, बस 'सबसे नीचे' के लिए 'चहचहाना पक्षी' div पृष्ठभूमि छवि स्थिति बदल जब कभी कंटेनर div अधिक उपयोगकर्ता hovers.

 # चहचहाना {
	 color: # 658097;
	 स्थिति: रिश्तेदार;
	 चौड़ाई: 332px;
	 ऊँचाई: 122px;
	 पृष्ठभूमि रंग: # 1f1f1f;
	 सीमा: ठोस 1px 414040 #;
	 पृष्ठभूमि स्थिति: छोड़ दिया नीचे;
	 पृष्ठभूमि - दोहराने: नहीं दोहराने;
	 पैडिंग - बाएँ: 10px;
	 पैडिंग - शीर्ष: 10px;
 }
 # चहचहाना - पक्षी {
	 पृष्ठभूमि छवि: url ('छवियाँ / twitter.jpg');
	 पृष्ठभूमि की स्थिति: शीर्ष;
	 स्थिति: रिश्तेदार;
	 फ्लोट: सही;
	 मार्जिन टॉप: 32px;
	 मार्जिन - सही: 75px-;
	 चौड़ाई: 101px;
	 ऊँचाई: 100px;
	 पृष्ठभूमि - दोहराने: नहीं दोहराने;
 }
 # चहचहाना: मंडराना # चहचहाना पक्षी {
	 पृष्ठभूमि - स्थिति: नीचे;
 }

देखो कैसे अंतिम परिणाम की तरह लग रही होगी, बस इस पृष्ठ के तल पर पाद लेख के लिए नीचे स्क्रॉल.

उदाहरण

गोपाल राजू से ProductiveDreams बना दिया है अपने ट्विटर फ़ीड बहुत ही जीवंत और चमकदार लग रही है. चहचहाना पक्षी एक बहुत दोस्ताना और आरामदायक रास्ते में सहभागी है. यह winks और अनुयायियों है कि वह है की कुल संख्या प्रदर्शित करता है.

मँडरा इससे पहले:

बाद हॉवर:

यह केवल साइट मुझे मिल सकता है जो चहचहाना फ़ीड बॉक्स इंटरैक्टिव बनाया था. यदि आप लोगों को किसी भी अन्य साइट है जो इस प्रकार इस प्रवृत्ति सिर्फ टिप्पणी में इसके बारे में पोस्ट खोजने के लिए और मैं इसे यहाँ जोड़ने के लिए सुनिश्चित कर देगा.

टैग: सीएसएस , प्रदर्शन फ़ीड , फ़ीड , कैसे करने के लिए , प्रेत , चहचहाना
में पोस्ट ब्लॉग , ट्यूटोरियल | 15 टिप्पणियाँ »

कैसे एक अतिव्यापी Tabbed मुख्य मेनू कोड

बुधवार, 14th अक्टूबर, 2009

वहाँ एक tabbed नेविगेशन मेनू बनाने के विभिन्न शैलियों और तकनीकों रहे हैं और उनमें से एक tabbed overlaying या छा शैली है जिसमें प्रत्येक टैब पर झूठ बोल दूसरे को हो सकता है और इसलिए पूरे मेनू एक बहुत यथार्थवादी महसूस दे प्रकट होता है. जबकि मेरी साइट डिजाइनिंग, मैं प्रेरणा और tutorials के बहुत के माध्यम से चला गया. उनमें से एक था यह कहा जाता है ट्यूटोरियल से फ़ोटोशॉप कागज बनावट तो स्क्रैच इसके साथ एक grungy वेब डिजाइन बनाएँ! से Collis द्वारा लिखित NetTuts.com यह समाप्त अपनी साइट के लिए मुख्य प्रेरणा जा रहा है और जबकि ट्यूटोरियल के माध्यम से जा रहा मैं Collis पाया कह है कि:

"अब अगर मैं ऐसा कहते हैं कि अपने आप को इन टैब भयानक लग रही है, और कारण है कि वे करते है क्योंकि वे ओवरलैप. दुर्भाग्य से यह भी उन्हें करने के लिए HTML में साथ काम कठिन बना देता है. लेकिन आप पारदर्शी PNGs के साथ चीजों की एक किस्म कर सकते हैं, या एकांतर बस rollovers में पाठ बदलने के लिए रंग बनाने के लिए टैब रंग बदलने के बारे में चिंता करने की ज़रूरत नहीं है और. किसी भी तरह यह इस ट्यूटोरियल के दायरे से परे एक सा है . इतना कहना मेनू एक बिट का निर्माण करने के लिए मुश्किल हो सकता है. "

तो मैं HTML में एक कोडन की कोशिश की और मैं सफल करने के बाद यह आप सभी के साथ साझा करने के बारे में सोचा.

1.Gearing चरण

तो html / सीएसएस कोड में एक tabbed नेविगेशन के इस तरह के कोड शुरू करने से पहले, आप पहली बार जानने के लिए कैसे बनाने के लिए एक फ़ोटोशॉप पहला में है. उपरोक्त ट्यूटोरियल बहुत विस्तृत है और Collis कैसे Photoshop में इस तरह के किसी मेनू का निर्माण करने के लिए शिक्षण में एक महान काम करता है. मैं एक साधारण एक विशेष रूप से इस ट्यूटोरियल के लिए बनाया है.

अब मुझे निर्दिष्ट है कि वहाँ tab.The निष्क्रिय राज्य के तीन राज्यों में भूरा रंग है, सक्रिय राज्य गहरे नीले रंग का है और हॉवर राज्य प्रकाश इस्पात नीला रंग है. इसलिए, प्रत्येक टैब के लिए तीन छवियों टुकड़ा करने की क्रिया के बजाय, हम बाहर एक छवि प्रेत टुकड़ा कर सकते हैं.

चरण 2. PSD से टैब टुकड़ा करने की क्रिया

खड़ी ग्रिड का उपयोग कर के रूप में ऊपर छवि में दिखाया गया है टैब्स संरेखित करें. तुम भी टैब क्षैतिज बजाय खड़ी की तुलना में संरेखित कर सकते हैं लेकिन फिर सीएसएस पृष्ठभूमि छवि एक अलग तरह की स्थिति में पहुँचा जा जाएगा. पसंद के व्यक्ति को दूसरे व्यक्ति के लिए निर्भर करता है लेकिन दोनों काम पूरी तरह से. जबकि फसल छवि दिशा निर्देशों का ठीक से पालन करें और ध्यान दें कि मैं पारदर्शी पृष्ठभूमि बना दिया है क्योंकि हम एक पारदर्शी पृष्ठभूमि की जरूरत हो जाएगा अगर हम टैब्स ओवरलैप की जरूरत है. छवि फसल और यह PNG24 प्रारूप में वेब को बचाने के लिए. एक बिंदु करने के लिए ध्यान दें जबकि छवियों टुकड़ा करने की क्रिया है कि 'होम' टैब यानी प्रथम टैब निष्क्रिय राज्य में अपने बाएँ किनारे पर किसी भी छाया नहीं कर होना चाहिए. इसलिए, कि विशिष्ट टैब के लिए हम में छाया के बिना एक प्रेत बनाने की है.

चरण 3. दूर कोड

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

 <DOCTYPE html सार्वजनिक "- / / / / DTD XHTML 1.0 संक्रमणकालीन / / EN" डब्ल्यू .3 सी.! "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>
 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
 <link href="css/styles.css" rel="stylesheet" type="text/css" />
 </ सिर>

 <body>
	 <div id="page-wrap">
		 <ul id="main-nav">
			 <li class="current"> <a href="index.html"> होम </ a> </ li>
			 <li class="portfolio"> <a href="portfolio.html"> पोर्टफोलियो </ a> </ li>
			 class="services"> <li <a href="services.html"> सेवा </ a> </ li>
			 हमारे बारे में <li class="about"> <a href="about.html"> </ a> </ li>
			 <li class="contact"> <a href="contact.html"> संपर्क </ a> </ li>
		 </ Ul>
		 class="clear"> <div </ div>
		 <div id="featured">
			 <div id="featured-content">
			 </ Div>
		 </ Div>
	 </ Div>
 </ Body>

 </ Html>

चलो हमारे मुख्य नेविगेशन मेनू में देखो. मैं किसी भी अन्य नेविगेशन पट्टी के रूप में एक साधारण unordered सूची का इस्तेमाल किया है और यह सूची हाइपरलिंक टैग के लिए एक पृष्ठभूमि छवि का उपयोग स्टाइल.

 <ul id="main-nav">
	 <li class="current"> <a href="index.html"> होम </ a> </ li>
	 <li class="portfolio"> <a href="portfolio.html"> पोर्टफोलियो </ a> </ li>
	 class="services"> <li <a href="services.html"> सेवा </ a> </ li>
	 हमारे बारे में <li class="about"> <a href="about.html"> </ a> </ li>
	 <li class="contact"> <a href="contact.html"> संपर्क </ a> </ li>
 </ Ul>

 उल # मुख्य नव ली {
	 फ्लोट: छोड़ा;
	 स्थिति: रिश्तेदार;
	 प्रदर्शन: इनलाइन;
 }

याद रखें कि हम जो में सबसे ऊपर टैब सक्रिय राज्य का प्रतिनिधित्व करता है टैब के लिए एक छवि प्रेत का उपयोग कर रहे हैं, मध्य निष्क्रिय राज्य का प्रतिनिधित्व करता है और नीचे मंडराना राज्य का प्रतिनिधित्व करता है. इसलिए, हम ठीक से निम्नानुसार उनके संबंधित राज्य के लिए छवियों जगह 'पृष्ठभूमि स्थिति की संपत्ति का उपयोग करें:

 उल # मुख्य नव ली एक {
	 स्थिति: रिश्तेदार;
	 चौड़ाई: 110px;
	 ऊँचाई: 29px;
	 प्रदर्शन: ब्लॉक;
	 पृष्ठभूमि छवि: url ('../ छवियों / 'tabs.png);
	 पृष्ठभूमि स्थिति: केंद्र केंद्र;
	 रंग: 44403b #;
	 पाठ - सजावट: कोई नहीं;
	 फ़ॉन्ट आकार: 14px;
	 पैडिंग - शीर्ष: 12px;
	 पाठ align: left;
	 पैडिंग - बाएँ: 30px;
	 font-वजन: बोल्ड;
 }
 उल # मुख्य नव li.home एक {
	 पृष्ठभूमि छवि: url ('../ छवियों / 'टैब home.png);
 }
 उल # li.current मुख्य नव {
	 पृष्ठभूमि की स्थिति: शीर्ष;
	 रंग: # FFFFFF;
 }
 उल मुख्य नव # ली एक: मंडराना {
	 पृष्ठभूमि - स्थिति: नीचे;
	 रंग: # FFFFFF;
 }
 उल मुख्य नव # li.current: मंडराना {
	 पृष्ठभूमि स्थिति: शीर्ष; / * मंडराना पर बदलते रंग से वर्तमान टैब रोकें * /
	 रंग: # FFFFFF;
 }

आप देखेंगे कि मैं सूची तत्वों के प्रत्येक के लिए एक प्रासंगिक वर्ग और वर्ग टैब है जो वर्तमान पृष्ठ के लिए है 'वर्तमान' नाम दिया है. यह किया जाता है इतना है कि मैं अलग z-सूचकांक मान ऐसी है कि प्रत्येक टैब यह निम्नलिखित टैब की तुलना में एक उच्च z-अक्ष पर स्थित है एक आरोही क्रम में प्रत्येक टैब के लिए असाइन कर सकते हैं. 'वर्तमान' वर्ग के साथ टैब z-अक्ष के सर्वोच्च क्रम पर झूठ है क्योंकि यह वर्तमान पृष्ठ का प्रतिनिधित्व करता है और हमेशा सूची में यह स्थिति के शीर्ष चाहे पर रहेगी. Z-सूचकांक मूल्यों को लागू करने से पहले, सुनिश्चित करें कि सूची तत्व के लिए स्थिति विशेषता सापेक्ष सेट है. किसी भी स्थिति मूल्य के बिना z-सूचकांक संपत्ति सब पर काम नहीं करेगा.

 उल # मुख्य नव li.current {
	 z-सूचकांक: 100;
 }
 उल मुख्य नव li.home # {
	 z-सूचकांक: 100;
 }
 उल li.portfolio # मुख्य नव {
	 z-सूचकांक: 99;
 }
 उल # मुख्य नव li.services {
	 z-सूचकांक: 98;
 }
 उल # मुख्य नव li.about {
	 z-सूचकांक: 97;
 }
 उल # मुख्य - नव li.contact {
	 z-सूचकांक: 96;
 }

हालांकि हम अलग z-सूचकांक टैब में मान सौंपा है, वे अभी भी आगोश में अधिक नहीं दिखाई देते हैं और इस तरह दिखेगा:

हमारे नेविगेशन पट्टी के लिए परिष्करण छू दे, हम दूसरे के शीर्ष पर प्रत्येक टैब धक्का है. हम बाएँ से दाएँ अवरोही क्रम में z-सूचकांक मान सौंपा है. इसलिए, हम सिर्फ # मुख्य नव ली उल 'एक' नकारात्मक मार्जिन छोड़ दिया 'संपत्ति जोड़कर ठीक से प्रत्येक के बारे में अपनी बाईं ओर 20px शुरू टैब धक्का होगा और पूरे नेविगेशन पट्टी धक्का बाईं सूची unordered एक सकारात्मक 20px 'मार्जिन - बाएँ' को जोड़ने के लिए पट्टी के बाईं ओर वार्ड आंदोलन उठा देना.

 उल मुख्य नव # {
	 मार्जिन बाएँ: 20px;
 }
 उल # मुख्य नव ली {
	 फ्लोट: छोड़ा;
	 स्थिति: रिश्तेदार;
	 मार्जिन बाएँ: 20px;
	 प्रदर्शन: इनलाइन;
 }

मिशन पूरा

सभी सीएसएस और XHTML के साथ कोडांतरण के बाद, हम हमारे छा tabbed मुख्य नेविगेशन मेनू उपयोग के लिए तैयार होगा. यह कैसे एक मेनू के इस तरह बनाने के लिए पर मेरी ले जाओ और यकीन है कि वहाँ कई बेहतर तरीके के लिए भी ऐसा ही कर रहे हैं रहा हूँ था. मुझे खुशी होगी यदि आप ऐसा करने का कोई अन्य तरीका साझा या सिर्फ इस प्रक्रिया में ही कुछ सुधार पर चर्चा सकता है.
यहाँ कुछ साइट है जो अपने मुख्य नेविगेशन मेनू के रूप में नजर lapping से अधिक उपयोग कर रहे हैं:
ILove2Design.at
HiddenDepth.ie
HotCards.com

टैग: सीएसएस , कैसे , मेनू , नेविगेशन , आगोश में अधिक
में पोस्ट ब्लॉग , ट्यूटोरियल | 47 टिप्पणियाँ »

नारंगी

मंगलवार, 6 अक्टूबर, 2009

PSDTemplate.com एक महान साइट है कुछ सच में अच्छा वेबसाइट Photoshop में बनाया टेम्पलेट्स प्रदान. वे प्रीमियम PSD लेआउट जहां वे हर दिन एक लेआउट रिहाई के एक खंड है. उन्होंने यह भी एक मुक्त PSD लेआउट अनुभाग जहां वे अच्छी गुणवत्ता उपलब्ध लेआउट निःशुल्क जारी है. वे एक मुक्त PSD टेम्पलेट्स में से एक के रूप में ऑरेंज जारी की है और हम इसे कोडित है इतना है कि जो लोग इस भयानक टेम्पलेट के संस्करण xHTML / सीएसएस चाहते हैं वह भी हो सकता है!

टैग: सीएसएस , मुफ्त , PSD , टेम्पलेट , XHTML
में पोस्ट ब्लॉग , डाउनलोड , पोर्टफोलियो | 4 टिप्पणियाँ »

प्यार की गर्मी

सोमवार, सितंबर 28th, 2009

SloDive हाल ही में एक नाम लेख पोस्ट 40 मुफ्त PSD वेबसाइट टेम्पलेट्स . यह डिजाइनरों के लिए एक उत्कृष्ट संसाधन है जो उनके डिजाइन की प्रक्रिया के साथ खरोंच से या डेवलपर्स जो डिजाइन में बहुत अच्छा नहीं कर रहे हैं के लिए शुरू नहीं करना चाहता है. यह xHTML / सीएसएस टेम्पलेट है कि हम तुम लोगों के लिए कोडित है आसानी से किसी भी सामग्री प्रबंधन प्रणाली के साथ एकीकृत किया जा सकता है. यह विशुद्ध रूप से तालिका कम और शब्दार्थ एसईओ प्रयोजनों के लिए सही है. आगे बढ़ो, इसे डाउनलोड करने और अपने खुद के बैंड शुरू या एक संगीत समारोह का आयोजन!

टैग: सीएसएस , मुफ्त , PSD , टेम्पलेट , XHTML
में पोस्ट ब्लॉग , डाउनलोड , पोर्टफोलियो | 7 टिप्पणियाँ »

व्यापार खाका

मंगलवार, 1 सितंबर, 2009

व्यापार एक मुक्त PSD द्वारा डिजाइन टेम्पलेट टेम्पलेट है Dellustrations और पर डाउनलोड के लिए उपलब्ध है DelliBlog . हम लोग हैं, जो PSD टेम्पलेट के साथ कोड को डाउनलोड करना चाहते हैं के लिए मान्य xHTML / सीएसएस कोड में इस PSD टेम्पलेट बदल दिया.

टैग: सीएसएस , मुफ्त , PSD , टेम्पलेट , XHTML
में पोस्ट ब्लॉग , डाउनलोड , पोर्टफोलियो | 16 टिप्पणियाँ »