सीएसएस - मैं एक ढाल ड्रॉप छाया कैसे स्थापित कर सकता हूं?

Question 1

मेरे पास एक ढाल ड्रॉप छाया है जो दो अलग-अलग छवियों का उपयोग करती है। हर तरफ एक। मैं अपने OutsideContainer को आकार में Center के सापेक्ष कैसे सेट कर सकता हूं? इसलिए, जब केंद्र सामग्री का विस्तार होता है OutsideContainer फैलता है।

इस तरह मेरे ग्रैडिएंट्स पूरे कंटेंट एरिया पर दिखते हैं।

.Left
{
    background-image:url(themes/Light/images/BorderLeft.gif);
    background-repeat:repeat-y;

    float:left;
    background-color:#FF0000;/*Colors work in place of having the picture*/
    height:100%;
    width:8px;
}
.Center
{    
    float:left;    
    background-color:#FFFFFF;
    width:745px;
}
.Right
{
    background-image:url(themes/Light/images/BorderRight.gif);
    background-repeat:repeat-y;
    float:left;
    background-color:#00FF00;/*Colors work in place of having the picture*/
    height:100%;
    width:8px;
}
.OutsideContainer
{
    margin:0 auto;  
    width:761px;
    height:200px;
}

<body>
<div class="OutsideContainer">
  <div class="Left"></div>
  <div class="Center">blah blah <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />blah<br /></div>
  <div class="Right"></div>
</div>
</body>

asp.net html css

1

P.Brian.Mackey 12 अगस्त 2011, 00:21

Answer

आप जो करने की कोशिश कर रहे हैं उसे करने का एक बेहतर तरीका है कि left और right की चौड़ाई के बाहरी बॉक्स में पैडिंग देना बाएं और दाएं divs को हटा दें और दोनों पक्षों की पृष्ठभूमि छवि का उपयोग करें सेट एक पारदर्शी पृष्ठभूमि के साथ आपके सेट बाहरी div चौड़ाई में जहां वास्तविक div जाता है। कुछ इस तरह:

enter image description here

और सीएसएस ऐसा दिखेगा:

.Center
{    
    float:left;    
    background-color:#FFFFFF;
    width:771px;
}
.OutsideContainer
{
    padding: 0px 8px 0px 8px;
    background: url('picture.png') repeat-y; 
    margin:0 auto;  
    width:761px;
    overflow: hidden;
}

एचटीएमएल:

<body>
<div class="OutsideContainer">
  <div class="Center">blah blah <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />blah<br /></div>
</div>
</body>

सीएसएस के साथ ऐसा करने का यह एकमात्र तरीका हो सकता है।

3

Nachshon Schwartz 12 अगस्त 2011, 02:05

अगर मैं चौड़ाई लेता हूं, तो मैं आउटसाइडकंटनर द्वारा बनाए गए केंद्र को खो देता हूं (लगता है कि div को अभी अनदेखा किया गया है)। अगर मैं ऊंचाई के बजाय न्यूनतम-ऊंचाई निर्दिष्ट करता हूं, तो मैं Left और Right खो देता हूं। मैंने overflow जोड़ा। मैं अभी भी परिणाम प्राप्त करने में असमर्थ हूं। मुझे एक निश्चित चौड़ाई, गतिशील ऊंचाई चाहिए।

–

P.Brian.Mackey

12 अगस्त 2011, 00:58

3

क्षमा करें, मैंने सोचा था कि आप चौड़ाई गतिशील होना चाहते थे, मैंने उत्तर संपादित कर दिया है लेकिन समस्या यह है कि मुझे लगता है कि आप जो चाहते हैं वह तब तक संभव नहीं हो सकता जब तक कि आप बाएं और दाएं divs की ऊंचाई निर्धारित ऊंचाई पर सेट नहीं करते। अन्यथा आपके divs उन्हें div द्वारा दी गई ऊंचाई पर निर्भर कर रहे हैं जिसमें वहां मौजूद divs से मेल खाने के लिए सेट किया गया है, जिसके परिणामस्वरूप एक पूर्ण ब्राउज़र आकार div होता है।

–

Nachshon Schwartz

12 अगस्त 2011, 01:04

मेरे पास पहले से ही एक निश्चित ऊंचाई है जिसकी गणना माता-पिता, OutsideContainer से की जाती है। मैं यह नहीं देखता कि ऊंचाई को Left और Right तक ले जाने से कुछ कैसे हल होता है। क्या आप यह कहने की कोशिश कर रहे हैं कि यह संभव नहीं है?

–

P.Brian.Mackey

12 अगस्त 2011, 01:12

1

क्या आपका मतलब यह था कि मैं यह कहने की कोशिश कर रहा हूं कि यह असंभव है, यदि हां से हां, तो मैं यही कह रहा हूं, कम से कम जिस तरह से आप ऐसा करने की कोशिश कर रहे हैं। मैंने एक वैकल्पिक समाधान जोड़ा है, ऊपर संपादित देखें।

–

Nachshon Schwartz

12 अगस्त 2011, 01:26

2

आपका वैकल्पिक समाधान एक विजेता की तरह काम करता है। (मैंने यह भी सीखा कि IE7 PNG को सपोर्ट करता है)। धन्यवाद! एक तरफ, मोज़िला ब्राउज़र के लिए ऐसा करने का एक बेहतर तरीका है: stackoverflow.com/questions/2717127/css3- ग्रेडिएंट-बॉर्डर. मुझे IE7 का समर्थन करना है, इसलिए यहाँ उत्तर मेरी पसंद है।

–

P.Brian.Mackey

12 अगस्त 2011, 01:48

Question 2

आप जो करने की कोशिश कर रहे हैं उसे करने का एक बेहतर तरीका है कि left और right की चौड़ाई के बाहरी बॉक्स में पैडिंग देना बाएं और दाएं divs को हटा दें और दोनों पक्षों की पृष्ठभूमि छवि का उपयोग करें सेट एक पारदर्शी पृष्ठभूमि के साथ आपके सेट बाहरी div चौड़ाई में जहां वास्तविक div जाता है। कुछ इस तरह:

enter image description here

और सीएसएस ऐसा दिखेगा:

.Center
{    
    float:left;    
    background-color:#FFFFFF;
    width:771px;
}
.OutsideContainer
{
    padding: 0px 8px 0px 8px;
    background: url('picture.png') repeat-y; 
    margin:0 auto;  
    width:761px;
    overflow: hidden;
}

एचटीएमएल:

<body>
<div class="OutsideContainer">
  <div class="Center">blah blah <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />blah<br /></div>
</div>
</body>

सीएसएस के साथ ऐसा करने का यह एकमात्र तरीका हो सकता है।

3

Nachshon Schwartz 12 अगस्त 2011, 02:05

अगर मैं चौड़ाई लेता हूं, तो मैं आउटसाइडकंटनर द्वारा बनाए गए केंद्र को खो देता हूं (लगता है कि div को अभी अनदेखा किया गया है)। अगर मैं ऊंचाई के बजाय न्यूनतम-ऊंचाई निर्दिष्ट करता हूं, तो मैं Left और Right खो देता हूं। मैंने overflow जोड़ा। मैं अभी भी परिणाम प्राप्त करने में असमर्थ हूं। मुझे एक निश्चित चौड़ाई, गतिशील ऊंचाई चाहिए।

–

P.Brian.Mackey

12 अगस्त 2011, 00:58

3

क्षमा करें, मैंने सोचा था कि आप चौड़ाई गतिशील होना चाहते थे, मैंने उत्तर संपादित कर दिया है लेकिन समस्या यह है कि मुझे लगता है कि आप जो चाहते हैं वह तब तक संभव नहीं हो सकता जब तक कि आप बाएं और दाएं divs की ऊंचाई निर्धारित ऊंचाई पर सेट नहीं करते। अन्यथा आपके divs उन्हें div द्वारा दी गई ऊंचाई पर निर्भर कर रहे हैं जिसमें वहां मौजूद divs से मेल खाने के लिए सेट किया गया है, जिसके परिणामस्वरूप एक पूर्ण ब्राउज़र आकार div होता है।

–

Nachshon Schwartz

12 अगस्त 2011, 01:04

मेरे पास पहले से ही एक निश्चित ऊंचाई है जिसकी गणना माता-पिता, OutsideContainer से की जाती है। मैं यह नहीं देखता कि ऊंचाई को Left और Right तक ले जाने से कुछ कैसे हल होता है। क्या आप यह कहने की कोशिश कर रहे हैं कि यह संभव नहीं है?

–

P.Brian.Mackey

12 अगस्त 2011, 01:12

1

क्या आपका मतलब यह था कि मैं यह कहने की कोशिश कर रहा हूं कि यह असंभव है, यदि हां से हां, तो मैं यही कह रहा हूं, कम से कम जिस तरह से आप ऐसा करने की कोशिश कर रहे हैं। मैंने एक वैकल्पिक समाधान जोड़ा है, ऊपर संपादित देखें।

–

Nachshon Schwartz

12 अगस्त 2011, 01:26

2

आपका वैकल्पिक समाधान एक विजेता की तरह काम करता है। (मैंने यह भी सीखा कि IE7 PNG को सपोर्ट करता है)। धन्यवाद! एक तरफ, मोज़िला ब्राउज़र के लिए ऐसा करने का एक बेहतर तरीका है: stackoverflow.com/questions/2717127/css3- ग्रेडिएंट-बॉर्डर. मुझे IE7 का समर्थन करना है, इसलिए यहाँ उत्तर मेरी पसंद है।

–

P.Brian.Mackey

12 अगस्त 2011, 01:48

सीएसएस - मैं एक ढाल ड्रॉप छाया कैसे स्थापित कर सकता हूं?

1 उत्तर

संबंधित सवाल

नए सवाल

asp.net