मंचों

Div तत्व बनाना शेष लंबवत स्थान भरता है? (सीएसएस)

फ्लोयडे

मूल पोस्टर
अप्रैल 7, 2005
मॉन्टेरी मेक्सिको
  • 27 मार्च 2006
क्या यह संभव है?
मेरे पास दो डिव हैं। एक की ऊंचाई निश्चित है और मैं चाहता हूं कि दूसरा खिड़की पर शेष लंबवत स्थान को भर दे। अगर मैं बाद वाले div की ऊंचाई को 100% पर सेट करता हूं, तो यह इसे खिड़की के समान ऊंचाई बना देगा, लेकिन मैं चाहता हूं कि यह खिड़की की ऊंचाई पहले div की ऊंचाई से कम हो।

यह वह कोड है जिसका मैं उपयोग कर रहा हूं:
कोड: |_+_|
मैंने कुछ छवियां भी शामिल कीं जो दिखाती हैं कि मैं क्या करना चाहता हूं और अब तक मैं क्या कर पाया हूं। अग्रिम में धन्यवाद

संलग्नक

  • xa.gif xa.gif'file-meta'> 2.6 KB · देखे जाने की संख्या: 10,076
  • xb.gif xb.gif'file-meta'> 3 KB · देखे जाने की संख्या: 9,950
एन

कोई नामब्रांड

नवंबर 17, 2005


हैलिफ़ैक्स, कनाडा
  • 27 मार्च 2006
दूसरे के अंदर 1 घोंसला क्यों नहीं?

अन्यथा, मैं ऐसा कोई तरीका नहीं सोच सकता जिससे आपको वह मिल जाए जो आप चाहते हैं।

स्टीवप

13 अक्टूबर 2004
यूके
  • 27 मार्च 2006
मुझे लगता है कि यह हो सकता है कि आप दूसरी परत को यह नहीं बता रहे हैं कि इसे कहां से शुरू करना है, इसलिए इसका मानना ​​​​है कि यह ऊपर से शुरू होता है, इसलिए पहली परत को ओवरलैप कर रहा है।
प्रयत्न:




अनाम दस्तावेज़










प्रति






बी


सी




डी


और







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

फ्लोयडे

मूल पोस्टर
अप्रैल 7, 2005
मॉन्टेरी मेक्सिको
  • 27 मार्च 2006
NoNameBrand ने कहा: क्यों न पहले को दूसरे के अंदर घोंसला बनाया जाए?

अन्यथा, मैं ऐसा कोई तरीका नहीं सोच सकता जिससे आपको वह मिल जाए जो आप चाहते हैं।

धन्यवाद, यह दृष्टि से काम करता है, लेकिन दूसरा div इस लेआउट के लिए एक कंटेनर होगा, इसलिए मुझे अभी भी उचित आयामों की आवश्यकता है ताकि इसकी सामग्री उन्हें प्राप्त कर सके।

तो शायद यह संभव नहीं है? शायद मुझे इसे काम करने के लिए थोड़ा जावास्क्रिप्ट का उपयोग करने की आवश्यकता होगी?

स्टीवप ने कहा: कोशिश करो:
धन्यवाद, लेकिन मैं इसे काम नहीं कर सका, आपने किस ब्राउज़र का उपयोग किया?

फ्लोयडे

मूल पोस्टर
अप्रैल 7, 2005
मॉन्टेरी मेक्सिको
  • 27 मार्च 2006
चीजों की भव्य योजना

ठीक है यहाँ मेरे अंतिम लक्ष्य की एक तस्वीर है। अब तक मैं इसे धीरे-धीरे कर रहा हूं, तो शायद समस्या मेरा प्रारंभिक दृष्टिकोण है। तो आप लोग इस पर कैसे पहुंचेंगे (मुझे सिर्फ विचारों की जरूरत है)? क्या आप शुद्ध सीएसएस का उपयोग करेंगे, या आप टेबल या फ्रेम में देंगे?

संलग्नक

  • Grand_scheme.gif Grand_scheme.gif'file-meta'> 40.2 KB · देखे जाने की संख्या: 450

स्टीवप

13 अक्टूबर 2004
यूके
  • 27 मार्च 2006
मैंने सफारी का इस्तेमाल किया। कोड के हिस्से को टेक्स्ट फ़ाइल में कॉपी और पेस्ट करें - सुनिश्चित करें कि जब आप इसे सहेजते हैं तो इसमें .html प्रत्यय होता है। फिर बस नई फ़ाइल को एक खुली ब्राउज़र विंडो में खींचें। फ़ायरफ़ॉक्स के साथ बस इसका परीक्षण किया और ठीक है - कम से कम मुझे लगता है कि आप जो चाहते हैं वह है।
आपको जिस बिट के साथ खेलना है वह यह है:
# परत1 {
स्थिति: पूर्ण;
बाएं: 0 पीएक्स;
शीर्ष: 0 पीएक्स;
चौड़ाई: 100%;
ऊंचाई: 180 पीएक्स;
जेड-इंडेक्स: 1;
पृष्ठभूमि-रंग: #99CCFF;
}

अपने पृष्ठ को कागज़ के एक टुकड़े पर खुरदरा करें ताकि आपको स्थितियाँ सही मिलें, और यह आपको प्रत्येक परत के शीर्ष LH कोने की स्थिति देगा। परत 1 की ऊंचाई परत 2 की प्रारंभिक स्थिति निर्धारित करेगी - इस मामले में परत 2 में होना चाहिए aशीर्ष: 180px;कोड की पंक्ति।
यदि आप चाहते हैं कि 3 परतें जैसा कि आप अपनी पिछली पोस्ट में दिखाते हैं, तो सबसे बाईं परत होगी:
# परत1 {
स्थिति: पूर्ण;
बाएं: 0 पीएक्स;
शीर्ष: 0 पीएक्स;
चौड़ाई: 200px;
ऊंचाई: 100%;
जेड-इंडेक्स: 1;
पृष्ठभूमि-रंग: #336699;
}

और शीर्ष आरएच परत होगी:
# परत1 {
स्थिति: पूर्ण;
बाएं: 200 पीएक्स;
शीर्ष: 0 पीएक्स;
चौड़ाई: 100%;
ऊंचाई: 180 पीएक्स;
जेड-इंडेक्स: 2;
पृष्ठभूमि-रंग: #33CCFF;
}

और खिड़की के शेष भाग को भरने के लिए तीसरी परत (हालाँकि इसका आकार बदला गया है) कुछ इस तरह होनी चाहिए:
# परत1 {
स्थिति: पूर्ण;
बाएं: 200 पीएक्स;
शीर्ष: 180px;
चौड़ाई: 100%;
ऊंचाई: 100%;
जेड-इंडेक्स: 3;
पृष्ठभूमि-रंग: #99CCFF;
}

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

पीएस मैं एक विशेषज्ञ नहीं हूं, मैं गलत हो सकता हूं लेकिन मुझे आशा है कि यह मदद करता है। मैं जो कह सकता हूं वह यह है कि मेरा पहला कोड काम करता प्रतीत होता है। मैं व्यक्तिगत रूप से परतों को घोंसला नहीं बनाऊंगा अगर मैं थोड़ी मदद कर सकता हूं, लेकिन यह सिर्फ मैं हूं - मैं केवल सरल करता हूं। एन

कोई नामब्रांड

नवंबर 17, 2005
हैलिफ़ैक्स, कनाडा
  • 27 मार्च 2006
यह 'परतें' सामान क्या है? क्या वह ड्रीमविवर-एस्क 'ब्रेक स्टफ रियल-गुड' के लिए है?

यहां है जो मुझे करना होगा:
कोड:
फू   

आप विश्वास करते है!

जून 14, 2003
एमडी / वीए / डीसी
  • 27 मार्च 2006
डिकॉन्सेप्ट ...

फ्लैशऑब्जेक्ट देखें और डाउनलोड में डिव फुलस्क्रीन बनाने के लिए कोड है।

http://blog.deconcept.com/flashobject/

फ्लोयडे

मूल पोस्टर
अप्रैल 7, 2005
मॉन्टेरी मेक्सिको
  • 28 मार्च 2006
सभी लोगों की मदद के लिए धन्यवाद, लेकिन मुझे अभी एहसास हुआ कि मुझे जो सटीक लेआउट चाहिए वह निश्चित चौड़ाई/ऊंचाई और प्रतिशत के संयोजन के साथ हासिल करना असंभव है। मैंने इसे केवल प्रतिशत का उपयोग करके फिर से लिखा और अब यह काम करता है। यदि आप मार्कअप में रुचि रखते हैं तो मुझे बताएं और मैं इसे पोस्ट करूंगा।

स्टीवप

13 अक्टूबर 2004
यूके
  • 28 मार्च 2006
फ़्लॉइड ने कहा: यदि आप मार्कअप में रुचि रखते हैं तो मुझे बताएं और मैं इसे पोस्ट करूंगा।
अगर आपके पास दोबारा पोस्ट करने का समय है तो मैं देखना चाहता हूं।
NoNameBrand ने कहा: यह 'परत' सामग्री क्या है? क्या वह ड्रीमविवर-एस्क 'ब्रेक स्टफ रियल-गुड' के लिए है?
ठीक है, मुझे 'ब्रेकिंग स्टफ' के बारे में पता नहीं है, लेकिन मुझे लगता है कि आपने सोचा था कि मैं सीएसएस बोफ नहीं हूं - परतें डीडब्ल्यू द्वारा उन चीजों को दिया जाने वाला एक सुविधाजनक नाम है जो मुझे लगता है कि 'सीएसएस स्थित तत्व' कहा जाना चाहिए - और मुझे लगता है कि वे उन्हें कहते हैं कि मेरे जैसे लोगों को डीटीपी/फ़ोटोशॉप पृष्ठभूमि से थोड़ा अधिक सहज महसूस कराने के लिए। आपके द्वारा अपनी पोस्ट में शामिल किए गए कोड को देखते हुए NoNameBrand यह मेरी तुलना में बहुत अधिक सुरुचिपूर्ण है - मुझे वास्तव में अपने सिर को div टैग के चारों ओर ले जाने के लिए एक स्टैब रखना होगा। ओपी और उत्तरों के लिए धन्यवाद। एन

कोई नामब्रांड

नवंबर 17, 2005
हैलिफ़ैक्स, कनाडा
  • 28 मार्च 2006
स्टीवप ने कहा: ठीक है, मुझे 'ब्रेकिंग स्टफ' के बारे में पता नहीं है, लेकिन मुझे लगता है कि आपने सोचा था कि मैं सीएसएस बोफ नहीं हूं - परतें डीडब्ल्यू द्वारा उन चीजों को दिया गया एक सुविधाजनक नाम है जो मुझे लगता है कि 'सीएसएस स्थित तत्व' कहा जाना चाहिए '

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

मुझे वास्तव में अपने सिर को div टैग के चारों ओर घुमाने के लिए एक स्टैब रखना होगा।

ए सिर्फ एक मनमाना ब्लॉक है - इसका अर्थपूर्ण रूप से कुछ भी मतलब नहीं है, जिस तरह से a

करता है (पाठ का एक पैराग्राफ)। एएक ही विचार है, लेकिन इनलाइन चीजों के लिए (जैसे a टैग, लेकिन फिर से, अर्थ मुक्त)।

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

फ्लोयडे

मूल पोस्टर
अप्रैल 7, 2005
मॉन्टेरी मेक्सिको
  • 28 मार्च 2006
स्टीवप ने कहा: यदि आपके पास दोबारा पोस्ट करने का समय है तो मैं एक बार देखना चाहूंगा।
यहाँ यह है, वहाँ थोड़ा सा स्पेनिश है, मुझे आशा है कि यह बहुत भ्रमित नहीं है:

कोड:
ग्रैंड स्कीम एचटीएमएल {ऊंचाई: 100%; } बॉडी { मार्जिन: 0; पैडिंग: 0; ऊंचाई: 100%; चौड़ाई: 100%; } #बाएं, #दाएं {फ्लोट: बाएं; } #बाएं {ऊंचाई:100%; पृष्ठभूमि-रंग: नारंगी; चौड़ाई: 10%; } #दाएं {ऊंचाई: 100%; स्थिति: रिश्तेदार; चौड़ाई: 90%; } #शीर्ष {पृष्ठभूमि-रंग: नीला; ऊंचाई: 10%; } # तस्वीरें { स्थिति: रिश्तेदार; ऊंचाई: 90%; } #foto_sup_izq, #foto_sup_der, #foto_inf_izq, #foto_inf_der {ऊंचाई: 50%; चौड़ाई: 50%; अतिप्रवाह: ऑटो; स्थिति: निरपेक्ष; } #foto_sup_izq, #foto_sup_der { शीर्ष: 0; } #foto_sup_der, #foto_inf_der {बाएं: 50%; } #foto_inf_izq, #foto_inf_der { शीर्ष: 50%; } img/forums/80/making-div-element-fill-remaining-vertical-space-4.jpg 

संलग्नक

  • img/forums/80/making-div-element-fill-remaining-vertical-space-4.jpg'file-meta'> 36.3 KB · देखे जाने की संख्या: 405