Направите кутију са скроловањем текста користећи ЦСС и ХТМЛ
ХТМЛ скрол поље је кутија која додаје скролске траке са десне стране и дна када је садржај кутије већи од димензија кутије. Другим речима, ако имате кутију која може да стане око 50 речи и имате текст од 200 речи, ХТМЛ скрол поље ће ставити траке за помицање да би вам омогућили да видите додатних 150 речи. У стандардном ХТМЛ-у који једноставно помера додатни текст ван кутије.
Прављење ХТМЛ-скретања је прилично једноставно. Само треба да подесите ширину и висину елемента који желите да померите, а затим користите својство преливања ЦСС- а како бисте подесили како желите да дође до скроловања.
Шта радити са додатним текстом?
Када имате више текстова него што ће се уклапати у простор на вашем распореду, имате неколико опција:
- Преправите текст тако да је краћи и одговара.
- Дозволите тексту да излази изван граница и надати се да се изглед може флексибилно подржати.
- Пресећи текст где се прелива.
- Додајте траке за помицање (обично вертикално за текст), тако да се свитак помера да прикаже додатни текст.
Најбоља опција је типично последња опција: креирајте скроловање текста. Затим се и даље може читати додатни текст, али ваш дизајн није компромитован.
ХТМЛ и ЦСС за ово би били:
<див стиле = "оверфлов: ауто; видтх: 300пк; хеигхт: 200пк;"> тект хере ....Оверфлов: ауто; говори претраживачу да дода траке за помицање ако су потребне да би текст задржао преливање граница див. Али како би ово функционисало, требају вам и карактеристике стила ширине и висине постављене на диву, тако да постоје границе преливања.
Такође можете прекинути текст променом прелива: ауто; преливати: скривено ;. Ако изоставите својство преливања, текст ће се просути преко граница див.
Можете додати палете за помицање на више од текста
Ако имате велику слику коју желите да прикажете у мањим просторима, можете га додати на исти начин као и текстом.
<п стиле = "маргин: 0пк ауто 10пк;"> <имг срц = "имагес / схаста_витх_дисц.јпг" алт = "Схаста плаиинг фрисбее" видтх = "400" хеигхт = "509" /> / п>У овом примеру, слика 400к509 је унутар 300к300 параграфа.
Табеле могу имати користи од трака за померање
Дугачке информације могу врло тешко читати врло брзо, али стављајући их унутар ограничене величине, а затим додајући својство преливања, можете генерирати таблице са пуно података које не узимају екстремни простор на вашој страници .
Најлакши начин је сличан као код слика и текста, само додајте див око табеле, поставите ширину и висину тог дива и додајте својство преливања:
<тд> <тд> <тд> <тд> <тд> <тд> <тд> <тд стиле = "видтх: 300пк; оверфлов: ауто; хеигхт: 100пк; тад> <тбоди> <тр> <тд> Јеннифер <тд> 502-5366 ....Једна ствар која се дешава када то учините је хоризонтална трака за помицање која се обично појављује јер претраживач претпоставља да се хром скролских трака преклапа са табелом. Постоји много начина да ово поправите од промене ширине табеле и других. Али мој омиљени је да једноставно искључите хоризонтално скроловање помоћу ЦСС 3 објекта оверфлов-к. Само додајте оверфлов-к: скривено; на див, а то ће уклонити хоризонталну траку за померање. Обавезно проверите ово, јер можда постоји садржај који нестаје.
<див стиле = "видтх: 300пк; оверфлов: ауто; оверфлов-к: хидден; хеигхт: 100пк;">Фирефок подржава коришћење ТБОДИ ознака за прељев
Једна стварно лепа карактеристика Фирефок претраживача је да можете користити својство преоптерећења на унутрашњим таблицама као што су тбоди и тхеад или тфоот. То значи да можете поставити траке за помицање на садржај стола, а ћелије заглавља остају усидрене изнад њих. Ово ради само у Фирефоку , што је сувише лоше, али то је лепа могућност ако ваши читаоци користе Фирефок само. Прегледајте овај пример у Фирефоку да видите шта мислим.
<табле стиле = "видтх: 300пк;"> <тхеад> <тр> <тх> Име <тх> Телефон <тбоди стиле = "оверфлов: ауто; Оверфлов-к: хидден; хеигхт: 100пк; "> <тр> <тд> Јеннифер <тд> 502-5366 ...