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

Question

का उपयोग करके साप्ताहिक समय सारिणी बनाएं मैं योग स्टूडियो के लिए कक्षाओं का साप्ताहिक समय सारिणी तैयार करने की कोशिश कर रहा हूं।

http://www.studioleisure.com/classes.php

नोट:: ^^ यह वेबपृष्ठ अब है कि इस सवाल का जवाब का उपयोग कर बनाया गया था समाप्त HTML संस्करण शामिल मैं एक मेज जो आप देख सकते हैं का उपयोग कर एक स्थिर संस्करण बनाया है।

मुझे कक्षाओं के साथ समस्या है जो घंटे के 15 मिनट या एक घंटे से अधिक समय तक चलती है और यह इस संस्करण के लिए PHP बनाने में काफी मुश्किल हो रही है।

मैं सिर्फ अगर कोई एक है कि एक ऐसी ही नजर है लेकिन के लिए PHP कोड आसान होगा बनाने के लिए किसी भी विचार किया था सोच रहा था।

Answer 1

मैं तालिका खो देता हूं, और केवल कॉलम का उपयोग करता हूं। फिर मैं कक्षाओं को सीएसएस (position:absolute) के साथ रखूंगा और top मूल्य को उनके प्रारंभ समय और उनकी लंबाई के आधार पर 'ऊंचाई' के आधार पर गणना करूंगा। क्षैतिज रेखाएं दोहराने वाली पृष्ठभूमि छवि का उपयोग करके हासिल की जा सकती हैं। बाईं ओर के लेबल उसी तरह रखे जा सकते हैं जैसे आप कक्षाएं रखेंगे।

एचटीएमएल कुछ इस तरह दिखाई दे सकता है:

<ul> 
<!-- Monday: --> 
<li> 
    <strong>Monday</strong> 
    <ul class="classes"> 
    <li style="top:200px; height:100px;"> 
    <span>10:30 - 11:45</span> 
    Class title 
    </li> 
    <li> 
    <!-- More classes here... --> 
    </li> 
    </ul> 
</li> 
<li> 
    <!-- Other days here... --> 
</li> 
</ul> 
<ul class="labels"> 
<li style="top:180px">10:00</li> 
<!-- More labels here... --> 
</ul> 

Answer 2

अच्छा मार्कअप। लेकिन आप सही हैं - एक अच्छी ग्रैन्युलरिटी के साथ ऐसा करने के परिणामस्वरूप एक टेबल का राक्षस होगा (और इसे उत्पन्न करने के लिए साथ कोड)। यह संभव है, लेकिन वहाँ एक आसान तरीका है, हालांकि यह तो साफ नहीं है:

के रूप में आप आमतौर पर करते तालिका बनाएं, लेकिन यह खाली हैं। हालांकि प्रत्येक पंक्ति और कॉलम के लिए निश्चित चौड़ाई/ऊंचाई सेट करें। फिर तालिका तालिका के शीर्ष पर कैलेंडर प्रविष्टियों रखने के लिए पूर्ण स्थिति का उपयोग करें। प्रेस्टो - यह वही दिखता है, लेकिन यदि आप चाहते हैं तो आप प्रविष्टियों को मिनट सटीक के साथ रख सकते हैं।

इस का नकारात्मक पहलू है कि कॉपी-पेस्ट (बहुत अच्छी तरह से) काम नहीं करेगा इस जानवर पर है, और मैं पता नहीं क्या यह एसईओ और पहुंच के लिए करना होगा है। शायद कुछ भी अच्छा नहीं है। तो यदि वे दो आपके लिए महत्वपूर्ण हैं, तो आपको वर्कअराउंड का सहारा लेना होगा (हालांकि मुझे लगता है कि योजना और की योजना का उपयोग करने के तरीके अच्छे एसईओ/एक्सेसिबिलिटी हैं)।

जोड़ा गया: ओह, और मुझे अभी एहसास हुआ कि आपको बहने वाले ग्रंथों के लिए भी देखना होगा। तालिका कक्ष स्वचालित रूप से विस्तारित होंगे, लेकिन पूरी तरह से स्थित डीआईवी नहीं होगा।

जोड़ा गया 2: अरे, यहां एक विचार है: प्रविष्टियों को थोड़ा सा स्थानांतरित करने के लिए सापेक्ष स्थिति का उपयोग करें। सीधे कोशिकाओं में पाठ लिखने के बजाय, उन्हें एक स्पैन के अंदर लिखें और फिर अपेक्षाकृत स्थिति रखें ताकि यह आवश्यक 15 मिनट के लिए बदल जाए। फिर यह निश्चित चौड़ाई और कोशिकाओं की ऊंचाइयों के लिए कॉल करता है, और अतिप्रवाह एक मुद्दा होगा, लेकिन एसईओ/अभिगम्यता को चोट नहीं पहुंचीगी, और कॉपी-पेस्ट अपेक्षित के रूप में काम करेगा।

Answer 3

के बाद मैं बनाया है एक साप्ताहिक समय सारणी टेम्पलेट है।

https://github.com/NisalSP9/Weekly-time-schedule-template-jquery 

और यह इसका उदाहरण चल रहा है।

https://codepen.io/nisalsp9/pen/QqqvwZ?editors=1111