Izradite okvir s tekstom pomicanja pomoću CSS-a i HTML-a
HTML kôd za pomicanje je okvir koji dodaje trake za pomicanje na desnu stranu i dno kada su sadržaj kutije veći od dimenzija okvira. Drugim riječima, ako imate okvir veličine oko 50 riječi i tekst od 200 riječi, HTML kôd za pomicanje stavit će trake za pomicanje kako biste vidjeli dodatnih 150 riječi. U standardnom HTML-u koji jednostavno gura dodatni tekst izvan okvira.
Izrada HTML sklizanja prilično je jednostavna. Trebate samo postaviti širinu i visinu elementa koji želite da se pomaknite, a zatim upotrijebiti CSS overflow entitet kako biste odredili kako želite doći do pomicanja.
Što učiniti s dodatnim tekstom?
Kada imate više teksta nego što će stati u prostor na vašem rasporedu, imate nekoliko opcija:
- Ponovno napišite tekst tako da je kraći i stane.
- Dopustite da tekst prođe iznad granica i nadamo se da će se izgled podupirati.
- Odrežite tekst gdje prelazi.
- Dodajte trake za pomicanje (obično okomite za tekst) tako da se prostor pomakne kako bi se prikazao dodatni tekst.
Najbolja opcija obično je posljednja opcija: izradite tekstualni okvir pomicanja. Tada se još može čitati dodatni tekst, ali vaš dizajn nije ugrožen.
HTML i CSS za ovo bi bili:
Preljev: auto; govori pregledniku da doda trake za pomicanje ako su potrebne kako bi tekst preopterio granice div. No, kako bi to funkcioniralo, trebate i svojstva stila širine i visine postavljene na div, tako da postoje granice za preljev.
Također možete odrezati tekst promjenom preljeva: auto; do prelijevanja: skriveno ;. Ako ostavite svojstvo prelijevanja, tekst će proliti preko granica div.
Možete dodati trake za biranje više od teksta
Ako imate veliku sliku koju želite prikazati na manjem prostoru, možete dodati barove za pomicanje na isti način kao i tekst.
U ovom primjeru slika 400 x 509 nalazi se unutar 300 x 300 odlomka.
Tablice mogu imati koristi od klizača
Duge tablice informacija mogu se vrlo teško pročitati vrlo brzo, ali ih stavljanjem u div veličine ograničene veličine, a zatim dodavanjem preljevnog svojstva, možete generirati tablice s puno podataka koji ne zauzimaju veći prostor na vašoj stranici ,
Najlakši način je jednako kao kod slika i teksta, samo dodajte div oko stola, postavite širinu i visinu te dive i dodajte svojstvo prelijevanja:
Jedna stvar koja se događa kada to učinite je horizontalna traka za pomicanje obično se pojavljuje jer preglednik pretpostavlja da je krom traka za pomicanje preklapa tablicu. Postoji mnogo načina kako to popraviti iz promjene širine tablice i drugih. No, moj omiljeni je jednostavno isključiti horizontalno pomicanje pomoću CSS 3 prenapona-x. Samo dodajte preljev x: skriven; na div, a to će ukloniti vodoravnu traku za pomicanje. Svakako isprobajte ovo jer postoji sadržaj koji će nestati.
Firefox podržava upotrebu oznaka TBODY za preljev
Jedna stvarno lijepa značajka Firefox preglednika je da možete koristiti svojstvo prelijevanja na unutarnjim tablicama oznaka poput tbody i thead ili tfoot. To znači da možete postaviti trake za pomicanje na sadržaj tablice, a stanice zaglavlja ostaju usidrene iznad njih. Ovo funkcionira samo u Firefoxu , što je previše loš, ali to je lijepa značajka ako vaši čitatelji koriste samo Firefox. Pregledajte ovaj primjer u Firefoxu da biste vidjeli što mislim.
| Ime | Telefon |
|---|---|
| Jennifer | 502-5366 ...
|