सीमा छवियों के साथ div

Question

इसके आस-पास की कुछ सीमा छवियों के साथ एक कंटेनर div सेट करने का एक अच्छा तरीका क्या है (मेरे मामले में केवल बाएं, नीचे और दाएं किनारे पर)? मैंने इसे पृष्ठ के शीर्ष पर केंद्रित किया है, बाकी सब कुछ ओवरलैप कर रहा है (इसलिए ओएसएक्स-शैली स्लाइड-डाउन संवाद की तरह)।

alt text http://www.nickawilliams.com/images/misc/layout.jpg

यहाँ क्या मैं अब तक मिल गया है:

यहाँ मूल लेआउट है (कर सकते हैं मैं सामग्री के लिए एक स्थिर चौड़ाई/ऊंचाई से बचने के?):

HTML:

<div class="contentbox"> 
    <div class="contentbox-wrapper" style="width: 400px"> 
     <div class="contentbox-mid" style="height: 200px"> 
      <div class="contentbox-w"></div> 
      <div class="contentbox-content"> 
       Content Box Test 
      </div> 
      <div class="contentbox-e"></div> 
     </div> 
     <div class="contentbox-bottom"> 
      <div class="contentbox-sw"></div> 
      <div class="contentbox-s"></div> 
      <div class="contentbox-se"></div> 
     </div> 
    </div> 
</div> 

सीएसएस:

.contentbox { 
    width: 100%; 
    position: fixed; 
    z-index: 2; 
} 

.contentbox-wrapper { 
    width: 300px; 
    margin-left: auto; 
    margin-right: auto; 
} 

.contentbox-mid { 
    height: 100px; 
} 

.contentbox-w { 
    width: 30px; 
    height: 100%; 
    background: transparent url("../../images/contentbox_w.png"); 
    float: left; 
} 

.contentbox-content { 
    width: auto; 
    height: 100%; 
    background: #e8e8e8; 
    float: left; 
} 

.contentbox-e { 
    width: 30px; 
    height: 100%; 
    background: transparent url("../../images/contentbox_e.png"); 
    float: left; 
} 

.contentbox-bottom { 
    width: 300px; 
    height: 30px; 
} 

.contentbox-sw { 
    width: 30px; 
    height: 30px; 
    background: transparent url("../../images/contentbox_sw.png"); 
    float: left; 
} 

.contentbox-s { 
    height: 30px; 
    background: transparent url("../../images/contentbox_s.png"); 
    margin-left: 30px; 
    margin-right: 30px; 
} 

.contentbox-se { 
    width: 30px; 
    height: 30px; 
    background: transparent url("../../images/contentbox_se.png"); 
    float: right; 
    position: relative; 
    bottom: 30px; 
} 

Answer 1

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

आपकी संरचना बहुत ही एकमात्र प्रकार की संरचना है जिसका आप अपने सिरों पर उपयोग कर सकते हैं, हालांकि यदि आपकी चौड़ाई स्थैतिक (300 पीएक्स?) है, तो मैं आपको सलाह देता हूं कि आपकी div पृष्ठभूमि हो, क्योंकि एक बड़ी छवि लंबवत रूप से दोहराई गई है।

तब आपके पास अपने div के भीतर एक प्रकार का पाद लेख होगा, जहां आप दो नीचे कोनों और नीचे की तस्वीर को एक ही छवि में रख सकते हैं। एक के अंदर 5 divs होने के बजाय, आप केवल एक होगा। ध्यान दें कि बड़े पर्यावरण में, इसका मतलब यह भी है कि उपयोगकर्ता समानांतर में 2 और छवियों को डाउनलोड कर सकता है (एक मेजबान से अधिकतम 4), जिससे पृष्ठ का समग्र डाउनलोड तेजी से हो जाता है।

यह स्पष्ट रूप से काम नहीं करता है यदि आपकी चौड़ाई माता-पिता से संबंधित है या किसी भी तरह से बदल सकती है।

---

संपादित करें: के रूप में यह होता है कि आप निर्दिष्ट चौड़ाई चर रहा है, मैं वहाँ एक क्लीनर प्रकाश तरीका यह करने के लिए एचटीएमएल के लिहाज से है नहीं लगता।

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

background-position: 32px 0px; /* this should move the background to the right */ 

लाभ यह है कि आपको केवल एक तस्वीर की आवश्यकता है, ग्राहक के लिए उन्हें डाउनलोड करने के लिए कम कनेक्शन की आवश्यकता है (तेज़) और इसमें उतनी जगह लगती है।

उम्मीद है कि इससे मदद मिलती है।

Answer 2

आप "स्लाइडिंग दरवाजे" तकनीक का उपयोग करके इसे थोड़ा कम मार्कअप के साथ प्राप्त कर सकते हैं। असल में, आप केवल यह सुनिश्चित करते हैं कि प्रत्येक कोने के लिए छवियां इतनी बड़ी हैं कि जब भी बॉक्स आपके अधिकतम आकार पर होता है तब भी वे थोड़ी अधिक ओवरलैप करेंगे।केवल तीन तरफ से छवियों के साथ एक बॉक्स के लिए

<style> 
div.box { float: left; } 
div.tl { background: transparent url('topleft.gif') no-repeat top left; padding-top: 8px; padding-left: 8px; } 
div.bl { background: transparent url('bottomleft.gif') no-repeat bottom left; height: 8px; padding-left: 8px; } 
div.tr { background: transparent url('topright.gif') no-repeat top right; padding-right: 8px; } 
div.br { background: transparent url('bottomright.gif') no-repeat bottom right; padding-right: 8px; } 
</style> 

<div class="box"> 
    <div class="tr"> 
     <div class="tl"> 
      Lorem ipsum dolor sit amet... 
     </div> 
    </div>  
    <div class="br"> 
     <div class="bl"></div> 
    </div> 
</div> 

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

<style> 
div.box { float: left; } 
div.bl { background: transparent url('bottomleft.gif') no-repeat bottom left; padding-left: 8px; } 
div.br { background: transparent url('bottomright.gif') no-repeat bottom right; padding-right: 8px; } 
</style> 

<div class="box"> 
    <div class="br"> 
     <div class="bl"> 
     Lorem ipsum dolor sit amet... 
     </div> 
    </div> 
</div> 

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

The corner/border graphics http://www.mikrogroove.com/stackoverflow/corners.gif

Images overlapping http://www.mikrogroove.com/stackoverflow/overlapping.gif