1. घर
  2. सवाल और जवाब
  3. सीएसएस

सीएसएस

2010-02-01 8 views
11

का उपयोग कर फ़ॉर्म लेआउट मुझे पता है कि सीएसएस बनाम टेबल्स का उपयोग कर फ़ॉर्म लेआउट के बारे में पहले से ही प्रश्नों का एक गुच्छा है। पूरी तरह से, मुझे लगता है कि सीएसएस जाने का रास्ता है, लेकिन मैंने देखा है कि सभी सीएसएस समाधान लेबल और/या इनपुट क्षेत्रों की चौड़ाई "हार्ड कोडिंग" की कमी है।सीएसएस

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

क्या कोई तरीका है कि मैं स्टाइल फॉर्म कर सकता हूं, जैसे कि यह लेबल लेबल और इनपुट को स्वचालित रूप से लाइनों तक सीमित करेगा, चाहे लेबल कितने समय तक हों?

स्रोत

2010-02-01 Dónal

+2

+1: हमेशा यह एक बग के रूप में मुझे अच्छी तरह से उदाहरण के लिए, यहाँ एक लेबल परिभाषा है। अब तक मुझे हर बार आकार को हार्डकोड करना पड़ता है। –

+1

यदि आप वास्तव में टैब्यूलर लेआउट करते हैं तो '

' का उपयोग करके कुछ भी गलत नहीं है। – kennytm

+1

@ केनीटीएम - एक सारणीबद्ध लेआउट या नहीं। टेबल्स को टैबलेटर डेटा के लिए इस्तेमाल नहीं किया जाना चाहिए, लेआउट नहीं। प्रश्न के लेखक भी इसे स्वीकार करते हैं। – Finglas

उत्तर

-1

सब कुछ के लिए अलग-अलग फाइलों के बजाय पृष्ठ शीर्षलेख में एम्बेडेड उस विशिष्ट पृष्ठ के नियमों के साथ कुछ भी गलत नहीं है।

अपने रूपों बहुत अलग आप कहते हैं कि वे कर रहे हैं, तो प्रत्येक के लिए कस्टम नियमों बनाने के लिए की तुलना में यह करने के लिए कोई दूसरा रास्ता नहीं है ...

या नहीं, आप एक में सभी प्रपत्र शैलियों रखना चाहते हैं विशाल फ़ाइल, या पेज हेडर में शामिल हैं जो प्रासंगिक हैं, इस पर निर्भर करता है कि आपके उपयोगकर्ता औसत विज़िट पर कितने रूपों तक पहुंचेंगे। प्रति विज़िट के कुछ रूप; उन्हें हेडर में रखो। प्रति औसत यात्रा के कई रूप; उन्हें सभी को एक अलग फ़ाइल में रखें ताकि इसे उपयोगकर्ता द्वारा कैश किया जा सके।

स्रोत

2010-02-01 04:31:39

8

इस URL पर बाईं handside पर प्रपत्र पर एक नज़र डालें http://www.blueprintcss.org/tests/parts/forms.html

आप 1 लाइन और एक अन्य लाइन पर इनपुट बॉक्स पर लेबल जगह है तो आप लेबल के संरेखण के बारे में चिंता करने की ज़रूरत नहीं है । शैली उसे कुछ अतिरिक्त आप ऊपर या इनपुट से सटे एक अलग चर्चा है एक लेबल रखने का विषय रूप की तरह एक साफ और अच्छा web 2.0

enter image description here

चीयर्स

स्रोत

2010-02-01 05:15:28 Phradion

+0

+1। यदि आपके पास एक फ़ील्ड में बहुत लंबा लेबल होगा, तो दूसरे में एक छोटा सा, फिर इसे 2 कॉलम बनाने के लिए बदसूरत होगा, भले ही आप टेबल का उपयोग करें। लाइन 2 में लाइन 2, फॉर्म फ़ील्ड में इसे 2 लाइन बनाएं, आपको लेबल की लंबाई के बारे में चिंता करने की आवश्यकता नहीं होगी। –

+2

इनमें से कोई भी लेआउट तुलनीय नहीं है। – Greg

0

खैर होगा (मैं विषय पर ल्यूक Wroblewski की किताब पढ़ने की सलाह: http://www.lukew.com/resources/articles/web_forms.html)

स्टाइलिंग वेब रूप काफी मामूली है। सबसे पहले आप यह सुनिश्चित करना चाहते हैं कि आप अपने रूपों को एक अर्थात् उचित तरीके से चिह्नित कर रहे हैं। यह अब आपको मुख्य लाभों में से एक है कि आप टेबल के बजाय लेआउट के लिए सीएसएस का उपयोग कर रहे हैं। इस पर अधिक विषय के लिए उत्कृष्ट सूची के अलावा आलेख देखें: http://www.alistapart.com/articles/prettyaccessibleforms/

अब उपर्युक्त लेख में लेखक इनलाइन-ब्लॉक नामक एक डिस्प्ले प्रॉपर्टी का उपयोग करता है। यह प्रभाव प्राप्त करने का एक आसान तरीका है। बस लागू करें:

label { 
    display: inline-block; 
    width: 120px; /* Specify the width that works for your design */ 
}

और आपके लेबल के पास इनपुट के साथ एक निश्चित लंबाई होगी। हालांकि, अगर आप चौड़ाई निर्दिष्ट और बस नहीं है का उपयोग करें:

label, input { 
    display: inline-block; 
}

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

एक और मुद्दा यह है कि इनलाइन-ब्लॉक कुछ ब्राउज़रों में अच्छी तरह से काम नहीं करता है। इनलाइन-ब्लॉक फ़ायरफ़ॉक्स या आईई के पुराने संस्करणों में विश्वसनीय नहीं है।इसलिए मैं एक वैकल्पिक विधि का उपयोग करता हूं। आइए मान लें कि आप सूची का उपयोग करके अपने रूपों को एक अर्थात् उचित तरीके से चिह्नित करते हैं।

<form> 
    <fieldset> 
    <legend>Health information:</legend> 
    <ul> 
     <li><label>Height</label> <input type="text" size="3" /></li> 
     <li><label>Weight</label> <input type="text" size="3" /></li> 
    </ul> 
    </fieldset> 
</form>

इस मामले में हम adjacently हमारे तत्वों को पंक्तिबद्ध करने के लिए एक निश्चित चौड़ाई और निरपेक्ष स्थिति का उपयोग कर सकते हैं::

form li { 
    display: block; 
    padding: 2px; 
    position: relative; 
} 

/* The top and left position of 2px simulate 
    padding since we are using absolute positioning. */ 
form label { 
    display: block; 
    left: 2px; 
    position: absolute; 
    top: 2px; 
    width: 120px; 
} 

form input { 
    display: block; 
    margin-left: 125px; 
}

लेबल को किस स्थिति में है अच्छी तरह से उस मामले में आप की तरह कुछ हो सकता था सूची वस्तु और इनपुट बाएं मार्जिन के साथ तरफ धक्का दिया जाता है। यद्यपि इस विधि के साथ एक मुद्दा है। यह विधि केवल एक हार्डकोडेड चौड़ाई के साथ काम करेगी। सबसे महत्वपूर्ण बात यह है कि एक मल्टीलाइन लेबल ठीक से साफ़ नहीं होगा। तो इस स्थिति में हम एक समान दृष्टिकोण ले सकते हैं लेकिन फ्लोट्स और ओवरफ्लो का उपयोग कर सकते हैं। इस विधि लेबल इनपुट के बाईं ओर जारी है साथ अब

form li { 
    display: block; 
    overflow: hidden; /* This clears the floating element. */ 
    padding: 2px; 
} 

form label { 
    display: block; 
    float: left; 
    padding-right: 5px; 
} 

form input { 
    display: block; 
}

: तो हम एक ही html मार्कअप कि मैंने पहले से पता चला है पर इस विकल्प सीएसएस इस्तेमाल कर सकते हैं। यदि आप चौड़ाई निर्दिष्ट नहीं करते हैं तो लेबल उस सामग्री के विस्तृत होगा जो इसमें रहता है (HTML दस्तावेज़ में उसके मूल नोड की चौड़ाई के बिंदु तक)। मूल वस्तु पर छिपाने के लिए अतिप्रवाह सेट करके तत्व को साफ़ करने की कोई आवश्यकता नहीं है। यह तकनीक हार्डकोडेड चौड़ाई या विरासत वाले डिफ़ॉल्ट के साथ काम करेगी जो चौड़ाई है: ऑटो।

अंतिम लेकिन कम से कम नहीं यदि आप सबसे कुशल फॉर्म दृष्टिकोण (इनपुट के शीर्ष पर लेबल) का उपयोग करना चाहते हैं, जो कि फ़ॉर्म की शैली साबित हुई है जो उपयोगकर्ता सबसे तेज़, केवल सीएसएस को क्रम में पूरा कर सकते हैं यह पूरा करने के लिए है:

label, input { 
    display: block; 
}

एक अन्य टिप्पणी - इस तरह आप उन सूची बुलेट बिंदुओं बनाने आदि तत्वों आप को अपने दस्तावेज़ में एक सीएसएस रीसेट सहित के लिए चुनते चाहिए के सभी के बारे में सोच रहा हो सकता है के रूप में अपने HTML अप अंकन के साथ ब्राउज़रों के बीच स्थिरता सुनिश्चित करें। मेरा सुझाव है एरिक मेयर की:

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

स्रोत

2010-02-01 06:10:21

+0

प्रश्न विशेष रूप से उन समाधानों के लिए पूछता है जहां लेबल मनमाने ढंग से लंबाई के होते हैं। यह उस चिंता को किसी भी तरह से संबोधित नहीं करता है। –

+0

आह मैं देखता हूं। मैं इसे ठीक करने के लिए कुछ संपादन कर दूंगा। –

+0

किसी के बावजूद पोस्ट किए गए तरीकों से सवाल पूछता है कि क्या आप चौड़ाई के लिए नियम छोड़ देते हैं। मैंने अब समाधान में यह समझाया है जबकि सीएसएस और एचटीएमएल के साथ लेआउट की इस शैली को प्राप्त करने के लिए सभी तीन लोकप्रिय तरीकों को भी उपलब्ध कराया गया है। इसके अतिरिक्त उत्तर देने वाले विचारों को डिजाइनरों को इस तरह से डिजाइन करते समय लेना चाहिए। इसके अतिरिक्त, यह अर्थात् उचित HTML में वेब रूपों को चिह्नित करने के लिए उचित विधियों का संदर्भ देता है क्योंकि प्रश्न में बताया गया है कि वे तालिका आधारित लेआउट से संक्रमण कर रहे हैं। –

1

व्यक्तिगत राय: एक मेज का उपयोग करें।

हर बार जब आप की तरह

label { 
    width: 150px; /* or whatever width */ 
}

तो आप हैं मिश्रण सामग्री और प्रस्तुति कुछ क्योंकि लेबल का मूल्य केवल गणना की जा सकती है, तो आप जानते हैं कि यह क्या शामिल होंगे बारे में है, जो के सिद्धांतों के खिलाफ जाता है अर्थात् सीएसएस purists।

स्रोत

2010-02-01 13:28:51

+1

यह पूरी तरह से गलत है। जब आप एक टेबल का उपयोग करते हैं तो आप प्रस्तुति के साथ सामग्री मिश्रण कर रहे हैं। सीएसएस होने का पूरा कारण यह है कि इसे अलग करना है। इसलिए लेआउट को सीएसएस फ़ाइल में चौड़ाई निर्दिष्ट करके नियंत्रित किया जाता है। यदि आप एक टेबल का उपयोग करते हैं। लेआउट को आपके तत्व में एम्बेडेड तालिका तत्व द्वारा नियंत्रित किया जाता है। –

+3

मैंने यह नहीं कहा कि ऐसा नहीं है। मैंने कहा कि * यहां तक ​​कि * एक स्टाइल लेबल टैग के साथ आप प्रस्तुति के साथ सामग्री मिश्रण कर रहे हैं। सीएसएस परिभाषाओं पर निर्भर नहीं होना चाहिए कि किसी क्षेत्र में क्या है, लेकिन वे इस मामले में करते हैं। तो आप बस एक टेबल का उपयोग कर सकते हैं जो सभी ब्राउज़रों में भरोसेमंद काम करता है, जो ओपी चाहता है और कोड की कुछ पंक्तियों में करता है। यदि सीएसएस ने मूर्खतापूर्ण हैक्स के बिना सभी ब्राउज़रों में काम करने की सभी * ज़रूरतों के लिए विकल्पों की पेशकश की तो टेबल्स को त्याग दिया जा सकता है। –

0

आप इसे लेबलों को फ़्लोट करके और उन्हें फ़्लोटिंग ब्लॉक तत्व में रखकर और इनपुट फ़ील्ड के लिए रखकर इसे संभाल सकते हैं। यह दो कॉलम लेआउट बनाएगा जो सामग्री के आधार पर स्वचालित रूप से आकार बदलता है। यहाँ कर रहे हैं

<form> 
    <div id='labels'> 
     <div>Name: </div> 
     <div>Street:</div> 
     <div>This is a longer than usual label:</div> 
     <div>City:</div> 
    </div> 

    <div id='inputs'> 
     <div><input type="text"></div> 
     <div><input type="text"></div> 
     <div><input type="text"></div> 
     <div><input type="text"></div> 
    </div> 

</form>

और सीएसएस नियम:: यहाँ एचटीएमएल है

#labels { 
    float: left; 
} 

#labels div { 
    clear: left; 
    float: left; 
} 

#inputs { 
    float: left; 
} 

#inputs div { 
    clear: left; 
    float: left; 
} 

#labels div, #inputs div { 
    height: 30px; 
}

संपादित करें: यदि आप लेबल और आदानों के बीच एक अर्थ कनेक्शन बनाने के लिए चाहते हैं, आप औपचारिक रूप से एक एचटीएमएल लेबल के रूप में प्रत्येक लेबल टैग कर सकते हैं और उसके बाद और आईडी उनसे लिंक करने के लिए विशेषताओं का उपयोग करें।

<div><label for='name'>Name: </div>

और यहाँ है इसी इनपुट क्षेत्र:

<div><input id='name' type="text"></div>

स्रोत

2010-02-01 19:42:41 jdigital

+0

+1: थोड़ा वर्बोज़, लेकिन एक आकर्षण की तरह काम करता है! –

+1

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

+0

यह आसानी से हल किया गया है, और मैंने तदनुसार जवाब संपादित किया है। – jdigital

संबंधित मुद्दे
नवीनतम प्रश्न

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