असंभव लेआउट?

मुझे लगता है कि यह असंभव है, लेकिन सोचा कि मैं आपको लोगों से पूछूंगा।असंभव लेआउट?

मूल रूप से यह एक 2 कॉलम लेआउट है, लेकिन "व्यापार" निम्नलिखित चाहता है:

-हमेशा संपूर्ण ब्राउज़र विंडो

ब्राउज़र विंडो के -Accommodate आकार बदलने

वामपंथियों स्तंभ होगा तक का समय लग निश्चित चौड़ाई हो, लेकिन वह चौड़ाई पेज-टू-पेज से लचीली होनी चाहिए।

-Left कॉलम में निश्चित ऊंचाई के साथ शीर्ष पर एक क्षेत्र है।

-Left कॉलम का निचला क्षेत्र है। इसे ब्राउज़र विंडो के शेष लंबवत स्थान को लेना चाहिए। यदि सामग्री बहुत बड़ी है, तो उसके पास केवल उस क्षेत्र के लिए स्क्रॉल बार होगा।

-राइट कॉलम ब्राउज़र विंडो के शेष क्षैतिज स्थान लेना चाहिए।

-राइट कॉलम में निश्चित ऊंचाई के साथ शीर्ष पर एक क्षेत्र है।

-राइट कॉलम का निचला क्षेत्र है। इसे ब्राउज़र विंडो के शेष लंबवत स्थान को लेना चाहिए। यदि सामग्री बहुत बड़ी है, तो उसके पास केवल उस क्षेत्र के लिए स्क्रॉल बार होगा।

मैं सब कुछ कोशिश की है ... divs, जारी, बिल्कुल उपयुक्त, टेबल, टेबल में divs ...

यह और भी संभव है? http://imgur.com/zk1jP.png

स्रोत

2010-05-21 Kyle K

बहुत सीधे आगे होना चाहिए, जब तक बाएं और दाएं स्क्रीन चौड़ाई का अनुपात हो। क्या मैं आपके प्रयासों में से एक देख सकता हूं? – edl

आप किस ब्राउजर का समर्थन कर रहे हैं? – drusnov

यदि आप कुछ काम करने के लिए तैयार हैं तो बहुत आसान होना चाहिए। – User

यह बिल्कुल असंभव नहीं है, और आपको जावास्क्रिप्ट की आवश्यकता नहीं है। यदि आप उस ब्राउज़र की परवाह करते हैं तो आपको कुछ आईई 6 विशिष्ट हैक्स की आवश्यकता है।

लेआउट की कुंजी यह तथ्य है कि आप एक या अधिक किनारे की स्थिति को एक पूरी तरह से स्थित तत्व पर सेट कर सकते हैं। http://www.alistapart.com/articles/conflictingabsolutepositions/

यहाँ एक डेमो है: http://www.spookandpuff.com/examples/2col2section.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="en" lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 

    <title>2 col, 2 section layout.</title> 

    <style type="text/css" media="screen"> 
    #leftColumn { 
     position:absolute; 
     top:10px; 
     bottom:10px; 
     left:10px; 
     width:400px; 
    } 

    #rightColumn { 
     position:absolute; 
     top:10px; 
     bottom:10px; 
     right:10px; 
     left:410px;/* This must equal the total width of the #leftColumn, incl padding, border, margin, etc. */ 
    } 

    .topSection{ 
    position:absolute; 
    top:10px; 
    height:120px; 
    left:10px; 
    right:10px; 
    padding:10px; 
    } 

    .bottomSection{ 
    position:absolute; 
    bottom:10px; 
    top:160px; /* This must equal the total height of the .topSection, incl padding, border, margin, etc. */ 
    left:10px; 
    right:10px; 
    padding:10px; 
    overflow-y:auto; 
    } 

    /* Debug styles */ 
    body {background-color:#CCC;} 
    div {border:1px solid #FFF;} 

    #leftColumn {background-color:#7EF4B0;} 
    #rightColumn {background-color:#EEF4A7;} 
    #leftColumn .topSection{background-color:#56A97A;} 
    #rightColumn .topSection{background-color:#D6D06D;} 

    </style> 

</head> 

<body> 
    <div id="leftColumn"> 
     <div class="topSection"> 
     <p>Left column, top section.</p> 
     </div> 

     <div class="bottomSection"> 
     <p>Left column, bottom section.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </div> 
    </div> 

    <div id="rightColumn"> 
     <div class="topSection"> 
     <p>Right column, top section.</p> 

     </div> 

     <div class="bottomSection"> 
     <p>Right column, bottom section.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </div> 
    </div> 
</body> 
</html>

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

मैंने विचार को चित्रित करने के लिए सभी बक्से के आस-पास 10px अतिरिक्त स्थान की अनुमति दी है - आप शायद इन्हें वास्तविक लेआउट में 0 पर सेट कर देंगे।

आप जैसे कुछ नियमों के साथ अलग ढंग से स्तंभों के बीच .topSection की ऊंचाई सेट कर सकते हैं:

#leftColumn .topSection {height:xxx} 
#leftColumn .bottomSection {top:xxx} 

#rightColumn .topSection {height:yyy} 
#rightColumn .bottomSection {top:yyy}

मैं की चौड़ाई निर्दिष्ट करने के लिए एक वर्ग के साथ एक कंटेनर (या शरीर टैग पर एक वर्ग) का प्रयोग करेंगे बाएं कॉलम, जैसे कुछ:

#container.narrow #leftColumn {width:100px} 
#container.medium #leftColumn {width:200px} 
#container.wide #leftColumn {width:400px}

जो आपको चौड़ाई 'टेम्पलेट्स' के सेट को परिभाषित करने की अनुमति देता है, जिसके बीच आप स्विच कर सकते हैं।

स्रोत

2010-05-21 16:25:02 Beejamin

+1: बहुत अच्छा! – ANeves

यह कमाल है। धन्यवाद! –

वाह, कभी भी कोशिश करने के लिए सोचा नहीं। मेरे जावास्क्रिप्ट सुझाव पेंच - यह कमाल है !!! +1 – Addsy

यह कुछ जावास्क्रिप्ट का उपयोग कर अपने लेआउट की समस्याओं के साथ मदद करने के लिए पर विचार के लायक हो सकता है:

यहाँ यह कैसा दिखना चाहिए की एक छवि है। जबकि मुझे पता है कि यह आदर्श नहीं है, यह एक समाधान है जिसे मैंने पूर्ण-ऊंचाई लेआउट से निपटने का प्रयास करते समय सफलतापूर्वक उपयोग किया है।

यह उन्हें ब्राउज़र की ऊंचाई भरने रखने के लिए लेआउट आप पूरी ऊंचाई स्क्रॉल कॉलम फिर बस जावास्क्रिप्ट का एक छोटा सा का उपयोग बिना वर्णन प्राप्त करने के लिए ठीक होना चाहिए

स्रोत

2010-05-21 15:47:30 Addsy

क्या आपके पास कोई उदाहरण है? –

मेरा मानना है कि यह करता है, तो ऐसा करने के लिए काफी आसान है आपके पास ext.js ढांचे का उपयोग करने की लक्जरी है। कोड के साथ अपडेट होगा यदि कोई और कोई बेहतर जवाब नहीं देता है और यदि आप रुचि रखते हैं।

अद्यतन: यहां कोड है। परीक्षण और आईई 6 के साथ अच्छी तरह से काम करता है। सीएसएस-केवल समाधान की तुलना में दोष (i) जावास्क्रिप्ट की आवश्यकता है (अधिकांशतः ऐप पहले ही जेएस का उपयोग करता है); (ii) Ext.js आवश्यकता (जो शायद व्यवहार्य हो या न हो):

शैली = "ऊंचाई: 100px;" के उपयोग पर ध्यान दें int html और autoScroll: जावास्क्रिप्ट कोड में सही। यह नीचे दो पैनलों में स्क्रॉलबार के साथ शीर्ष 2 पैनलों और ओवरफ़्लो की निश्चित ऊंचाई की अनुमति देता है।

Ext.onReady(function(){ 

    Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); 

    var viewport = new Ext.Viewport({ 
     layout: 'border', 
     resizable: false, 
     items: [ 
      { 
       region: 'west', 
       id: 'west-panel',      
       split: false, 
       width: 300,           
       margins: '0 0 0 0', 
       layout: 'border',      
       items: [{ 
        region: 'north', 
        contentEl: 'west1',            
        border: false 
       },{ 
        region: 'center', 
        contentEl: 'west2',       
        border:false, 
        autoScroll: true 
       }] 
      }, 
      { 
       region:'center', 
       id:'center-panel',      
       split:false,      
       margins:'0 0 0 0', 
       layout:'border',      
       items: [{ 
        region: 'north', 
        contentEl: 'center1',       
        border:false 
       },{ 
        region: 'center', 
        contentEl: 'center2',       
        border:false, 
        autoScroll: true 
       }] 
      }         
     ] 
    });   
});

और html:

<div id="west1" style="height: 70px;background-color: #AAA;"> 
    <p>Hi. I'm fixed.</p> 
</div> 
<div id="west2"> 
    <p> long content goes here</p> 
</div> 
<div id="center1" style="height: 100px;background-color: #333;color: #FFF;"> 
    <p>Hi. I'm fixed too.</p>    
</div> 
<div id="center2">   
<p> long content goes here</p> 
</div>

डेमो उपलब्ध बाद में, फिर से, हो सकता है अगर आप या किसी को भी दिलचस्पी है। अगर आप कर सकते हैं तो कृपया संकेत दें।

स्रोत

2010-05-21 15:53:52

ExtJS का उपयोग करने में समस्या यह है कि आप अपने लेआउट को जावास्क्रिप्ट में बहुत अधिक ले जाते हैं, जब इसे स्टाइलशीट में यथासंभव परिभाषित किया जाना चाहिए। इस तरह के लेआउट पर जावास्क्रिप्ट का उपयोग करने की ज़रूरत नहीं है, शायद अतिरिक्त पॉलिश के अलावा। – Beejamin

@ बीजमैन: आपने जो कहा है उससे सहमत हैं और इनकार नहीं करेंगे कि आपका सीएसएस-केवल समाधान केवल एक चालाक है। मैं भी सीएसएस लेआउट पसंद करता हूं, बस आपके जैसे चालाक समाधान के साथ नहीं आया था। Extjs के पास इसकी जगह है और शायद इस मामले में नहीं। पल आपके ग्राहक या आप एक ऊर्ध्वाधर स्प्लिटर (बाएं और दाएं फलक के बीच) चाहते हैं, एक्स्टजेस में पहले से ही सीएसएस-केवल समाधान के साथ है, किसी को एक jQuery स्प्लिट-फलक प्लगइन या ऐसा कुछ खोजना शुरू करना होगा। फिर टैब, फिर टूलबार, आदि, सूची जारी है। ExtJS तब इसे आसान बनाते हैं। इनकार नहीं करेगा कि मैंने आज से आपको एक शानदार सीएसएस चाल सीखा है –

आप faux columns के साथ वहां पहुंचेंगे।

आप दो लंबवत अलगाव बनाने के लिए उस तकनीक का उपयोग कर सकते हैं।
यदि आप अलग स्क्रॉलबार चाहते हैं (कृपया नहीं, आप उपयोगिता बिल्ली का बच्चा रोना चाहते हैं) तो आप प्रत्येक लंबवत अलगाव को max-height: 100%; overflow: auto; बना सकते हैं ताकि वे 100% ऊंचाई तक पहुंचने के लिए स्क्रॉल कर सकें।

"फ़्लोटिंग-टॉप" ब्लू बार के लिए, आप पैरेंट अलगाव position: relative; padding-top: 150px; दे सकते हैं, और फिर नीली बार position: absolute; top: 0px; left: 0px; width: 100%; height: 150px; overflow: hidden; दें। (मुझे 100% चौड़ाई के बारे में निश्चित नहीं है।)
फिर हरा और पीला सामग्री इसे ओवरलैप नहीं करेगी।

स्रोत

2010-05-21 16:27:21 ANeves

असंभव लेआउट?

उत्तर

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