एक सीएसएस टेबल-सेल लेआउट में घुमावदार कोनों?

Question

मुझे अपने डिजाइन के साथ कुछ मदद की ज़रूरत है। मैं तीन बराबर ऊंचाई बक्से एक दूसरे के बगल, इस एएससीआई कला की तरह प्रदर्शित करना चाहते हैं:

+------+ +------+ +------+ 
|  | |  | |  | 
|  | |  | |  | 
|  | |  | |  | 
+------+ +------+ +------+ 

मैं भी an example online (with all the CSS) है।

बक्से की सामग्री ऊंचाई में भिन्न होती है। मुश्किल बात यह है कि इन बक्से को गोलाकार कोनों की भी आवश्यकता होती है। इसके लिए मैं "स्लाइडिंग दरवाजे" तकनीक का उपयोग कर रहा हूं।

<div class="box"> 
    <div class="box-header"> 
    <h4>header</h4> 
    </div> 
    <div class="box-body"> 
    <p>Contents</p> 
    </div> 
</div> 

चार ब्लॉक तत्वों तो मैं पृष्ठभूमि छवियों के साथ गोल किनारों और सीमाओं बना सकते हैं: असल में, एक बॉक्स के मार्कअप कुछ इस तरह है। शीर्ष दाएं कोने एच 4 पर चला जाता है। शीर्ष बाएं कोने बॉक्स-हेडर पर जाता है। निचला दायां कोने बाहरी बॉक्स div पर जाता है और नीचे-बाएं कोने बॉक्स-बॉडी पर जाता है।

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

मैं इसे कैसे ठीक कर सकता हूं? सभी बॉक्स divs अब ऊंचाई में बराबर हैं। सामग्री कम होने पर भी, बॉक्स-बॉडी की तरह सभी उपलब्ध ऊंचाई का उपयोग करने के लिए विस्तारित होगा, भले ही सामग्री कम हो। मैंने ऊंचाई की कोशिश की: 100% लेकिन यह काम नहीं करता है। मैं कैसे काम कर सकता हूं?

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

Google बिल्कुल बेकार है। "कोनों" और "टेबल" से जुड़ी कोई भी क्वेरी मुझे 1 99 0 के ट्यूटोरियल्स के लिए एक गैज़िलियन लिंक देती है जो गोलाकार कोनों के लिए 3x3 तालिका का उपयोग करती है।

ब्राउज़र संगतता के लिए, यह अच्छा होगा अगर आईई 7/8 इसके साथ भी निपट सकता है लेकिन इसकी आवश्यकता नहीं है (मैं उस मामले में असमान ऊंचाई वाली फ्लोट के साथ प्रतिस्थापित कर सकता हूं)। जिस वेबसाइट के लिए मैं विकास कर रहा हूं, उसके लिए मैं अनुमान लगाता हूं कि आईई बाजार हिस्सेदारी 20% या उससे कम हो। मुझे आईई 6 की परवाह नहीं है।

किसी भी सुझाव की बहुत सराहना की जाती है!

Answer 1

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

.box { 
    display: table-cell; 
    width: 16em; 
    padding: 1em 2em; 
    background: #f6c75d url(gradient.png) repeat-x scroll top left; 
    border: 3px solid #de9542; 
    border-radius: 25px; /* Standard */ 
    -o-border-radius: 25px; /* Opera 10.x */ 
    -moz-border-radius: 25px; /* Mozilla/Firefox */ 
    -icab-border-radius: 25px; /* iCab */ 
    -khtml-border-radius: 25px; /* KHTML/Konqueror */ 
    -webkit-border-radius: 25px; /* Webkit/Safari/Chrome/etcetera */ 
} 

उपर्युक्त में, gradient.png एक छोटी टाइल करने योग्य छवि है जो एक बॉक्स के शीर्ष पर ढाल प्रदान करती है।

यह पूरी तरह से काम करता है। यह मार्कअप और सीएसएस को भी सरल बनाता है, और यह मुझे आवश्यक पृष्ठभूमि छवियों की मात्रा और आकार को कम करता है।

Answer 2

यदि आपको थोड़ा अतिरिक्त मार्कअप जोड़ने में कोई फर्क नहीं पड़ता है, तो आप इस प्रभाव को प्राप्त कर सकते हैं। निस्संदेह मैं वास्तव में कोड-ब्लोट की वकालत नहीं करता हूं, लेकिन यदि आपको इसे पूरा करना होगा, तो आप बॉक्स को डबल-लपेट सकते हैं और नीचे के कोनों में से प्रत्येक में कोने में से एक होना चाहिए। अपने आंतरिक रैपर की ऊंचाई display: table-cell के साथ सेट करें और आपको सुनहरा होना चाहिए।

Answer 3

क्या आप बॉक्स-बॉडी तत्व पर min-height संपत्ति का उपयोग कर सकते हैं?

Answer 4

बॉक्स-बॉडी को पर प्रदर्शित करने का प्रयास करें: तालिका-कक्ष? जो इसे तीन बॉक्स-बॉडी को एक ही ऊंचाई पर प्रस्तुत करने के लिए मजबूर कर सकता है और गोलाकार सीमाओं को भी नीचे तक मजबूर कर सकता है।

Answer 5

समाधान है, जो Safari, Firefox और Chrome में काम करता है। यह IE में काम नहीं करता है, न ही Opera (जहां तक ​​मैंने इसका परीक्षण किया है - यहां तक ​​कि 10.0b में भी नहीं)। यह CSS3 संपत्ति border-image का उपयोग करता है। के रूप में यह अभी भी मसौदा, नहीं सिफारिश काम करने में शामिल सुविधा है, ब्राउज़र यह केवल उनकी विशिष्ट उपसर्गों को लागू:

#boxes { 
    display: table; 
    border-spacing: 1em; 
} 
.box-row { display: table-row; } 
.box { 
    width: 16em; 
    display: table-cell; 
    padding-right: 2em; 
    border-image: url(box.png) 6 8 6 8 stretch; // this line actually does not influence rendering in any engine 
    -o-border-image: url(box.png) 6 8 6 8 stretch; 
    -khtml-border-image: url(box.png) 6 8 6 8 stretch; 
    -icab-border-image: url(box.png) 6 8 6 8 stretch; 
    -webkit-border-image: url(box.png) 6 8 6 8 stretch; 
} 

यह वास्तव में आप पृष्ठभूमि छवि को पुन: करने की आवश्यकता होगी का उपयोग करते हुए, लेकिन यह एक विस्तार है।

Answer 6

मुझे उम्मीद है कि यह आपको मिल जाएगा (मैं इन फोरम पोस्टिंग चीजों में नया हूं) ग्राफिक डिज़ाइनर के रूप में, HTML की "स्क्वायरनेस" भयानक है। मुझे पता है कि यह वास्तव में एचटीएमएल या सीएसएस के लिए एक फिक्स नहीं है, क्योंकि यह एक साधारण ग्राफिक समाधान है। लेकिन यह बहुत अच्छा काम करता है, और क्योंकि यह एक साधारण gif छवि है, यह ब्राउज़र में विफल नहीं होता है। नीचे की तरफ यह है कि परीक्षण और त्रुटि के कारण इसमें समय लगता है और यदि आप अपने सेल में सामग्री की मात्रा बदलते हैं तो आपको एक गोलाकार आयताकार पृष्ठभूमि के रूप में उपयोग की गई छवि को बदलना पड़ सकता है।

तो, कि चेतावनी के साथ ... तालिका सेल आप पाठ करता है, तो केवल एक छवि, पिक्सेल में जोड़ने और सेल को मापने, या छवि का आकार को देखकर जरूरत के आकार बाहर

कार्य करें।

एक ग्राफिक्स प्रोग्राम में किसी भी रंग का आयत बनाएं (यदि आपके पास वेबसाइट आदि पर सफेद टेक्स्ट है तो काला कहें) यह आयताकार नीचे की परत है।

एक गोलाकार आयताकार बनाएं, उदाहरण के लिए 1 पिक्सेल लाइन मोटाई और कोई भरने वाला रंग (रेखा रंग कोई भी रंग हो सकता है जिसे आप मोटाई के रूप में चुन सकते हैं ..) जो मूल भरे आयताकार से ऊपर है। तब आपके पास गोलाकार कोनों के साथ एक पतली रूपरेखा के साथ एक ठोस रंग वर्ग होगा।

मैं गोलाकार आयताकार आयत 10 पिक्सेल छोटे (एक्स-वाई) बना देता हूं तो मैं इसे वर्ग पर इक्विटी दूरी रख सकता हूं।

इस छवि को निर्यात करें, जीआईएफ या जेपीईजी के रूप में कहें।

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

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

यदि आप पूरे पृष्ठ के लिए सीएसएस का उपयोग कर पृष्ठभूमि छवि रखते हैं तो पारदर्शिता चाहते हैं, लेकिन, उपयोग में आने वाली छवि के आधार पर चेतावनी दी जानी चाहिए, यह पाठ को पढ़ने में मुश्किल हो सकती है।

मुझे आशा है कि यह मदद की है।