सीएसएस/एचटीएमएल

में पूर्ण स्क्रीन साइट मैं चैट साइट के लिए वेबसाइट डिज़ाइन पर काम कर रहा हूं, लेकिन मैं इसे पाने के लिए हर संभव प्रयास में विफल रहा हूं। मैंने टेबल के साथ ऐसा करने की कोशिश की है, यह हमेशा एक ब्राउज़र (ज्यादातर आईई थू), divs, और बहुत कुछ में विफल रहा है।सीएसएस/एचटीएमएल

वेबसाइट को 900 की न्यूनतम चौड़ाई और न्यूनतम ऊंचाई के साथ पूर्णस्क्रीन होना चाहिए: 500px तो यह कोई छोटा नहीं होगा। मैं बिना किसी जावास्क्रिप्ट के इसे करना चाहता हूं (मैंने इसे जेएस में बनाया है, लेकिन इसके बिना इसे करने की जरूरत है: <)

यहां एक तस्वीर है जो इसे दिखाना चाहिए।

मुझे आशा है कि यह शुद्ध सीएसएस/HTML में संभव है

अग्रिम धन्यवाद

संपादित

मैं फ़ायरफ़ॉक्स + क्रोम में काम मिल गया है, लेकिन IE का पालन नहीं करने का फैसला करता कोई नियम ...

<html> 
<head> 
<style type="text/css"> 
    body{ 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-size: 100%; 
    vertical-align: baseline; 
    } 
</style> 
</head> 
<body> 

<div style="height: 100%; width: 100%;"> 
    <div style="position: relative; height: 100%; width: 100%; background-color: gray; min-width: 900px; min-height: 500px;"> 
    <div style="position: absolute; height: 30px;left:0px; right: 300px ; background-color: yellow; bottom: 0;"> 
    Input 
    </div> 

    <div style="position: absolute; height: 200px; width:300px; right: 0px; background-color: green; bottom: 0;"> 
    ad 
    </div> 

    <div style="position: absolute; bottom: 200px; width:300px; right: 0px; top: 20px; background-color: blue;"> 
    online 
    </div> 
    <div style="position: absolute; width:300px; right: 0px; top: 0px; height: 20px; background-color: red;"> 
    online menu 
    </div> 
    <div style="position: absolute; right: 300px; top: 0px; left: 0px; height: 20px; background-color: yellow;"> 
    tabs 
    </div> 
    </div> 
</div> 
</body> 

</html>

स्रोत

2010-12-03 Jorik

आपकी छवि लिंक टूटा हुआ प्रतीत होता है। क्या आप टिनपीक की कोशिश कर सकते हैं? – Qix

ऑलराइट, http://i52.tinypic.com/33m3g3o.png – Jorik

कूल, यह काम करता है, मैं नीचे अपना उत्तर अपडेट करूंगा। – Qix

अलर ठीक है, आपके प्रश्न से कुछ प्रश्न निकाले गए थे;

सबसे पहले, एक छोटी सी युक्ति: आईई में सीएसएस अन्य ब्राउज़रों की तुलना में ज्यादातर मामलों में बेहद अलग दिखता है। इसके लिए, आईई पर लागू होने के लिए एक संपत्ति के सामने विभिन्न "आईई हैक" प्रतीकों (मैं # प्रतीक का उपयोग करता हूं) का उपयोग करें।

उदाहरण के लिए:

html 
{ 
    background: #F00 ; 
    #background: #0F0 !important ; 
}

सभी ब्राउज़रों एक लाल रंग की पृष्ठभूमि को दिखाने कर देगा, और केवल IE एक हरे रंग की पृष्ठभूमि होगा।

दूसरा, min-width और min-height गुणों का उपयोग क्यों न करें? वे सब कुछ के साथ संगत हैं (और आईई 6 या इससे पहले की छोटी गाड़ी; अधिक जानकारी के लिए here देखें) और हमेशा मेरे साथ चाल करें। चौड़ाई और 100% करने के लिए ऊंचाई (जाहिर है), और इस सब के दोनों एचटीएमएल और शरीर पर (निम्नलिखित की तरह)

html, body { 
    width: 100% ; 
    height: 100% ; 
    min-width: 900px ; 
    min-height: 500px ; 
}

अन्य तरीकों के लिए के रूप में सेट है, तो आप शुरू करने पूरे पेज डेटा लपेटकर कोशिश कर सकते हैं ( शरीर टैग के बाद) एक div के साथ (सुनिश्चित करें कि आप इसे ब्लॉक छोड़ दें) ताकि यह पूरे पृष्ठ पर फैल सके।

एक और नोट जो योग्य, ध्यान देने योग्य है, यह है कि आपको एचटीएमएल/बॉडी के साथ overflow संपत्ति भी लागू करनी चाहिए, साथ ही यदि आप एक पूर्ण पूर्ण-स्क्रीन साइट चाहते हैं। यदि आप विंडो की चौड़ाई के बाहर जाते हैं तो आप सामग्री खो देंगे, यदि आप से छुटकारा पाने का विकल्प चुनते हैं तो यह किसी भी स्क्रॉलबार को हटा देगा।

आशा है कि इससे मदद मिलती है!

संपादित करें:

अपनी नई छवि लिंक को देखने के बाद, यह एक आसान है!:] को ध्यान में

रखते हुए कि divs डिफ़ॉल्ट रूप से ब्लॉक कर रहे हैं, तो निम्न कार्य करना चाहिए (इस अपरीक्षित है, इसलिए कुछ फेरबदल आवश्यक हो सकता है):

<body> <div id="page"> <div id="right"> <div class="thirty">Top bar</div> <div class="tall">Middle bar</div> <div id="rt_bot">Bottom bar</div> </div> <div id="left"> <div class="thirty">Left Top Bar</div> <div class="tall">Left Mid Bar</div> <div id="lf_bot">Left Bottom Bar</div> </div> <div id="container"></div> </div> </body>

और सीएसएस:

html, body { width: 100% ; height: 100% ; min-height: 500px ; min-width: 900px ; margin: 0px ; } div#page { height: 100% ; } div#right { float: right ; height: 100% ; width: 300px ; } div#rt_bot { height: 200px ; } div#left { float: left ; } .thirty { height: 30px ; } .tall { height: 100% ; } div#lf_bot { height: 50px ; }

स्रोत

2010-12-03 20:44:26 Qix

अरे, मुझे न्यूनतम चौड़ाई/ऊंचाई और आईई shitness के बारे में पता है, लेकिन यह हल नहीं करता है कि सीएसएस में पूरा लेआउट कैसे बनाया जाए। मैंने इतनी सारी चीजों की कोशिश की है कि अब मैं सुराग से बाहर हूं। मैं उन्हें सही तरीके से सभी जगह नहीं ले सकता ... क्या आपको शायद यह पता चल जाए कि इसे कैसे बनाया जाए? – Jorik

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

मैंने आपके उदाहरण की कोशिश की है, लेकिन यह नहीं है सभी पर काम करें =/कोशिश करने के लिए धन्यवाद लेकिन यह वास्तव में एक मुश्किल लेआउट है: पी यहां एक तस्वीर है http://i.imgur.com/eyDrL.png अगर वहां केवल चौड़ाई की तरह कुछ था: 100% - 30px; __ ; – Jorik

यह वास्तव में एक बेहद जटिल सवाल है। मुझे पूरी तरह से यकीन नहीं है कि पूरी तरह से सीएसएस और जावास्क्रिप्ट/jQuery के साथ करना संभव है।

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

स्रोत

2010-12-03 21:59:37 Chris

यदि आप पहली पोस्ट में किए गए संपादन को देखते हैं तो यह संभव है, लेकिन आईई सामान्य रूप से इसे खराब करता है, ( – Jorik

यह शुद्ध सीएसएस के साथ पूरी तरह से संभव है। यह वही है जो सीएसएस को करने के लिए बनाया गया था! – Qix

आम तौर पर, मैं तालिकाओं का उपयोग पसंद नहीं है, लेकिन ऑटो ऊंचाई मुद्दा मुझे इस की ओर रुख करता है ...

IE8 के साथ काम करता है, शायद IE6 पर काम नहीं करता है, हालांकि ... कुछ भी नहीं है वास्तव में काम करता है आईई 6 के साथ, कोई चिंता नहीं है।

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
    <title>Untitled</title> 
    <style type="text/css"> 

html, body {width: 100%; height: 100%; margin: 0 0 0 0; padding: 0 0 0 0; } 
table#content {min-width: 900px; min-height: 500px; width: 100%; height: 100%; border-collapse: collapse; } 
table#content td {border: 1px solid black; } 
table#content td.topLeft {height: 30px; } 
table#content td.topRight {width: 300px; height: 30px; } 
table#content td.bottomLeft {height: 30px; } 
table#content td.bottomRight {width: 300px; height: 200px; } 
table#content tr.spacing {height: 170px; } 

    </style> 
    </head> 
    <body> 
    <table id="content"> 
     <tr> 
     <td class="topLeft">Top Left</td> 
     <td class="topRight">Top Right</td> 
     </tr> 
     <tr> 
     <td class="centerLeft" rowspan="2">Center Left</td> 
     <td class="centerRight">Center Right</td> 
     </tr> 
     <tr class="spacing"> 
     <td class="bottomRight" rowspan="2">Bottom Right</td> 
     </tr> 
     <tr> 
     <td class="bottomLeft">Bottom Left</td> 
     </tr> 
    </table> 
    </body> 
</html>

स्रोत

2010-12-04 02:43:00 Yoshiyahu

टेबल्स अत्यंत हैं अनावश्यक। मैं अभी भी एक व्यापार यात्रा पर हूं, लेकिन अभी भी इस सवाल की निगरानी कर रहा हूं। मैं जल्द ही या बाद में घर जाऊंगा ... – Qix

टेबल्स पूरी तरह से अनावश्यक हैं। जब मैंने यह लिखा था तो मैं जल्दी में था। – Yoshiyahu

हे दोस्तों मैं देर से जवाब के लिए खेद है। प्राग में था और इंटरनेट ने अब और काम नहीं करने का फैसला किया। अब घर वापस आ गया और मैंने इसे अभी तय कर दिया! सभी मदद के लिए धन्यवाद। मैंने इसे एक शीर्ष div के साथ बनाया है जिसमें एक रिश्तेदार स्थिति है और एक मिनट -विड्थ/ऊंचाई। उस div के अंदर div को एक पूर्ण स्थिति के साथ रखा गया है और यह हर ब्राउज़र में बहुत अच्छा काम करता है! अगर आप चाहते हैं कि आप इसे मेरी वेबसाइट के अपने नए बीटा में देख सकें: http://demontunes.com/v2.0/(पूरी वेबसाइट एक एमए मिल जाएगी शुक्रवार को जोर ओवरहाल तो अब gfx को न देखें: पी) – Jorik

सीएसएस/एचटीएमएल

उत्तर

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