3 अच्छे पुराने पाद लेखों की उपस्थिति में सुधार कैसे करें?

इस तथ्य के कारण कि पाद लेख में प्रत्येक लेख के शीर्षक के तहत 33% आवंटित किया जाता है, और शीर्षकों की लंबाई अलग होती है, अप्रिय प्रभाव के एक जोड़े दिखाई देते हैं:
1) यदि नाम कम हैं और आसन्न एक लंबा है;
2) नाम ब्लॉक के ऊपरी किनारे से चिपके रहते हैं;
3) आपको केवल पाठ पर क्लिक करने की आवश्यकता है, और पूरे ब्लॉक पर नहीं।

उदाहरण के लिए, यहां मध्य कड़ी में, जैसा कि सभी में है, आपको पाठ को लक्षित करने की आवश्यकता है।

क्या होगा अगर कुछ उन्हें उत्साहित करें?



यहां तक ​​कि अगर आप लिंक के लुक को निखारते हैं - अंडरस्कोर हटाते हैं, तो होवर पर केवल एक रंग परिवर्तन करते हैं, ऊंचाइयों में अंतर बहुत मनभावन नहीं है (पिछले 2 महीनों से ZenComment उपयोगकर्ता शैलियों के संस्करण ने काम किया है)। और आप उन्हें स्क्रिप्ट के बिना केंद्र में लंबवत रखने में सक्षम नहीं होंगे, क्योंकि यह एक डीवा है, और यहां तक ​​कि टेबल-टेबल-पंक्ति-टेबल-सेल शैलियों में तत्वों की कमी है। लेकिन क्या होगा यदि आप एक तालिका में 3 ब्लॉक रखते हैं और चौड़ाई की परवाह नहीं करते हैं? परिणाम उत्कृष्ट है: तालिका की चौड़ाई 100% है, और कोशिकाओं की चौड़ाई स्वयं सामग्री के अनुसार गठबंधन की जाती है।



सेल के पूरे क्षेत्र में लिंक सक्रिय होने के लिए, इसे {डिस्प्ले: टेबल-सेल} प्रॉपर्टी को मैप करना होगा। यहां तक ​​कि अगर कभी-कभी तालिका सामग्री (पूरी तरह से नियमित मामला) को पूरी तरह से संरेखित नहीं कर सकती है, तो {ऊर्ध्वाधर-संरेखित: मध्य} सेल गुण स्थिति को ठीक करता है।



HTML कोड:

<div class="rotated_posts" style="display: table; width: 100%;"> <div class="rotTRow" style="display: table-row;"> <a class="grey" href="http://habrahabr.ru/post/147042/">       (   ) </a> <a class="grey" href="http://habrahabr.ru/post/149179/"> ,     email ,                </a> <a class="grey" href="http://habrahabr.ru/post/147828/">     .  </a> </div> </div> 

बुनियादी सीएसएस शैलियों:

 .rotated_posts{ display: table; width: 100%; } .rotated_posts .rotTRow{ display: table-row; } .rotated_posts .rotTRow a.grey{ display: table-cell; padding:0 12px 4px; vertical-align: middle; } 

(यह विधि IE6-7 में काम नहीं करेगा, उन्हें स्पष्ट रूप से टेबल लिखने की आवश्यकता है, लेकिन यह उपयोगकर्ता स्क्रिप्ट के लिए उपयुक्त है, जहां परिभाषा के अनुसार कोई IE नहीं है।)

कोशिकाओं के बीच अंतराल को 24 पिक्सेल पर चुना जाता है, इसलिए पड़ोसी नाम कभी भी एक साथ चिपकते नहीं हैं:



यहां हम धीरे-धीरे माउस के साथ खिड़की के किनारे को शिफ्ट करते हैं, यह छोटा हो जाता है, फिर एक कूद - और सभी 3 लिंक में 2 लाइनें लगीं, और तालिका को फिर से बनाया गया। स्क्रीनशॉट से हम देखते हैं कि यह ब्लॉक में कहीं भी इंगित करने के लिए पर्याप्त है ताकि लिंक चयनित हो जाए।

आप एक्शन में देख सकते हैं और इस तरह के पाद लेख शैलियों (साथ ही पचास अन्य सुधार) का उपयोग ज़ेनबैंक उपयोगकर्ता शैलियों में हब्राजैक्स उपयोगकर्ता स्क्रिप्ट के साथ संयोजन में कर सकते हैं । यहां स्क्रिप्ट HTML को वांछित कॉन्फ़िगरेशन में कनवर्ट करती है, और शैलियाँ सब कुछ व्यवस्थित करने में मदद करती हैं।

यहां तक ​​कि अगर आप HabrAjax का उपयोग अलग से करते हैं, तो पाद भी अच्छा लगेगा: