वेबपेजवर मजकूराचे डावीकडील मजकूराची प्रतिमा कशी ठेवावी

वेबपृष्ठ मांडणीच्या डाव्या बाजूला प्रतिमा संरेखित करण्यासाठी सीएसएस वापरणे

आज जवळजवळ कोणत्याही वेब पृष्ठावर पहा आणि आपण मजकूर आणि त्या पृष्ठांचा मोठ्या प्रमाणात बनवून प्रतिमा संयोजन दिसेल. पृष्ठावर मजकूर आणि प्रतिमा जोडणे अगदी सोपे आहे. मजकुराचे मानक एचटीएमएल टॅग वापरून पॅड्रा, लिस्ट्स आणि हेडिंग्सचा वापर केला जातो, तर इमेज एलिमेंट वापरुन समाविष्ट केले जातात.

तो मजकूर तयार करण्याची क्षमता आणि त्या प्रतिमांना एकत्रितपणे चांगले कार्य करते जे उत्तम वेब डिझायनर्स वेगळ्या सेट करते! आपण फक्त आपला मजकूर आणि प्रतिमा एक नंतर एक प्रदर्शित करू इच्छित नाही, तर अशा प्रकारे या ब्लॉक-स्तर घटक डीफॉल्टनुसार मांडणी करतील. नाही, मजकूर आणि प्रतिमा कसे एकत्रित होतात यावर आपण काही नियंत्रण ठेवू इच्छित आहात आणि शेवटी आपल्या वेबसाइटचे दृश्य डिझाइन काय असेल.

पृष्ठाच्या डाव्या बाजूला संरेखित केलेली एक प्रतिमा असणे आणि त्या पृष्ठाचे मजकूर या पृष्ठाभोवती फिरते , मुद्रित डिझाइनसाठी तसेच वेब पेजेससाठी सामान्य डिझाइन उपचार आहे. वेब शब्दात, हा प्रभाव प्रतिमा फ्लोटिंग म्हणून ओळखला जातो . ही शैली "फ्लोट" साठी सीएसएस प्रॉपर्टीने गाठली आहे. या प्रॉपर्टीला डाव्या बाजूच्या राशीच्या उजव्या बाजूच्या मजकूराला त्याच्या उजव्या बाजूने प्रवाह करण्याची परवानगी देते. (किंवा त्याच्या डाव्या बाजूस उजवीकडील संरेखित प्रतिमाभोवती.) चला या दृश्यात्मक प्रभावाचे कसे मिळवावे ते पाहू.

HTML सह प्रारंभ करा

सर्वप्रथम जे काही करण्याची आपल्याला आवश्यकता असेल ते काही HTML सह कार्य करते. आमच्या उदाहरणासाठी, आम्ही मजकूराचे पॅरेग्राफ लिहू आणि अनुच्छेदच्या सुरुवातीस (मजकूरापूर्वी, परंतु उघडल्यानंतर

टॅग केल्यानंतर) एक प्रतिमा जोडू. तो HTML मार्कअप कसा असावा ते येथे आहे:

परिच्छेद मजकूर आता येथे आहे. या उदाहरणात, आपल्यास एक हेडशॉट फोटोची एक प्रतिमा आहे, म्हणून हा मजकूर कदाचित अशा व्यक्तीबद्दल असेल ज्याला हेडशॉट हवे आहे.

डीफॉल्टनुसार, आमचे वेबपृष्ठ मजकूराच्या वरील प्रतिमेसह प्रदर्शित होईल. कारण एचटीएमएलमध्ये ब्लॉक स्तरीय घटक आहेत. याचा अर्थ असा की ब्राऊजर डिफॉल्ट द्वारे प्रतिमा घटकाच्या आधी आणि नंतर लाइन ब्रेक्स डिलीट करतो. आपण CSS ला चालू करून ही डिफॉल्ट रूप बदलू. प्रथम, तथापि, आम्ही आमच्या प्रतिमा घटकासाठी वर्ग मूल्य जोडू. तो वर्ग एक "हूक" म्हणून कार्य करेल जो आपण नंतर आमच्या सीएसएसमध्ये वापरू.

परिच्छेद मजकूर आता येथे आहे. या उदाहरणात, आपल्यास एक हेडशॉट फोटोची एक प्रतिमा आहे, म्हणून हा मजकूर कदाचित अशा व्यक्तीबद्दल असेल ज्याला हेडशॉट हवे आहे.

लक्षात घ्या की "डावे" हा वर्ग स्वतःच काहीच करत नाही! आमच्या इच्छित शैली साध्य करण्यासाठी, आपल्याला पुढील सीएसएस वापरण्याची आवश्यकता आहे.

CSS शैली

"एचटीएमएल" च्या आमच्या क्लास ऍट्रिब्यूटसह आम्ही आमच्या HTML च्या जागी आहोत, आता आपण सीएसएसकडे वळू शकतो. आपण आपल्या स्टाइलशीटवर एक नियमावली जो त्या प्रतिमाला फ्लोट करेल आणि त्याच्या पुढे थोडे पॅडिंग जोडेल जेणेकरून शेवटी त्या प्रतिमेमध्ये लपेटलेला मजकूर खूप बारीकसारीकपणे त्याच्या विरोधात नाही. येथे आपण लिहू शकता सीएसएस आहे:

डावे {फ्लोट: डावे; पॅडिंग: 0 20px 20px 0; }

ही शैली डाव्या बाजूला ठेवते आणि छायाचित्राच्या उजव्या व खालच्या भागात थोडे पॅडिंग (काही सीएसएस लघुलिपी वापरुन) जोडते.

आपण एका ब्राउझरमध्ये हे HTML समाविष्ट असलेल्या पृष्ठाचे पुनरावलोकन केल्यास, प्रतिमा आता डावीकडे संरेखित केली जाईल आणि पॅरॅगचा मजकूर त्याच्या उजव्या दोन्ही बाजूला असलेल्या उचित रेषेसह दिसून येईल. लक्षात घ्या की आम्ही वापरलेल्या "डाव्या" चे वर्ग मूल्य अनियंत्रित आहे. आम्ही याला काही म्हणू शकलो कारण "डावे" हा शब्द स्वतः काहीच करत नाही. एचटीएमएलमध्ये क्लास ऍट्रिब्यूट असणे आवश्यक आहे जी प्रत्यक्ष सीएसएस शैलीसह कार्य करते ज्यामुळे आपण ज्या दृश्यमान बदलांची अपेक्षा करत आहात

या शैली प्राप्त करण्यासाठी पर्यायी मार्गः

प्रतिमा घटक वर्ग गुणधर्म प्रदान करण्याचा हा एक दृष्टिकोण आणि नंतर सामान्य CSS शैली वापरत आहे जो घटक फ्लोट करतो तो केवळ एक मार्ग आहे ज्यामुळे आपण हे "डावीकडे संरेखित केलेले चित्र" स्वरूप पूर्ण करू शकता. आपण इमेज मधील क्लासम व्हॅल्यू बंद देखील करू शकता आणि सीएसएस सोबत अधिक विशिष्ट सिलेक्टर लिहून तो शैली करू शकता. उदाहरणार्थ, चला एक उदाहरण बघूया जिथे प्रतिमा "मुख्य-सामग्री" च्या वर्ग मूल्यासह भागाच्या आत आहे.