🤧 💝 🚵🏻 "ईयर्स" के साथ लेआउट IE7 में काम कर रहा है, तहखाने के साथ नीचे "nailed" 👨🏼‍🍳 😋 🏘️

शुभ दोपहर

यह पोस्ट "Ears" के साथ "लेआउट के बाद" पर आधारित है। इस पोस्ट में टिप्पणियों से, मुझे एहसास हुआ कि लोगों को IE7 के लिए इस तरह का लेआउट बनाने में एक वास्तविक समस्या है। इसलिए मैंने एक समाधान की पेशकश करने का फैसला किया जो मैं लंबे समय से अपने काम में उपयोग कर रहा हूं, और जो पूरी तरह से उपर्युक्त पोस्ट में बताई गई आवश्यकताओं को पूरा करता है।

तो, लेआउट आपको इन आवश्यकताओं को पूरा करने की अनुमति देता है:

अनुमति की परवाह किए बिना, साइट का सूचनात्मक हिस्सा बीच में होना चाहिए;
ग्राफिक ब्लॉक (कान) दाईं और बाईं ओर रहना चाहिए, और ये कान केवल तब दिखाई दे सकते हैं जब ब्राउज़र स्क्रीन का आकार बढ़ाया जाता है, और यदि आकार छोटा है, तो अनफिट भाग को छिपाया जाना चाहिए (आदर्श रूप से, ताकि कोई क्षैतिज स्क्रॉलबार अभी तक न हो);
पृष्ठ को 600px से 1000px तक रबर होना चाहिए;
तहखाने को हमेशा नीचे की ओर दबाया जाता है।

रबर संस्करण FF3.5 + में काम करता है (आप इसे FF3.11 में काम कर सकते हैं), IE7 +, ओपेरा 9.64+, क्रोम, सफारी।

IE6 + में निश्चित संस्करण काम करता है।

वास्तव में समाधान:

HTML में यह संरचना है:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > <html xmlns= "http://www.w3.org/1999/xhtml" xml:lang= "ru" > <head> <title> c «» 7 </title> <meta http-equiv= "Content-Type" content= "text/html;charset=UTF-8" />  <link rel= "stylesheet" media= "screen" type= "text/css" href= "styles/main.css" />   </head> <body> <div class = "wrapper" > <div class = "base" > <div class = "main_row" > <div class = "content_row" > </div> </div> <div class = "header" > <p>header</p> <div class = "b_left ie" >left</div> <div class = "b_right ie" >right</div> </div> </div> <div class = "footer" > </div> </div> </body> </html> * This source code was highlighted with Source Code Highlighter .

सीएसएस

html, body, div, span, applet, object, iframe, 
      

        
        
        
      

     h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
      

        
        
        
      

     a, abbr, acronym, address, big, cite, code, 
      

        
        
        
      

     del, dfn, em, font, img, ins, kbd, q, s, samp, 
      

        
        
        
      

     small, strike, strong, sub, sup, tt, var, 
      

        
        
        
      

     b, u, i, center, 
      

        
        
        
      

     dl, dt, dd, ol, ul, li, 
      

        
        
        
      

     fieldset, form, label, legend, 
      

        
        
        
      

     table, caption { 
      

        
        
        
      

     margin: 0; 
      

        
        
        
      

     padding: 0; 
      

        
        
        
      

     border: 0; 
      

        
        
        
      

     outline: 0; 
      

        
        
        
      

     font-size: 100.01%; 
      

        
        
        
      

     vertical-align: baseline; 
      

        
        
        
      

     background: transparent; 
      

        
        
        
      

     } 
      

        
        
        
      

     
      

        
        
        
      

     body { 
      

        
        
        
      

     line-height: 1.2; 
      

        
        
        
      

     } 
      

        
        
        
      

     
      

        
        
        
      

     /*---------------------------------------------------------------------------reset*/ 
      

        
        
        
      

     
      

        
        
        
      

     html, body { 
      

        
        
        
      

     color: #968c79; 
      

        
        
        
      

     height: 100%; 
      

        
        
        
      

     font: normal 12px / 16px Tahoma,Geneva,sans-serif; 
      

        
        
        
      

     } 
      

        
        
        
      

     
      

        
        
        
      

     .wrapper{ 
      

        
        
        
      

     position: relative; 
      

        
        
        
      

     max-width: 6000px; /*  Chrome, Safari -      50% 0*/ 
      

        
        
        
      

     width: 100%; 
      

        
        
        
      

     min-width: 600px; 
      

        
        
        
      

     height: 100%; 
      

        
        
        
      

     margin: 0 auto; 
      

        
        
        
      

     overflow: hidden; 
      

        
        
        
      

     } 
      

        
        
        
      

     
      

        
        
        
      

     .base { 
      

        
        
        
      

     min-width: 600px; 
      

        
        
        
      

     max-width:1000px; 
      

        
        
        
      

     padding: 200px 0 166px; 
      

        
        
        
      

     margin: 0 auto; 
      

        
        
        
      

     } 
      

        
        
        
      

     
      

        
        
        
      

     /*---------------------------------------------------------------------------global*/ 
      

        
        
        
      

     
      

        
        
        
      

     .ie{ 
      

        
        
        
      

     display: none; 
      

        
        
        
      

     } 
      

        
        
        
      

     /*---------------------------------------------------------------------------global*/ 
      

        
        
        
      

     
      

        
        
        
      

     .header { 
      

        
        
        
      

     z-index: 5; 
      

        
        
        
      

     position: absolute; 
      

        
        
        
      

     min-width: 600px; 
      

        
        
        
      

     max-width:1000px; 
      

        
        
        
      

     width: 100%; 
      

        
        
        
      

     height: 200px; 
      

        
        
        
      

     top: 0; 
      

        
        
        
      

     text-align: center; 
      

        
        
        
      

     color: #000; 
      

        
        
        
      

     background: #fff; 
      

        
        
        
      

     margin: 0 auto; 
      

        
        
        
      

     } 
      

        
        
        
      

     
      

        
        
        
      

     .header:before, .header:after{ 
      

        
        
        
      

     z-index: 5; 
      

        
        
        
      

     position: absolute; 
      

        
        
        
      

     width: 100px; 
      

        
        
        
      

     height: 200px; 
      

        
        
        
      

     top: 0; 
      

        
        
        
      

     text-align: center; 
      

        
        
        
      

     font-size: 20px; 
      

        
        
        
      

     color: #000; 
      

        
        
        
      

     
      

        
        
        
      

     } 
      

        
        
        
      

     
      

        
        
        
      

     .header:before{ 
      

        
        
        
      

     left: -100px; 
      

        
        
        
      

     background:#ddd; 
      

        
        
        
      

     content: "left"; 
      

        
        
        
      

     } 
      

        
        
        
      

     .header:after{ 
      

        
        
        
      

     right: -100px; 
      

        
        
        
      

     background:#ddd; 
      

        
        
        
      

     content: "right"; 
      

        
        
        
      

     } 
      

        
        
        
      

     
      

        
        
        
      

     .main_row { 
      

        
        
        
      

     z-index: 2; 
      

        
        
        
      

     position: relative; 
      

        
        
        
      

     width: 100%; 
      

        
        
        
      

     background: #ddd; 
      

        
        
        
      

     overflow: hidden; 
      

        
        
        
      

     } 
      

        
        
        
      

     
      

        
        
        
      

     .content_row { 
      

        
        
        
      

     position: relative; 
      

        
        
        
      

     width: 100%; 
      

        
        
        
      

     height: 300px; 
      

        
        
        
      

     overflow: hidden; 
      

        
        
        
      

     } 
      

        
        
        
      

     
      

        
        
        
      

     .footer { 
      

        
        
        
      

     z-index: 10; 
      

        
        
        
      

     position: absolute; 
      

        
        
        
      

     width: 100%; 
      

        
        
        
      

     height: 166px; 
      

        
        
        
      

     bottom: 0; 
      

        
        
        
      

     margin: 0 auto; 
      

        
        
        
      

     background: url(../i/footer.jpg) 0 0 repeat-x; 
      

        
        
        
      

     overflow: hidden; 
      

        
        
        
      

     }

आईई के लिए सीएसएस

@import "main.css"; 
      

        
        
        
      

     
      

        
        
        
      

     ie{ 
      

        
        
        
      

     display: block; 
      

        
        
        
      

     } 
      

        
        
        
      

     
      

        
        
        
      

     .b_left, .b_right { 
      

        
        
        
      

     z-index: 5; 
      

        
        
        
      

     position: absolute; 
      

        
        
        
      

     display: block; 
      

        
        
        
      

     width: 100px; 
      

        
        
        
      

     height: 200px; 
      

        
        
        
      

     text-align: center; 
      

        
        
        
      

     font-size: 20px; 
      

        
        
        
      

     color: #000; 
      

        
        
        
      

     top: 0; 
      

        
        
        
      

     } 
      

        
        
        
      

     
      

        
        
        
      

     .b_left{ 
      

        
        
        
      

     left: -100px; 
      

        
        
        
      

     background:#ddd; 
      

        
        
        
      

     } 
      

        
        
        
      

     .b_right{ 
      

        
        
        
      

     right: -100px; 
      

        
        
        
      

     background:#ddd; 
      

        
        
        
      

     }

यहाँ क्या है - dl.dropbox.com/u/585674/test/index.html

यदि आवश्यक हो, तो लेआउट को एक निश्चित में परिवर्तित किया जा सकता है और यह IE6 + में काम करेगा (मैं सिर्फ मिनट-चौड़ाई + अधिकतम-चौड़ाई तय करने के लिए एक स्थिर कार्य समाधान नहीं ढूंढ सका)।

"ईयर्स" के साथ लेआउट IE7 में काम कर रहा है, तहखाने के साथ नीचे "nailed"

तो, लेआउट आपको इन आवश्यकताओं को पूरा करने की अनुमति देता है:

वास्तव में समाधान:

सीएसएस

आईई के लिए सीएसएस

More articles: