मनोरंजक लेआउट

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

बिल्ली के नीचे, कार्य का स्क्रीनशॉट और .psd और मेरे समाधान के लिए लिंक



मेरे समाधान में IE 6 के लिए 10 कंटेनर और 6 अपवाद नियम शामिल हैं (बहुत उम्मीद से IMHO नहीं)

UPD: मैं TK का वर्णन करता हूँ:

• ब्लॉक चौड़ाई और ऊंचाई दोनों में विस्तार योग्य है (पाठ के आधार पर)
• कोनों और सीमाओं को चित्रों द्वारा डाला जाता है।
• ब्लॉक शीर्षक और पाठ की सामग्री

परिणाम

तो, ऐसा लगता है कि विचार समाप्त हो गए हैं, और अब आप परिणामों की घोषणा कर सकते हैं।

जैसा कि मैंने कहा, मेरा विकल्प अधिक इष्टतम नहीं था, इसके अलावा, IE 6 के लिए अभिव्यक्ति के अतिरिक्त की आवश्यकता है।

मैं खुश था कि फिर भी सभ्य समाधान प्रस्तुत किए गए थे:

• rmaksim ने इस तरह के एक विकल्प का प्रस्ताव दिया, साथ ही इसके दो विकल्प , स्प्राइट का उपयोग करके बाद वाला, IMHO बहुत ही सुरुचिपूर्ण
• dmitriykikkas ने Lebedev को संदर्भित किया । बेशक, उनके पास कोड है जो हर जगह काम करता है, लेकिन यह समझने के लिए कि यह कैसे किया जाता है, मेरी राय में यह बिल्कुल आसान नहीं है
• hlomzik ने एक सुंदर विकल्प भी प्रस्तावित किया था , लेकिन पाठ के साथ निम्न div मुझे परेशान करता है, लेकिन यह खाली कंटेनर के साथ दर्द रहित रूप से प्रतिस्थापित किया जा सकता है =)
• और जीन से अंतिम विकल्प

कार्यशालाओं के लिए धन्यवाद, मैं आपको कर्म जोड़ने की कोशिश करूंगा, अगर मेरा संतुलन इसके लिए पर्याप्त है =)