2009-11-09 36 views
10

मैंने पिछले कुछ हफ्तों में बस एक लेआउट को सही ढंग से डिज़ाइन करने का तरीका सीख लिया है। मैंने मूल रूप से सोचा कि मेरे पास मेरी वेबसाइट लेआउट के साथ सबकुछ सही था और कोडिंग को वर्डप्रेस में स्थानांतरित करने के लिए तैयार था ... और फिर मैंने गलती से अपने वेब ब्राउज़र का आकार बदल दिया और पाया कि मेरी सभी div परतें एक दूसरे को ओवरलैप कर रही थीं। overlapping divsजब ब्राउज़र का आकार बदलता है तो मैं अपने div परतों को ओवरलैपिंग से कैसे रोकूं?

मूल रूप से यह लगता है जैसे कि यह मुख्य रूप से मेरी केंद्र सामग्री div जाता है कि बाहर निचोड़ा जा रहा है, साथ ही साथ मेरी शीर्षक छवि और नेविगेशन चुड़ैल के रूप में एक ही शीर्ष div में हैं:

यहाँ यह कैसा दिखता है। मेरे पाद लेख भी नीचे निचोड़ा हुआ है। मैंने इस समस्या के समाधान के लिए इंटरनेट की खोज की है और मुझे कोई चीज़ नहीं मिल रही है।

मैं इसे कैसे ठीक कर सकता हूं ताकि ब्राउज़र का आकार बदलने पर मेरा div स्थान पर रहे?

उत्तर

2

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

0

क्या आप अपना कुछ सीएसएस पोस्ट कर सकते हैं?

सबसे आसान तरीका है अपने सभी कॉलम अपेक्षाकृत sane width सेटिंग्स को देना ताकि ब्राउज़र विंडो का आकार आपके लेआउट के आकार को प्रभावित न करे। व्यवहार करने के लिए द्रव-चौड़ाई कॉलम प्राप्त करना अधिक जटिल है और आपके लेआउट के विनिर्देशों पर अधिक निर्भर करता है।

10

के रूप में वाल्टर ने कहा कि आपका सीएसएस सहायक होगा। लेकिन, मुख्य समस्या यह है कि div में सामग्री बहती है अन्य divs में सामग्री की div में सभी सामग्री शामिल नहीं हो सकती है।
अपने सीएसएस में, div की ओवरफ्लो प्रॉपर्टी को या तो ऑटो (स्क्रॉल बार दिखाता है) या छुपाएं (सामग्री को केवल छिपाने के लिए सामग्री को छिपाने के लिए) उदा।

overflow:auto; 

या

overflow:hidden; 
+1

मैंने आपके सुझाव की कोशिश की लेकिन मुझे बिल्कुल यकीन नहीं है कि अतिप्रवाह संपत्ति कहां रखना है। मैंने इसे शेष सामग्री के कंटेनर डिव में रखा और दुर्भाग्यवश कुछ भी नहीं किया। फिर भी, यहां मेरे पूरे सीएसएस का एक लिंक है। मुझे यकीन नहीं था कि वास्तव में क्या प्रासंगिक होगा या नहीं। मदद के लिए अब तक धन्यवाद। मुझे आशा है कि इसे हल करने का एक आसान तरीका है। :( –

+0

अतिप्रवाह जो भी div में होता है जिसमें "यह एक उपशीर्षक" पाठ होता है। यदि आप इसे div के ऊपर एक मूल div में डालते हैं जिसमें शीर्षक टेक्स्ट होता है तो यह ठीक से वारिस नहीं हो सकता है। क्या आप HTML को भी पोस्ट कर सकते हैं इसके अलावा, जैसा कि पहले कहा गया था, लचीला चौड़ाई आम तौर पर एक बेहतर विचार है, लेकिन आपको अपने सीएसएस को दोबारा करने की आवश्यकता होगी। – ErikHazzard

+0

अतिप्रवाह मुझे काम नहीं कर रहा था, दुख की बात है। मुझे लगता है कि चित्र भी इसमें शामिल हो गए हैं अंधेरा हेडर क्षेत्र, जिसमें मेरी साइट का नाम और मेरा नेविगेशन है। मैंने अपना टेस्ट पेज अपलोड किया है ताकि आप इसे देख सकें (काम नहीं कर रहे)। http://lifesgarbage.com/rebnation.html –

1

ईएमएस में अपनी चौड़ाई और फ़ॉन्ट आकार को व्यक्त करें। यहां एक अच्छा कैलकुलेटर है: http://riddle.pl/emcalc/

प्रतिशत भी काम करेंगे।

स्टैक ओवरफ्लो में सीएसएस की जांच करें, और यहां अपने ब्राउज़र में ज़ूम स्तर का आकार बदलने का प्रयास करें - आप देखेंगे कि सब कुछ किसी भी ज़ूम स्तर पर अच्छी तरह से आकार बदलता है।

0

min-width संपत्ति देखें। एक अन्य विकल्प तो जैसे CSS3 Media Queries साथ जब व्यूपोर्ट चौड़ाई x पिक्सल से नीचे है एक और स्टाइलशीट लागू कर रहा है:

@media all and (max-width: 30em) { 
    /* Alternative narrow styles */ 
} 

या तो:

<link media="all and (max-width: 30em)" 
     rel="stylesheet" href="narrow.css" /> 

CSS3 के मीडिया के प्रश्नों अभी भी व्यापक रूप से समर्थित नहीं हैं, तो आप कर सकते हैं एक समाधान में देखें जो window.onresize ईवेंट के माध्यम से जावास्क्रिप्ट के साथ "संकीर्ण" स्टाइल शीट लागू करता है। मैं ऐसे समाधान के लिए jQuery की अनुशंसा करता हूं।

1

आप न्यूनतम चौड़ाई भी कोशिश कर सकते हैं। मुझे लगता है कि केंद्र div तरल पदार्थ है और साइडबार निश्चित चौड़ाई हैं।

0

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

तो मैंने जो कंटेनर में किया था, मैंने ऊंचाई और चौड़ाई निर्धारित की थी। इससे पहले कि मैंने ऊंचाई निर्धारित नहीं की, मैंने divs को ऊंचाई निर्धारित करने दिया।

संबंधित मुद्दे

 संबंधित मुद्दे