CSS və HTML istifadə edərək, scrolling mətn ilə qutusu yaradın
Bir HTML kaydırma qutusu, qutunun məzmunu qutu ölçülərindən daha böyük olduqda, sağa və alta sürüşmə çubuqlarını əlavə edən bir qutudur. Başqa sözlə, 50 sözə uyğun bir qutunuz varsa və 200 sözdən ibarət olan mətn varsa, bir HTML kaydırmalı qutu, əlavə 150 sözü görməyə imkan verən gedin. Sadəcə qutunun xaricindəki əlavə mətni basdıracaq standart HTML.
HTML sürüşməsi olduqca asandır. Yalnız kaydırmaq istədiyiniz elementin genişliyi və boyu təyin etmək və sonra keçidin necə olmasını təyin etmək üçün CSS taşması özelliğini istifadə etmək lazımdır.
Əlavə Mətn ilə nə etmək lazımdır?
Mizaninizdəki yerə uyğun olacaq daha çox mətniniz olduqda, bir neçə seçim var:
- Mətn yenidən qısa və uyğun olacaq şəkildə yazmaq.
- Mətn hüdudlardan kənara axmağa icazə verin və layout onu dəstəkləmək üçün bükülür.
- Maşını aşan yerləri kəsin.
- Alan, əlavə mətni göstərmək üçün hərəkət etmək üçün kaydırma çubuqları əlavə edin (ümumiyyətlə mətn üçün şaquli).
Ən yaxşı seçim adətən ən son seçimdir: bir scrolling mətn qutusu yaratmaq. Sonra əlavə mətn hələ də oxunur, ancaq dizaynınız güzəştə getmir.
Bunun üçün HTML və CSS:
Daşqın: avtomatik; brauzerin, mətnin div sərhədlərini daşımaq üçün lazım olduqda, kaydırma çubuqlarını əlavə etməsini bildirir. Amma bunun üçün çalışmaq üçün, ayrıca, div üzərində qurulan genişlik və boyu stil xüsusiyyətlərinə ehtiyac var, beləliklə, daşqın üçün sərhədlər var.
Mətnin daşını dəyişərək dəyişdirə bilərsiniz: avtomatik; daşmaq üçün: gizli; Əgər daşqın əmlakını tərk etsəniz, mətn divun sərhədləri üzərindən dağıdır.
Kaydırıcı barları yalnız Mətndən daha çox əlavə edə bilərsiniz
Kiçik bir məkanda göstərmək istədiyiniz böyük bir şəkiliniz varsa, mətn ilə eyni şəkildə hərəkət etmə zolağını əlavə edə bilərsiniz.
Bu misalda, 400x509 şəkil 300x300 paraqrafın içərisindədir.
Gəzinti çubuğundan masalar faydalana bilər
Uzun məlumat tabloları çox oxumaq çox çətin ola bilər, ancaq onları məhdud ölçülü bir divə qoyaraq və daha sonra daşma xüsusiyyətini əlavə edərək, səhifənizdə həddindən artıq yer tutmayan çox məlumatları olan masalar yarada bilərsiniz .
Ən asan yol şəkillər və mətnlər kimi görünür, yalnız masanın ətrafında div əlavə edin, divun genişliyi və hündürlüyü təyin edin və daşma xüsusiyyətini əlavə edin:
| Adı | Telefon | 502-5366 .... Bunu edərkən baş verən bir şey, üfüqi bir kaydırma çubuğudur, çünki brauzer, kaydırma çubuklarının xromunun masanın üstü örtülü olduğunu varsayar. Bunu masanın genişliyini və digərlərini dəyişdirməkdən qurtarmaq üçün bir çox yol var. Amma mənim sevimli, sadəcə, CSS 3 əmlakının daşması x-u ilə üfüqi kaydırmayı söndürməkdir. Yalnız daşqın-x əlavə edin: gizli; div üçün, və üfüqi kaydırma çubuğunu çıxaracaq. Bu yoxa çıxdığınız məzmuna görə test etməyinizə əmin olun. Firefox, daşqın üçün TBODY Etiketləri istifadə edərək dəstəkləyirFirefox brauzerinin həqiqətən gözəl bir xüsusiyyəti, tbody və thead və ya tfoot kimi daxili masa etiketlərindən daşma xüsusiyyətindən istifadə edə bilərsiniz. Bu, masa içeriğine kaydırma çubuklarını ayarlayabileceğiniz anlamına gelir ve üstbilgi hücreleri bunların üzerine demir kalır. Bu, yalnız Firefox-da işləyir, bu da çox pisdir, ancaq oxucular yalnız Firefox-nu istifadə edərkən gözəl bir xüsusiyyətdir. Nə demək istədiyimi görmək üçün Firefox-da bu nümunəyə baxın.
|
|---|