समस्या का चित्रण निम्न प्रकार से किया जा सकता है:
लेआउट कार्य निम्नानुसार है:
- - संकल्प (ब्राउज़र का आकार) की परवाह किए बिना, साइट का सूचनात्मक हिस्सा बीच में था;
- - ग्राफिक ब्लॉक (कान) दाईं और बाईं ओर बने रहने चाहिए, और ये कान केवल तब दिखाई दे सकते हैं जब ब्राउज़र स्क्रीन का आकार बढ़ जाता है, और यदि आकार छोटा है, तो अनफिट भाग को छिपाया जाना चाहिए (आदर्श रूप से, ताकि कोई क्षैतिज स्क्रॉलबार न हो) ;;
- - पृष्ठ 680px से 1000px तक रबर होना चाहिए।
FF3, FF4, IE8 और लगभग ओपेरा के लिए काम करता है।
इस समस्या का समाधान निम्नानुसार प्रस्तुत किया जा सकता है:
- # कोर - सबसे बाहरी ब्लॉक, जो ब्राउज़र विंडो में शामिल नहीं है, उसे काट देता है;
- #warp - 980px पर स्क्रीन ब्लॉक के बीच में एक अपेक्षाकृत तैनात, # कॉन्टेंट और # हेड के लिए एक कंटेनर;
- # हेड - हेडर ब्लॉक, # लेफ्ट-हेड के लिए कंटेनर, # राइट-हेड;
- # बाएं-सिर - बाएं "कान";
- # दायां-सिर - सही "कान";
- # कंटेंट - सामग्री।
बिंदु #warp ब्लॉक में "कान" (# बाएं-सिर, # दायां-सिर) बिल्कुल स्थित है, जो स्क्रीन के सापेक्ष स्क्रीन के मध्य में स्थित है और नकारात्मक बाएँ और दाएँ फ़ील्ड का उपयोग करके उन्हें # हेड के बाहर ले जाता है। इसी के साथ
UPD: यह विधि केवल तब ही प्रासंगिक है जब एक दोहराई जाने वाली पृष्ठभूमि हो जो शरीर पर होनी चाहिए।
UPD2: आलोचना के लिए सभी उपयोगकर्ताओं को धन्यवाद। वह पक्ष में गई। थोड़ा सोचने के बाद, मुझे रबर के साथ एक मॉडल का एहसास हुआ (दूसरा उदाहरण देखें)। मैं कोड अपलोड नहीं करूंगा क्योंकि हर कोई जानता है कि "Vew Source" बटन कहां है।
UPD3: एक केस स्टडी जहां इस तरह की बात सामने आ सकती है।
काम करने का उदाहरण: http://8xx8.ru/habrahabr/ears/ ।
रबर 680px 1000px के साथ कानों का एक कार्यशील उदाहरण: http://8xx8.ru/habrahabr/ears/index1.html ।