CSS மற்றும் HTML ஐ பயன்படுத்தி ஸ்க்ரோலிங் உரையுடன் ஒரு பெட்டி உருவாக்கவும்
ஒரு HTML சுருள் பெட்டி என்பது பாக்ஸ் பரிமாணங்களை விட பெட்டியின் உள்ளடக்கங்களை விட பெரியதாக இருக்கும் போது, வலது புறம் மற்றும் கீழே உள்ள சுருள் பட்டிகளை சேர்க்கும் பெட்டியாகும். வேறு வார்த்தைகளில் கூறுவதானால், நீங்கள் 50 வார்த்தைகளால் பொருந்தக்கூடிய ஒரு பெட்டியை வைத்திருந்தால், நீங்கள் 200 சொற்களின் உரை ஒன்றைக் கொண்டிருப்பீர்கள் என்றால், ஒரு HTML சுருள் பெட்டி கூடுதல் 150 வார்த்தைகளை பார்ப்பதற்கு ஸ்க்ரோல் வரைகலைகளை உருவாக்கும். சாதாரண HTML இல் வெறுமனே பெட்டியை வெளியே கூடுதல் உரை தள்ளும்.
HTML சுருட்டை செய்வது மிகவும் எளிது. நீங்கள் ஸ்க்ரோலிங் செய்ய விரும்பும் அமைப்பை அமைப்பதற்கு CSS வழிசெலுத்தல் சொத்துகளைப் பயன்படுத்த விரும்பும் உறுப்பு அகலத்தையும் உயரத்தையும் அமைக்க வேண்டும்.
கூடுதல் உரை என்ன செய்ய வேண்டும்?
உங்கள் அமைப்பில் உள்ள இடைவெளியில் பொருந்தும் விட அதிகமான உரை இருக்கும் போது, உங்களுக்கு சில விருப்பங்கள் உள்ளன:
- உரையை மீண்டும் எழுதவும், அது குறுகியதாகவும் பொருந்தும்.
- உரை வரம்பை மீறி ஓட்ட அனுமதி மற்றும் அமைப்பை ஆதரிக்க ஊக்குவிக்க முடியும் நம்புகிறேன்.
- அது கவிழ்ந்துவிடும் உரையை துண்டிக்கவும்.
- ஸ்ப்ரோல் ஸ்க்ரோல்கள் கூடுதல் உரையைக் காண்பிக்க ஸ்க்ரோ பார்கள் (உரைக்கு செங்குத்து வழக்கமாக) சேர்க்கவும்.
சிறந்த விருப்பம் பொதுவாக கடைசி விருப்பம்: ஒரு ஸ்க்ரோலிங் உரை பெட்டியை உருவாக்கவும். கூடுதல் உரை இன்னும் படிக்க முடியும், ஆனால் உங்கள் வடிவமைப்பு சமரசம் செய்யப்படவில்லை.
இந்த HTML மற்றும் CSS இருக்கும்:
வழிதல்: கார்; அவர்கள் டி.வி. எல்லைகளை நெரிசலில் இருந்து உரை வைத்து தேவை என்றால் சுருள் பார்கள் சேர்க்க உலாவி சொல்கிறது. ஆனால் இந்த வேலை செய்ய பொருட்டு, நீங்கள் div மீது அமைக்க அகலம் மற்றும் உயரம் பாணி பண்புகள் வேண்டும், அதனால் வழிதல் எல்லைகளை உள்ளன.
தானியங்கியை மாற்றுவதன் மூலம் உரையை நீக்கிவிடலாம்: கார்; மறைந்துவிடும்: மறைத்து; நீங்கள் மேலதிக சொத்துக்களை விட்டு வெளியேறினால், உரை கடவுளின் எல்லைகள் மீது கசிந்துவிடும்.
நீங்கள் ஸ்க்ரோல் பார்ஸை வெறும் உரைக்கு மேல் சேர்க்கலாம்
நீங்கள் சிறிய இடத்திலேயே காட்ட விரும்புகிறீர்களானால் பெரிய படத்தை நீங்கள் வைத்திருந்தால், அதனுடன் நீங்கள் ஸ்க்ரோல் பட்டைகளைச் சேர்த்துக் கொள்ளலாம்.
இந்த எடுத்துக்காட்டில், 400x509 படமானது 300x300 பத்தியில் உள்ளது.
அட்டவணைகள் ஸ்க்ரோல் பார்ஸிலிருந்து பயனடையலாம்
தகவல்களின் நீண்ட அட்டவணைகள் மிக விரைவாக வாசிக்க மிகவும் கடினமாக இருக்கும், ஆனால் அவற்றை ஒரு குறிப்பிட்ட அளவுக்கு ஒரு டி.வி.க்குள் வைப்பதன் மூலம், பின்னர் மேலோட்டப் பொருளைச் சேர்ப்பதன் மூலம், உங்கள் பக்கத்தில் தீவிர இடத்தை எடுத்துக்கொள்ளாத தரவு நிறைய அட்டவணைகள் உருவாக்கலாம் .
எளிதான வழி படங்கள் மற்றும் உரை போன்றது, வெறும் டேப்பை சுற்றி ஒரு div சேர்க்க, அந்த div அகலம் மற்றும் உயரம் அமைக்க, மற்றும் வழிசெலுத்தல் சொத்து சேர்க்க:
| பெயர் | தொலைபேசி நீங்கள் இதை செய்யும் போது நடக்கும் ஒன்று, ஒரு கிடைமட்ட சுருள் பட்டை வழக்கமாக தோன்றுகிறது, ஏனென்றால் உலாவியின் சுருள் அட்டவணையின் குரோம் அட்டவணையை மேலெழுதும் என்று கருதுகிறது. அட்டவணை மற்றும் அகலத்தின் அகலத்தை மாற்றியமைப்பதில் இருந்து இதை சரிசெய்ய பல வழிகள் உள்ளன. ஆனால் எனக்கு பிடித்தமானது வெறுமனே CSS 3 சொத்து வழிதல்- x உடன் கிடைமட்ட ஸ்க்ரோலிங் அணைக்க வேண்டும். வெறும் overflow-x: மறைத்து சேர்க்க; div க்கு, மற்றும் கிடைமட்ட சுருள் பட்டியை அகற்றிவிடும். மறைந்துவிடும் உள்ளடக்கம் இருப்பதால் இதை சோதிக்க உறுதிப்படுத்திக் கொள்ளுங்கள். ஃபயர்ஃபாக்ஸ் ஆதரிக்கிறது Overflow க்கான TBODY குறிச்சொற்கள் பயன்படுத்திபயர்பாக்ஸ் உலாவியின் மிகச் சிறந்த அம்சம், நீங்கள் உள்பகுதி பயன்பாட்டிற்கு tbody மற்றும் thead அல்லது tfoot போன்ற உள் அட்டவணையில் பயன்படுத்தலாம். இதன் பொருள் நீங்கள் அட்டவணையில் உள்ளடக்கங்களை ஸ்க்ரோல் அமைக்க முடியும், மற்றும் தலைப்பு செல்கள் அவற்றின் மேலே தொகுத்துள்ளன. இது Firefox இல் மட்டுமே வேலை செய்கிறது, இது மிகவும் மோசமானது, ஆனால் உங்கள் வாசகர்கள் பயர்பாக்ஸ் பயன்படுத்தினால் அது நல்ல அம்சமாகும். நான் என்ன சொல்கிறேன் என்பதைப் பார்க்க ஃபயர்பாக்ஸில் இந்த உதாரணத்தை உலாவவும்.
|
|---|