CSS को साथ छवि नक्शा कसरी निर्माण गर्ने

विकल्पहरू

मलाई केहि 'geeky' चाहिएको थियो त्यसैले मैले 'पकेट' ग्राफिकमा निर्णय गरे जुन मेरो ब्लगको लागि सबै सदस्यता विधिहरू राख्छ।

वेब १.० को दिनहरूमा, यस प्रकारको लिंकको संग्रह तपाईंको चित्रलाई प्रत्येक ग्राफिकमा लिंकको साथ स्प्लिग गरेर निर्माण गर्न सकिन्छ, त्यसपछि यसलाई पछाडि टेबलको साथ सिलाउने प्रयास गर्दै। यो पनि एक प्रयोग गरेर पूरा गर्न सकिन्छ छवि नक्शा तर सामान्यतया यो संयोजक प्रणाली निर्माण गर्न उपकरण चाहिन्छ। कास्केडि Style्ग स्टाइल शिटहरूको प्रयोगले यसलाई एक टन सजिलो बनाउँदछ ... कुनै छुटाउने छविहरू र तपाईंको समन्वय प्रणाली निर्माण गर्न कुनै उपकरण फेला पार्न कुनै प्रयास गरिरहेको छैन!

  1. तपाइँको छवि बनाउनुहोस् जुन तपाइँ प्रयोग गर्न चाहानुहुन्छ। तपाईं तल यस ग्राफिक को उपयोग गर्न सक्नुहुनेछ (दायाँ क्लिक गर्नुहोस् र डाउनलोड गर्न को लागी बचत गर्नुहोस्):
    विकल्प
  2. तपाइँको छवि एक निर्देशिकामा अपलोड गर्नुहोस् जुन तपाइँको CSS मा सम्बन्धित छ। WordPress मा, यो तपाईंको विषयवस्तु डाइरेक्टरीमा छवि फोल्डरमा राखेर सजिलो गर्न सकिन्छ।
  3. तपाईको HTML थप्नुहोस्। यो राम्रो र सरल छ ... यसमा तीन लि with्कको साथ डिभ:
    > div id = "सदस्यता">> एक आईडी = "आरएसएस" href = "[तपाईंको फिड लिंक]" शीर्षक = "आरएसएसको साथ सदस्यता लिनुहोस्" >> span वर्ग = "लुकाउनुहोस्"> आरएसएस> / स्पान </ a>> एक आईडी = "ईमेल" href = "[तपाईको ईमेल सदस्यता लि ]्क]" शीर्षक = "ईमेलको साथ सदस्यता लिनुहोस्" >> span वर्ग = "लुकाउनुहोस्"> ईमेल> / स्पान </ a>> एक आईडी = "मोबाइल" href = "[तपाईको मोबाइल लि ]्क]" शीर्षक = "मोबाइल संस्करण हेर्नुहोस्" >> स्पेन वर्ग = "लुकाउनुहोस्"> मोबाइल> / स्पान </ a>> / div>
    
  4. तपाईंको कास्केडि Style्ग शैली पाना सम्पादन गर्नुहोस्। तपाईं different अलग शैलिहरू थप गर्नुहुनेछ। समग्र डिभका लागि १ शैली, ट्यागको लागि १, त्यसैले यसले कुनै पाठ सजावट प्रदर्शन गर्दैन, १ लुकाउनको लागि १ शैली (पहुँचका लागि प्रयोग गरिएको) र प्रत्येक लिंकका लागि १ शैली विशिष्टता:
    # सदस्यता {/ * पृष्ठभूमि छवि ब्लक * / प्रदर्शन: ब्लक; चौडाई: २१215px; उचाई: p०px; पृष्ठभूमि: url (छविहरू / विकल्प.png) नो-रिपिट; मार्जिन-शीर्ष: ० px; s # सदस्यता एक-पाठ सजावट: कुनै पनि होइन; h .hide {दृश्यता: लुकाइएको; } #rss {/ * RSS लिंक * / फ्लोट: बाँया; स्थिति: निरपेक्ष; चौडाई: p०px; उचाई: p०px; मार्जिन-बाँया: २०px; मार्जिन-शीर्ष: ppx; } # ईमेल {/ * ईमेल लिंक * / फ्लोट: बाँया; स्थिति: निरपेक्ष; चौडाई: p०px; उचाई: p०px; मार्जिन-बाँया: p०px; मार्जिन-शीर्ष: ppx; } # मोबाइल {/ * मोबाइल लिंक * / फ्लोट: बाँया; स्थिति: निरपेक्ष; चौडाई: p०px; उचाई: p०px; मार्जिन-बाँया: १p०px; मार्जिन-शीर्ष: ppx; }

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

यो "कसरी गर्ने" पोष्ट यसमा प्रवेशका लागि हो Geeks सेक्सी परम "कसरी गर्ने" प्रतियोगिता हो! एउटा नोट, यो सत्य हो कि छवि नक्शामा धेरै अधिक जटिल बहुभुजहरू हुन सक्छन्, तर मैले वास्तवमै त्यहाँ धेरै ठाउँहरू देखेको छैन जहाँ त्यो हुनु पर्छ। मैले याद गरे कि ठुलो ओएल 'आरएसएस छवि गीक्समा सेक्सी साइडबार हो ... कि लिंकको लागि राम्रो स्थान हो। 😉

अद्यावधिक १०/10/२००3 को सल्लाहको साथ राम्रो पहुँचको लागि फिल!

प्रायोजक: यदि तपाईं वेब डिजाइनको नयाँ हुनुहुन्छ भने, त्यसपछि तपाईंको आफ्नै वेब साइट बनाउनुहोस् सही तरिका HTML र CSS प्रयोग गरेर, दोस्रो संस्करण अवश्य हुनै पर्छ। यस सजिलो-फलो-गाईडमा तपाई कसरी वेब साइट निर्माण गर्ने सिक्नुहुन्छ उत्तम तरिका - यो आफैं गरेर!

41 टिप्पणिहरु

  1. 1

    डग, त्यो एक राम्रो विधि जस्तो देखिन्छ, तर यो धेरै दुर्गम हो।

    स्क्रिन रिडर भएको अन्धा प्रयोगकर्तालाई हेर्नुहोस्, पाठ मात्र ब्राउजर भएको प्रयोगकर्ता वा CSS वा छविहरू बिना साइटको भ्रमण गर्ने कोही सक्षम (जस्तै, सायद कुनै मोबाइल प्रयोगकर्ताले तपाईंको मोबाइल अनुकूल साइटमा लिंक खोज्दै)। तिनीहरू मध्ये कुनैलाई पनि ती तीन लि links्कहरूको बारेमा थाहा हुँदैन किनभने तिनीहरूसँग कुनै पाठ छैन। यदि छविहरू बन्द छन् भने प्रयोगकर्ताले यहाँसम्म के हुने थियो वर्णन गर्न एलएल टेक्स्ट पनि देख्दैन किनकि यो पृष्ठभूमि छवि हो।

    छविहरूलाई टुक्राउन, लि link्क गर्न, तिनीहरूलाई सूचीमा राख्नु र एक अर्कोको छेउमा तैरनु राम्रो हुन्छ। वा लि the्कहरूको लागि पाठ प्रयोग गर्नुहोस् र मानक छवि प्रतिस्थापन प्रविधि प्रयोग गरेर पाठ बदल्नुहोस्। यो सुविधाजनक देखिन्छ, तर यसले चीजहरूलाई धेरै कडा / असम्भव बनाउँदछ मानक स्ट्राफिक ब्राउजर प्रयोग नगर्नेहरूको लागि।

    • 2

      म बिस्तारै (तपाईं अधिक विशेषज्ञता भएकोले) असहमत हुन्छ, फिल, प्रत्येक लिंकको एक शीर्षक छ त्यसैले प्रत्येक पूर्ण पहुँच योग्य छ। पाठ शीर्षकहरू पढ्नु भनेको पहुँच अनुप्रयोगहरूको क्षमता जस्तै JAWS हो। यहाँ छ लिंकमा शीर्षकहरू र पहुँचमा यसको प्रभावमा राम्रो पोस्ट.

      • 3

        डग,

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

        पाठ ब्राउजरहरूको लागि लेख तपाईले मलाई त्यस लिंक्सतर्फ औंल्याउनुभयो तर लिंक लिंकको सूची पनि ल्याउन मद्दत पुर्‍याउँछ, तर मेरो कुरा भने रहन्छ कि यदि तपाईंलाई थाहा थिएन भने त्यहाँ त्यहाँ लिंक थियो, किनकि त्यहाँ कुनै पाठ पहिलो स्थानमा थिएन। , तपाईं शीर्षक पाठ किन हेर्नुहुन्छ?

        अन्तमा, लिंक शीर्षक एट्रिब्युट अझै पनि कसैको लागि सक्षम हुँदैन छविहरू बिना वा CSS सक्षम बिना ब्राउज गर्दै।

        यसैले हो, शिर्षकको साथ लिंक बिना बाहेक राम्रो हुन्छ, तर यस अवस्थामा यो केवल सीमान्त हुन्छ।

        यो त किन छवि प्रयोग गर्दा, ताकि Alt पाठ पढ्न सकिन्छ, वा छवि प्रतिस्थापन, ताकि पाठ त्यहाँ छ, एक धेरै सुरक्षित, अधिक सुलभ र अधिक प्रयोग योग्य विकल्प हो।

        • 4

          राम्रो जानकारी, फिल म पाठको साथ यसलाई विस्तार गर्ने प्रयास गर्दैछु तर केवल पाठ लुकाउनुहोस् - त्यसरीच JAWS जस्तो पहुँचयोग्य उत्पादनले लिंक पाठ पढ्नेछ र यदि CSS वा छविहरू असक्षम पारिएमा पाठ प्रदर्शित हुन्छ।

          म असहमत छु कि एक मात्र पहुँचयोग्य समाधान लि link्कको साथ छवि राख्नु हो, यद्यपि।

  2. 5
    • 6
      • 7

        यो त्यस्तो चीज हो जुन हामी प्रायः ध्यान दिदैनौं, फिल! साथै, तपाईंको अनुप्रयोगलाई पहुँच योग्य बनाउँदा राम्रो खोज इञ्जिनको नतीजाहरू पनि हुन्छन्।

        मँ वास्तव मा विशेषज्ञता र प्रतिक्रिया प्रशंसा!

  3. 8

    मैले यो चोरे। त्यहाँ मैले भने।

    डग, ग्राफिक्स शानदार छ र कोडिंग यति अविश्वसनीय सरल छ कि यसले मलाई डराउँदछ (CSS मा खेलिरहेको छ र अब म अन्तमा "यसलाई प्राप्त गर्छु")।

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

    मैले भर्खरै तपाईंलाई त्यो कफी किन्नुपर्ला!

  4. 10

    डग,

    म एक उदाहरण को रूप मा मेरो अनुभव प्रयोग गरी एक असहमत आवाज हुन जाँदैछु। म हाम्रा ईमेलहरू सम्झन्छु जब मेरो घरको ईमेल परिवर्तन भयो र तपाईंले याद गर्नुभयो कि मैले भर्खर मेरो नयाँसँग अप्ट इन गर्नुपर्‍यो। तपाइँले स्वीकार्नुपर्दछ कि मसँग तपाइँको साइटमा नयाँ सुविधा फेरी अप्ट इन गर्नका लागि "खोज्ने" समयको हेक थियो। यसको अंश यो थियो कि किनभने मूल लिंक थोरै परम्परागत थियो र म अस्पष्ट रूपमा त्यो एक सम्झन्छु। अर्को किन भने सडक छेउमा आधा खाम मेरो जस्तो लाग्दैनथ्यो। करीव or वा अधिक मिनेट पछि मैले हरेक छविमा माउस रोलिंग गर्न सुरु गरें र जब "ईमेलको साथ सदस्यता लिनुहोस्" शीर्षक देखा पर्‍यो, तब मलाई थाहा थियो कि म व्यापारमा छु। मेरो दिमागले पनि लि the्क तस्वीर के हो भनेर पत्ता लगायो।

    तर कम्तिमा मेरो लागि, सडक छेउको खाम मेरो लागि ईमेल सूचनाहरूको सदस्यता लिने ठाउँको रूपमा सहज थिएन। र (किनभने मलाई जहिले पनि केहि राम्रो चीजको साथ अन्त गर्न भनियो) म माथि फिलसँग सहमत छु; विधि वास्तवमै सरल छ र सम्पूर्ण आईटमले ठूलो काम गर्दछ। म यो तपाईंको डिजाइन उपकरण ले तपाईंलाई sections खण्डहरूको लागि सटीक आयामहरू दिन मद्दत गर्दछ; के यो सही धारणा हो? मैले यो मान्नुपर्दछ, किनकि यदि मैले भनेको थियो, p०० पिक्सेल चौडा छवि मैले सहि सेटिंग्स आदि जान्नु आवश्यक पर्दछ।

  5. 12
    • 13

      विलियम,

      यस्तो देखिन्छ कि तपाईको टिप्पणी वर्ग नाम र साइडबार ग्राफिकमा वर्ग नामहरू बीच द्वन्द्व हुन सक्छ। तपाईं द्वन्द्व खाली गर्न उनीहरूलाई फरक नाम दिन सक्नुहुन्छ। मलाई थाहा दिनुहोस् यदि तपाईंलाई एक हात चाहिन्छ भने!

      डग

  6. 14

    सबै चीज दुबै एफएफ र आईई दुबैमा काम गरिरहेको छ जस्तो देखिन्छ ... मलाई लाग्छ तपाईं साईटमा हुनुभएको हुन सक्छ जब म प्लगइन ट्वीक गर्न कोशिस गर्दै थिएँ जुन एकदम काम गरिरहेको थिएन ... 😉

  7. 15
  8. 16
  9. 17
  10. 18

    राम्रो दृष्टिकोण, तर मलाई टोपोग्राफिक नक्शाको लागि केहि चीज चाहिन्छ, त्यसैले म आयत क्षेत्रहरू प्रयोग गर्न सक्दिन ... मलाई लाग्छ कि मैले समन्वयको साथ पुरानो शैलीको इमेजम्याप प्रयोग गर्नुपर्नेछ, तर मँ अलि बढी गहिराइ खन्नेछु ...

  11. 19

    यस जानकारीका लागि धन्यबाद, डग। म पहिले यहाँ थिएँ र तपाईंले यो कसरी गर्नुभयो भनेर अचम्म लाग्यो। हामी हाम्रो पोस्ट पछि घुसाउनको लागि त्यस्तै नक्शा सिर्जना गर्न चाहन्थ्यौं, र अब हामीसँग साधन छ भने हामी यो गर्न सक्दछौं। ब्राभो!

  12. 20
  13. 21

    नमस्ते डग,
    मैले अघिल्लो टिप्पणी छोडे तर मैले यो महसुस गरें कि मैले मेरो दुविधामा कतै अन्तरदृष्टि प्रस्ताव गरेको थिएँ। हामी यहाँ हाम्रो अनलाइन सिटकम सुरु गर्न मद्दतको लागि एक वर्डप्रेस विषयवस्तु अनुकूलन गर्दै छौं:

    http://www.phaylen.com/blog/

    अब तपाईले देख्नुहुनेछ हामी माथि नेभिगेसन ब्यानर छ, जुन छवि हामीले नक्सा गर्न चाहेको थियो जुन हामी दर्जनौं पटक पहिले देखेका छौं। / پامफोरहाड। हामीमध्ये कोही पनि वास्तवमा सीएसएसलाई अनजानमा लिन्छौं, तर हामी यथेष्ट हिसाबले ठक्कर खायौं र यति सम्म यस बिन्दुमा ठिक पारिसक्यौं। दर्जनौं मध्ये मात्र एकमा तपाईंको लेख प्रदान गरिएको छ जुन CSS मा सजिलैसँग छविचित्रणको उपयोग कसरी गर्ने भनेर वास्तविक अन्तरदृष्टि हो। मैले तपाईको दिशा अनुसार स्टाइलसिट निकाले, तर एचटिएमएल कहाँ राख्नु पर्छ भन्ने कुरा थाहा छैन। तपाईंले भनेको सबै "आफ्नो HTML थप्नुहोस् ... यो राम्रो र सरल छ" र त्यसपछि मैले cringed किनभने मैले सोचें .. "मेरो लागि पर्याप्त सरल छैन!" मलाई थाँहा थिएन कि म थीम सम्पादकमा यी कुनै पनि php पृष्ठहरूमा html थप्न सक्छु। के म हेडरमा html राख्छु? मुख्य अनुक्रमणिका टेम्प्लेट? कार्यहरू? मेरो लागी सबै वर्डप्रेस प्रयोगकर्ताहरुसँग ड्यासबोर्ड सम्पादकमा उनीहरूको विषयवस्तु सम्पादन गर्ने विकल्प छ जुन कार्यक्षमतामा अलि विश्वव्यापी देखिन्छ। यदि तपाईं एचटीएमएल कहाँ राख्ने सुझाव दिन सक्नुहुन्छ भने, म मेरो नेभिगेसन बारको लागि ओरू कोड अनुकूल गर्न चाहन्छु।

    समुदाय संग तपाइँको ज्ञान साझा को लागी धन्यवाद। म तपाईंलाई कफि पाउँदा खुसी छु।

    • 22

      नमस्ते Phay!

      तपाईंको ब्ल्गको विषयवस्तुको लागि सबै फाइलहरू सम्पादनका लागि प्रशासन प्यानल मार्फत उपलब्ध छन्। यदि तपाईं प्रस्तुतीकरण र त्यसपछि थीम सम्पादकमा क्लिक गर्नुभयो भने, तपाईं दायाँपट्टि तपाईंको फाईलहरूको सूची र बायाँपट्टि सम्पादक हेर्न सक्षम हुनुपर्दछ।

      यदि तपाइँ तपाइँको साइडबारमा हुन चाहनुहुन्छ भने, तपाइँसँग साईडबार पृष्ठ हुन सक्छ। यसलाई सम्पादन गर्न क्लिक गर्नुहोस् र त्यसपछि पृष्ठमा HTML प्रदान गर्नुहोस् जहाँ तपाईंलाई यो मनपर्दछ।

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

      आशाले मदत गर्छ!

    • 23

      फाई,
      म आज यो साइट भर मा आएँ र तपाईं जस्तै उस्तै दुविधा थियो। म हेडर छविमा छवि नक्शा थप्न चाहान्छु। यसको केही समयका लागि वरिपरि खेल्दा, म यो सही भयो। हेडर। Php फाईलमा डिभ एचटीएमएल राख्नुहोस्। मैले यसलाई बीचमा राखें निश्चित हुनुहुन्न कि यदि तपाइँको टेम्प्लेटसँग सटीक कोडिंग छ, तर यसको साथ हेडर.एफपीपी फाइलमा खेल्नुहोस् र तपाइँले यसलाई आंकडा बनाउनु हुनेछ।
      -
      पावलले

  14. 24

    द्रुत प्रतिक्रिया को लागी धन्यवाद!

    होईन, म यो तेह साइडबारमा भएको चाहन्न थिइन, यो पृष्ठको शीर्षमा छ (तपाईं लिंकमा देख्न सक्नुहुन्छ मैले प्रदान गरेको- गुलाबी नेभिगेसन बार जो कन्टेन्ट भन्छ, शो ect को बारेमा ..)

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

    तपाईको समय र एक नौसिखियाबाट फील्डिंग प्रश्नहरूको लागि धेरै धेरै धन्यवाद।

    फे

  15. 25

    … वा हुनसक्छ कसैले टिप्पणीमा पोष्ट गर्न सक्दछ जुन हामीले कोडको एचटीएमएल भाग राख्छौं। एक भद्र पुरुषले भने कि उनले यसलाई पत्ता लगाए। म यति भाग्यमानी भएको छैन।

    फाईल

  16. 26
  17. 27

    म एक समयको नरकमा छुँदैछु एक WordPress क्लिकमा छवि छवि नक्सा इम्बेड गर्न को लागी एक मार्ग खोज्न किनभने यो html नक्शा ट्याग स्ट्रिप गर्दछ। तपाईंको तरिकाले काम गर्दछ तर अमेरिकाको नक्शा स्पष्ट रूपमा यस मार्गको साथ पेच गर्न जटिल मार्ग हो। म हराएको छु।

    मद्दत

    यस्तो देखिन्छ कि फ्ल्यास मेरो विकल्प मात्र हो?

    • 28

      डेभ,

      यदि तपाइँ छविलाई तपाइँको टेम्प्लेटमा राख्नुहुन्छ भने, तपाइँ ठीक हुनुहुन्छ। यदि तपाईं वास्तविक सामग्रीमा छवि नक्शा राख्नुहुन्छ भने, तपाईं फिल्टर मुद्दाहरूमा चलाउन सक्नुहुन्छ। मैले यसको वरिपरि काम गरेको तरिका भय terrible्कर छ, तर कहिलेकाँही मैले इफ्रेम प्रयोग गरेको छु।

      डग

  18. 29

    नमस्ते,

    यस्तो देखिन्छ कि छवि नक्शा र लि two्कहरू दुई फरक चीजहरू हुन्, तिनीहरू सँगै कार्य गर्दैनन् HTML मा छवि नक्साले कसरी गर्दछ।

    जब म छवि नक्शा को लागी पृष्ठभूमि स्थिति (बीच बायाँ) समावेश गर्दछ, लिंक को स्थिति पछ्याउँदैन।

    यसको वरिपरि पुग्न कुनै तरिका छ? म धेरै शौकिया हुँ। धन्यवाद।

  19. 31

    के उस्तै समान दृष्टिकोणलाई अधिक र अधिक जटिल छवि नक्शाको लागि प्रयोग गर्न को लागी प्रयोग गरीरहेको छु?

    यदि तपाईं मेरो साइट हेर्नुहुन्छ भने, बाँया लिंकहरूमा क्लिक गर्नुहोस् र तपाईं छवि देख्नुहुनेछ जुन मैले छवि नक्शाको रूपमा प्रयोग गर्न खोज्दै छु (पाठ वर्णमाला अन्तर्गत)।

    मूल रूपमा, अक्षरद्वारा यस सूचीको प्रत्येक खण्डमा जान छवि प्रयोग गर्न प्रयास गर्दै।

    स्पष्ट रूपमा, मैले २० मिनेट जिमपको साथमा नक्शा निर्माण गर्नमा खर्च गरे, र त्यसपछि डब्ल्यूपीले नक्शा ट्यागहरू हटाउँदछ, ताकि मैले तपाईंको साइट कसरी फेला पारेँ।

    यद्यपि, फ्ल्यास प्रयोग गरेर चिन्तन गर्न सक्दछ

    धन्यवाद।

  20. 33

    म हाल टेम्प्लेट लेआउट प्रयोग गर्दैछु र आफ्नै सामानहरू सम्पादन गर्दै। म छवि नक्शा थप्न चाहान्छु, तर मलाई सीएसएसमा कहाँ राख्ने भनेर निश्चित छैन। चित्रको म नक्शा बनाउन चाहान्छु हेडर भागमा।

  21. 34

    नमस्ते, मैले जुम्लामा मेरो वेबसाइट निर्माण गरें ... म यो विधि प्रयोग गर्न चाहन्छु मेरो पृष्ठको लोगो घरको लागि लिंक गर्न, मलाई भनिएको छ तिमी यो जुमलासँग गर्न सक्दिन तर यो लेखले मलाई आशा दिन्छ! ईमेल को माध्यम बाट मद्दत धेरै सराहना हुनेछ .... धन्यवाद

  22. 35

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

    १. पहुँचको लागि, तपाईंले दृश्यता प्रयोग गर्नुहुन्न: कुनै पनि (वा प्रदर्शन: कुनै पनि यदि तपाईंले सोचेको छैन) यहाँ पाठ लुकाउनको लागि, दृश्यताको साथ शैलीयुक्त एक तत्वको रूपमा: लुकेका पर्दा पाठकहरू पढ्नेछैनन् (स्प्याक अनुसरण गर्नेहरू) ।

    यसको सट्टामा, अधिक मजबूत छवि प्रतिस्थापन प्रविधि प्रयोग गर्नुहोस्। म या त Phark विधि वा Gilder / Levin सुझाव दिन्छु - ती केवल राम्रो कागजात नामहरू हुन् Google मा आधारभूत प्रविधिहरू पत्ता लगाउनका लागि। म G / L लाई प्राथमिकता दिन्छ किनकि यसले CSS सक्षम गर्दछ तर छविहरू अफ गरिएका छन्।

    २. जब म यसलाई भत्काइरहेको देख्दिन (FF2 प्रयोग गरेर), तपाईंको पोजीसनको कार्यान्वयनमा पनि अन्तर्निहित जोखिमहरू छन्। एक बिल्कुल स्थिति तत्व यसको नजिकको स्थिति अभिभावकको सापेक्ष स्थित छ। सामान्यतया, तपाइँ स्पष्ट रूपमा 'स्थिति: सापेक्षिक' # सदस्यतामा लागू गरेर स्थिति प्रस set्ग सेट गर्न चाहानुहुन्छ। त्यसोभए बच्चाहरू (स्थित लि links्कहरू) त्यो अभिभावकको भित्र राख्न सकिन्छ। यस विधिले ब्राउजरहरूमा अधिक विश्वसनीय परिणामहरू सुनिश्चित गर्न मद्दत गर्दछ।

    साथै, तपाईले पोजिशनिंग ह्यान्डल गर्न मार्जिनको सट्टा "top: x" र "बायाँ: x" (जहाँ x अफसेट मान हो, px मा भन्नुहोस्) को स्थिति घोषणाहरू प्रयोग गर्नुपर्दछ। फेरि, म आवश्यक रूपमा यो तपाईंसँग भएको मार्ग भ breaking्ग भएको देख्दिन, तर शीर्ष र बायाँ यसको लागि हो त्यसैले तिनीहरूलाई किन प्रयोग नगर्ने? प्लस तपाईंले फ्लोट र मार्जिन एकै तत्वमा सेट गर्नुभयो, जुन विशिष्ट सर्तहरू अन्तर्गत आई 6 in मा "डबल मार्जिन" बगको कारण हुन्छ (के तपाईंले त्यहाँ यसको परीक्षण गर्नुभयो?) - जबकि त्यहाँ एक फिक्स छ, तपाईं शीर्ष प्रयोग गरेर त्यस मुद्दालाई पूर्ण रूपमा बेवास्ता गर्नुहुन्छ। र यस अवस्थामा स्थितिको लागि मार्जिनको सट्टा छोडिन्छ।

    Finally. अन्त्यमा, यी लि for्कहरूको लागि अर्थहीन डिभको सट्टामा शब्दहीन ध्वनि अनअर्डर गरिएको सूची किन प्रयोग नगर्ने?

    मा droning को लागी माफ गर्नुहोस् ... मँ साझा गर्न चाहान्छु, b / c मलाई अनुभवबाट थाहा छ कि कसरी वांछित परिणाम प्राप्त गर्न CSS प्रयोग गर्ने विभिन्न तरिकाहरू छन्, तर केहि तरिकाहरू निश्चित रूपमा अरुले भन्दा राम्रो (अधिक विश्वसनीय, क्रस ब्राउजर) काम गर्दछन्। । HTH

  23. 36
  24. 37

    धन्यबाद, डग! धेरै ट्यूटोरियल समीक्षा पछि, म यसलाई मेरो श्रीमतीको कुपन ब्लगमा लागू गर्दैछु, http://www.SavingWithAmy.com/। यो अहिलेसम्म सजिलो र सब भन्दा सिधा अगाडि ट्यूटोरियल हो र अनुसरण गर्न जुन मैले भेट्टाएको छु।

  25. 38

    धेरै धेरै धन्यवाद !! तपाईंको निर्देशनहरूले मलाई HOURS कार्य बचत गर्‍यो ... म वेब विकासको लागि नयाँ हुँ, र मैले भर्खर मेरो पहिलो ठूलो प्रोजेक्टबाट गुज्र्यो। मैले यो बनाएको ... ग्राहक खुशी छ, वास्तवमा एक्स्ट्याटिक, र म पनि हुँ!

  26. 39

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

तिम्रो के बिचार छ?

यो साइट स्प्याम कम गर्न Akismet को उपयोग गर्दछ। जान्नुहोस् कि तपाईंको डेटा कसरी संसाधित छ.