सीएसएस फ्लोट प्रॉपर्टी डिझाईन वेब पेज लेआऊट्स वापरणे
सीएसएस गुणधर्म लेआउटसाठी एक अतिशय महत्वाची मालमत्ता आहे. हे आपल्याला आपल्या वेब पृष्ठ डिझाइनची यथायोग्य स्थिती दर्शविण्याची अनुमती देते - परंतु ते वापरण्यासाठी आपल्याला ते कसे कार्य करते हे समजून घ्यावे लागेल.
शैली पत्रकामध्ये, सीएसएस फ्लोटची मालमत्ता असे दिसते:
.right {फ्लोट: उजवीकडे; }
हे ब्राउझरला सांगते की "उजवीकडे" वर्गासह प्रत्येक गोष्ट योग्यतेकडे चालू करावी
आपण असे असे नोंदू:
वर्ग = "उजवीकडे" />
सीएसएस फ्लोटच्या संपत्तीमध्ये तुम्ही काय फ्लोट करू शकता?
आपण वेब पृष्ठावरील प्रत्येक घटक फ्लोट करू शकत नाही. आपण केवळ ब्लॉक-स्तर घटक फ्लोट करू शकता हे असे घटक आहेत जे पृष्ठावर जागा ब्लॉक करतात, जसे की प्रतिमा (), परिच्छेद (), विभाग (), आणि सूच्या ().
मजकूरवर परिणाम करणारे अन्य घटक, परंतु पृष्ठावर बॉक्स तयार करू नका ज्यांना इनलाइन घटक म्हणतात आणि सुरु केले जाऊ शकत नाहीत. हे स्पॅन () सारख्या घटक आहेत, लाइन ब्रेक्स (), सशक्त बल (), किंवा तिर्यक ().
ते कुठे राहतात?
आपण उजवीकडे किंवा डावीकडे घटक फ्लोट शकता सुरुवातीच्या घटकांचे अनुसरण करणारे कोणतेही घटक दुसऱ्या बाजूवर सुरु होणार्या घटकाभोवती फिरले जाईल.
उदाहरणार्थ, मी डावीकडील प्रतिमा फ्लोट केल्यास, पुढील मजकूर किंवा त्याच्या खालील इतर घटक त्याच्या सभोवतालच्या दिशेने प्रवाही होतील आणि जर मी उजवीकडे एक प्रतिमा फ्लोट करतो, तर खालील कोणताही मजकूर किंवा त्यातील इतर घटक त्याच्या आजूबाजूला डाव्या बाजूला येईल. कोणतीही प्रतिमा प्रकाराशिवाय मजकूरच्या ब्लॉकमध्ये ठेवलेली प्रतिमा त्यावर लागू केली जाईल जरी ब्राउझर प्रतिमा प्रदर्शित करण्यासाठी सेट आहे
हे चित्रांच्या तळाशी खालील पाठाच्या प्रथम ओळीवर असते.
ते किती भरतील?
एक घटक जो सुरु झाला आहे तो कंटेनर घटकांच्या डाव्या किंवा उजव्या बाजूला हलविला जाईल आपला कोड लिहिला गेल्यावर यानुसार बर्याच भिन्न परिस्थितींचा परिणाम आहे.
या उदाहरणांसाठी, मी डावीकडे एक छोटा DIV घटक फ्लोट करीत आहे:
- जर सुरु केलेल्या एलिमेंटमध्ये पूर्व-परिभाषित रूंदी नसेल तर ते फ्लोटच्या पर्वाप्रमाणे आवश्यक असलेल्या आणि उपलब्ध असलेल्या जास्त आडव्या जागा घेतील. टिप: काही ब्राउझर रुंदीच्या परिभाषित नसतात तेव्हा निळा घटकांच्या बाजूला घटक ठेवण्याचा प्रयत्न करतात- सामान्यत: नॉन-फ्लोट केलेले घटक केवळ लहानसे स्पेस देत. त्यामुळे आपण नेहमी सुरु झालेल्या घटकांवर रुंदी परिभाषित करावे.
- जर कंटेनर एलिमेंट हा HTML एलिमेंट असेल तर डावीकडील DIV हे पेजच्या डाव्या हाशिमेवर बसेल.
- जर कंटेनर एलिमेंट स्वतःच काही वेगळे असेल, तर सुरु केलेले डीव्ही कंटेनरच्या डाव्या मार्जिनवर बसले जाईल.
- आपण फ्लोटिंग एलिमेंट्स मध्ये घरटे करू शकता आणि यामुळे फ्लोट एका आश्चर्यकारक ठिकाणी उमटता येईल. उदाहरणार्थ, हा फ्लोट एक डाव्या बाजूस DIV उजव्या बाजूस DIV मध्ये आहे.
- कंटेनरमध्ये जागा असली तर अनावश्यक घटक एकमेकांच्या बाजूला बसत असतील. उदाहरणार्थ, या कंटेनरमध्ये 400px व्यासाच्या कंटेनरमध्ये तीन 100 पीएक्स रुंद DIV घटक आहेत.
फोटो गॅलरी मांडणी तयार करण्यासाठी आपण फ्लोट्स वापरू शकता. प्रत्येक लघुप्रतिमा (ते सर्व आकारमान उत्तम करते तेव्हा) एका डीआयव्हीमध्ये मथळासह आणि कंटेनरमधील डीव्ही घटक फ्लोट करा.
ब्राउझर विंडो कितीही रुंद असली तरी, लघुप्रतिमा एकसारखे असतील.
फ्लोट बंद करणे
फ्लोटचा घटक कसा मिळवावा हे आपल्याला कळल्यावर, फ्लोट बंद कसा करावा ते जाणून घेणे महत्त्वाचे आहे. आपण सीएसएस स्पष्ट मालमत्तेसह फ्लोट बंद करतो. आपण डाव्या फ्लोट्स सोडू शकता, योग्य फ्लोट्स किंवा दोन्ही:
साफ करा: डावीकडे;
स्पष्ट: उजवीकडे;
स्पष्ट: दोन्ही;
आपण स्पष्ट गुणधर्म सेट केलेला कोणताही घटक त्या दिशेने मांडलेला घटक खाली दिसेल. उदाहरणार्थ, या उदाहरणामध्ये मजकूराचे पहिले दोन पॅरेग्राफ साफ केले जात नाहीत, परंतु तिसरा आहे.
भिन्न लेआउट प्रभाव मिळविण्यासाठी आपल्या दस्तऐवजांमध्ये विविध घटकांच्या स्पष्ट मूल्यासह प्ले करा.
सर्वात मनोरंजक मांडणीकृत लेआउट्सपैकी एक मजकूर मजकूर परिच्छेदांपुढील उजव्या किंवा डाव्या स्तंभाच्या खालील प्रतिमा आहे. जरी प्रतिमेकडे गेल्यापेक्षा जास्त काळ मजकूर नसावा, तरीही आपण मागील प्रतिमेपेक्षा पुढील स्तंभापुढे दिसत असल्याचे सुनिश्चित करण्यासाठी सर्व प्रतिमा स्पष्टपणे वापरू शकता.
HTML (हा परिच्छेद पुन्हा करा):
या लेखातील काही शोधू शकता पण काही वेळापूर्वी अशा रीतीने तपासल्या जातील. कामदेव न करता, मजूर आणि मजला यासारख्या महत्वाच्या गोष्टी
CSS (डावीकडील प्रतिमा फ्लोट करण्यासाठी):
img.float {फ्लोट: डावे;
साफ करा: डावीकडे;
समास: 5px;
}
आणि उजवीकडे:
img.float {नाव: उजवीकडे;
स्पष्ट: उजवीकडे;
समास: 5px;
}
लेआउटसाठी फ्लोट्स वापरणे
एकदा आपण फ्लोट प्रॉपर्टी कशा प्रकारे कार्य करतो हे समजताच, आपण आपले वेब पृष्ठे दर्शविण्यासाठी हे वापरणे सुरू करू शकता. हे एक सुरवातीचे वेब पृष्ठ तयार करण्यासाठी मी खालील चरणे आहेत:
- लेआउट डिझाइन करा (कागदावर किंवा ग्राफिक्स साधनात किंवा माझ्या डोक्यामध्ये).
- पृष्ठ विभाग कुठे असतील हे ठरवा.
- विविध कंटेनर आणि त्यातील घटकांची रुंदी निश्चित करा.
- सर्वकाही फ्लोट करा जरी सर्वात बाह्यतम कंटेनर घटक डावीकडे टिकाला आहे जेणेकरुन मला माहित असेल की ते ब्राउझर व्ह्यू पोर्टच्या संबंधात कोठे असेल.
जोपर्यंत आपल्याला आपल्या लेआउट विभागांची रूंदी (टक्केवारी चांगली असते) माहित आहे, आपण ते पृष्ठावर असलेल्या ठिकाणी ठेवण्यासाठी त्यांना फ्लोट प्रॉपर्टी वापरू शकता. आणि छान गोष्ट म्हणजे इंटरनेट एक्सप्लोरर किंवा फायरफॉक्ससाठी वेगळे असलेल्या बॉक्स मॉडेलबद्दल आपल्याला चिंता करण्याची आवश्यकता नाही.