2012-04-21 6 views
5

मैंने सजावटी उद्देश्यों के लिए पृष्ठभूमि छवियों को रखने के लिए दो divs जोड़े - जैसा कि वेबसाइट पर मेरे साथ काम कर रहे कलाकार द्वारा अनुरोध किया गया है।पूर्ण स्थिति: एक तत्व खिड़की फैलाता है, अन्य तत्व इसे प्रभावित नहीं करता है। दोनों एक ही कोड का उपयोग करते हैं: सी

पहले, यह बहुत अच्छा काम करता था। पृष्ठ की चौड़ाई को प्रभावित किए बिना छवियों को वेबसाइट सामग्री धारण करने वाले रैपर div के प्रत्येक पक्ष पर छवियों को दिखाना था।

फिर वेबसाइट के मालिक होने वाले संगठन को एक और प्रायोजक मिला, जिस लोगो को मुझे दाईं ओर एक कॉलम में जोड़ना था। मैंने 5 वें "बटन" के लिए एक नई आईडी बनाई और इसके लिए एक div बनाया। इसे अपलोड करते हुए, मैंने देखा कि किसी भी स्पष्ट कारण के लिए पृष्ठ के निचले हिस्से में एक स्क्रॉल बार अचानक दिखाई दिया था।

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

(आप कार्रवाई में समस्या को देख सकते हैं, जबकि यह www.torucon.no/no/ में रहता है)

कृपया मेरी मदद करो बाहर!

#wolf 
{ 
position:absolute; 
min-height:500px; 
min-width:498px; 
left:-293px; 
top:150px; 
background-image:url('http://www.torucon.no/css/wolf.png'); 
z-index:-1; 
} 

#lion 
{ 
position:absolute; 
min-height:500px; 
min-width:498px; 
right:-293px; 
top:150px; 
background-image:url('http://www.torucon.no/css/lion.png'); 
z-index:-1; 
} 

यहाँ divs के एचटीएमएल दिखा HTML स्निपेट है::

<div class="wrapper"> <!-- Contains the entire website for structure --> 
<div id="wolf"> 
</div> 
<div id="lion"> 
</div> 

((मामले में आप यह नहीं मिला: आवरण div यहाँ divs दोनों के लिए सीएसएस है माना जाता है, और यह है। लेकिन जब मैं अपनी खिड़की का आकार बदलता हूं, तो मुझे लगता है कि रैपर सामग्री ब्राउज़र विंडो सीमाओं के करीब भी है, इससे पहले स्क्रॉल बार दिखाई देता है। यह कम रिज़ॉल्यूशन या छोटी स्क्रीन वाले कंप्यूटरों पर परेशान होगा !))

+0

क्या मैं 'शरीर {/ * अन्य सामान */ओवरफ्लो-एक्स: छुपा हुआ सुझाव दे सकता हूं; } '? मुझे यकीन नहीं है, फिर भी, * क्यों * यह हो रहा है, लेकिन ऐसा लगता है कि कम से कम लक्षणों का इलाज होता है। कुछ ब्राउज़रों में समस्याओं से बचने के लिए आपको 'ओवरफ्लो-वाई: ऑटो;' निर्दिष्ट करने की आवश्यकता हो सकती है। –

+0

@ डेविड थॉमस हाँ, मैंने सोचा कि मैं भी ऐसा कर सकता हूं। लेकिन यह वास्तव में नहीं होना चाहिए, यह चाहिए? पूरी तरह से तैनात तत्वों को पृष्ठ प्रवाह द्वारा अनदेखा किया जाता है, और इस प्रकार यह शरीर तत्व की चौड़ाई को प्रभावित नहीं करना चाहिए - जहां तक ​​मैं समझता हूं। तो, यह मेरी गलती नहीं है, बल्कि ब्राउज़र को कोड प्रस्तुत करने की क्षमता के साथ एक समस्या है? इसके अलावा - अतिप्रवाह-एक्स का उपयोग करके: छुपा ;, क्या स्क्रीन के आकार बदलने के बाद भी रैपर div ब्राउज़र की दीवारों के बाहर गायब हो जाता है? –

+0

मुझे संदेह है कि आपके द्वारा उपयोग किए जाने वाले ब्राउज़र के आधार पर, डेवलपर्स ने प्रतिपादन के लिए डब्ल्यू 3 मानकों का पालन किया (कोई सॉफ़्टवेयर सही नहीं है, इसलिए वहां बग हो सकते हैं, लेकिन यहां तक ​​कि ...)। और हाँ; इसमें एक दृष्टिकोण के रूप में इसकी समस्याएं हैं। =/ –

उत्तर

2

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

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

मेरा मानना ​​है कि आप शरीर पर अतिप्रवाह-छिपे हुए उपयोग के बारे में सही हैं - यदि व्यूपोर्ट की चौड़ाई के नीचे व्यूपोर्ट का आकार बदल दिया गया है तो आप अतिप्रवाह सामग्री देखने के लिए स्क्रॉल करने की क्षमता खो देंगे।

+1

आप जानते हैं, यह वास्तव में एक अच्छा समाधान था। और मैंने पहले भी ऐसा किया है! मैंने अभी इन अजीब गलतियों को ठीक करने के लिए बहुत सारे कोड टाइप करने के लिए उपयोग किया है, कि मैंने उन सरल, तार्किक समाधानों के बारे में सोचना बंद कर दिया है। धन्यवाद! <3 –

0

मैंने जांच की है कि आपने लिंक पोस्ट किया है http://www.torucon.no/no/ लेकिन मैं नीचे स्क्रॉल बार, देख नहीं सकता, वैसे भी, आप पृष्ठभूमि सेट क्यों नहीं कर सकते?

<body> 
<div class="overlay"> 
    <div class="wrapper"> 
    </div> 
</div> 
</body> 


<style> 
    body{width:100%; background:---;} 
.overlay{width:100%; background:---;} 
<style>