HTML HTML लेआउट: एक बग की तरह सोचें

सभी को नमस्कार!

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

cellspacing

जैसा कि मैंने एक साल पहले लिखा था , यह तालिकाओं के लिए सभी इंडेंटेशन को शून्य करने के लायक है, और जहां इंडेंटेशन की आवश्यकता है, एक पारदर्शी .gif स्पेसर के साथ नई कोशिकाओं को जोड़ें। मैंने अपने कार्य को आसान बनाने का फैसला किया और टेबल के लिए मूल इंडेंटेशन के साथ खेला।

कार्य: एक तालिका में चार चित्रों की व्यवस्था करें - प्रत्येक पंक्ति पर दो। चित्रों के बीच 10px का अंतर होना चाहिए।

प्रायोगिक समाधान:

<table cellpadding="0" cellspacing="10" style="border:#666666 1px solid;"> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> 

निचला रेखा: विफलता! Gmail और Yandex.mail में (अन्य लोगों ने भी जाँच नहीं की) इंडेंट मनोरोगियों की तरह व्यवहार करते हैं। हर जगह और अलग-अलग तरीके से।

काम कर समाधान:

 <table cellpadding="0" cellspacing="10" style="border:#666666 1px solid;"> <tr> <td width="10" height="10"><img src="blank.gif" width="10" height="10" style="display:block;"></td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td></td> <td>&nbsp;</td> <td></td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td></td> <td>&nbsp;</td> <td></td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td width="10" height="10"><img src="blank.gif" width="10" height="10" style="display:block;"></td> </tr> </table> 

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

नोट 2: प्रदर्शन: ब्लॉक संपत्ति चित्रों के लिए सेट की गई है ताकि तस्वीर के नीचे कोई अतिरिक्त इंडेंटेशन न दिखाई दे। इसमें पिक्चर रैपर के साथ भी व्यवहार किया जाता है

 <div style="line-height:0;"></div> 

लेकिन यह विकल्प हमेशा उपयुक्त नहीं होता है। क्यों? यह mail.ru का दोष है। लेकिन उस पर और बाद में।

Cellpadding

और यहाँ अच्छी खबर का इंतजार है। आप कभी-कभी अनावश्यक स्ट्रट्स नहीं बना सकते हैं और इंडेंटेशन के लिए क्लासिक सेलपैडिंग का उपयोग कर सकते हैं - कोई बग नहीं देखा गया है। पिछले कार्य के सिद्धांत के अनुसार कार्य उदाहरण:

 <table cellpadding="10" cellspacing="0" style="border:#666666 1px solid;"> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> 

पिछले कार्य में इस विकल्प का उपयोग क्यों नहीं किया? सब कुछ सरल है। Cellpadding इसकी बाहरी हिस्सा के संबंध में तालिका के अंदर डबल गद्दी देता है।

Mail.ru और आम समस्या

लोग निश्चित रूप से महान हैं। न केवल उन्होंने मेल इंटरफ़ेस को फिर से लिखा, बल्कि उन्होंने UTF में एन्कोडिंग को पछाड़ दिया। और ठीक है, नीचे के साथ KOI-8! लेकिन यहाँ यह घटना के बिना नहीं था। एक छोटा सा बग था जो पहले नहीं था।

टास्क: एक तस्वीर (या तस्वीर के साथ एक लिंक) को एक सेल में रखें जो तस्वीर की तुलना में व्यापक है। तस्वीर को केंद्र में रखें। सेल के नीचे सीमा और सबसे चित्र के बीच की जगह की एक छोटी राशि के उद्भव रोकें।

पहले निम्नानुसार हल किया गया है:

 <table width="600" cellpadding="0" cellspacing="0" style="border:#666666 1px solid;"> <tr> <td align="center"> <div style="line-height:0;"><img src="1450823215153325277735" width="200" height="100" alt=""/></div> </td> </tr> </table> 

इस तरह कोशिश की:

 <table width="600" cellpadding="0" cellspacing="0" style="border:#666666 1px solid;"> <tr> <td align="center"> <div style="line-height:0; text-align:center;"><img src="1450823215153325277735" width="200" height="100" alt=""/></div> </td> </tr> </table> 

काम नहीं करता है।

यदि आपको चित्र को केन्द्रित करने की आवश्यकता नहीं है, तो यह और भी आसान है:

 <table width="200" cellpadding="0" cellspacing="0" style="border:#666666 1px solid;"> <tr> <td align="center"> <img src="1450823215153325277735" width="200" height="100" alt="" style="display:block;"/> </td> </tr> </table> 

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

"Gif स्ट्रट्स बुराई!" आप स्पैम में पहुंच जाएंगे! ”- ऐसा नहीं है।

एक बार से अधिक बातचीत में कहा गया था कि .gif स्ट्रट्स का उपयोग खराब तरीके से जीमेल द्वारा किया जाता है। कथित तौर पर, वह इसे एक स्पैमिंग कदम मानता है। कॉमरेड रिडनाक्सी ने इस चर्चा में Google की आधिकारिक सिफारिशों के एक अंश का हवाला देते हुए इस पर चर्चा की ।

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

लेकिन 300,000 से अधिक प्राप्तकर्ताओं के लिए ईमेल अभियानों का संचालन करते हुए, इन सबसे पारदर्शी .gif का उपयोग करते समय स्पैम के साथ कोई समस्या नहीं थी। उन पर एकमात्र टिप्पणी बैट के पुराने संस्करण हैं! रंग पारदर्शी पिक्सेल काला। यदि आप इस ईमेल क्लाइंट के बारे में जानकारी नहीं देते हैं, तो पृष्ठभूमि के साथ विलय करने के लिए gifs को सही रंग में डाला जाता है।

खैर, इस तरह के नृत्य के बाद से

इस अवसर ले रहा है, मैं एक और सकारात्मक घटना है, लेआउट के विषय में नहीं ध्यान दें। डाक से विषय सदस्यता समाप्त पूरी तरह से चूसा और अंत में काम करता है! कम से कम मैं इसे देखता हूं। विशेष रूप से, मैं अक्सर विभिन्न साइटों और सेवाओं पर पंजीकरण करता हूं, और अपने मेलबॉक्स में लगातार सभी प्रकार के मेलिंग का एक गुच्छा प्राप्त करता हूं। इसलिए - यदि पहले आधी साइटों को अनसब्सक्राइब करने के लिए अतिरिक्त प्राधिकरणों की आवश्यकता होती है, तो अब यह वास्तव में दुर्लभ है! किसी भी मामले में, जिन साइटों पर मुझे सदस्यता दी गई है, उनमें से कुछ भी नहीं हैं। ऑलोकेस्ट्रा की आवाज़ के लिए लंगोट घोड़ी के रूप में मोलोटोकोव जारी किया गया है। रनेट के इस निर्माण को अभी भी सदस्यता समाप्त करने के लिए प्राधिकरण की आवश्यकता है। लेकिन वह एक साल से स्पैम में है।

UPD: 1 फरवरी, 2012 की पृष्ठभूमि-छवि अब जीमेल में समर्थित है। इस साल फरवरी के पहले, वहाँ जीमेल में पृष्ठभूमि छवि संपत्ति के लिए समर्थन है। हुर्रे!