Krijo një kuti me tekst scrolling duke përdorur CSS dhe HTML
Një skicë scrolling HTML është një kuti që shton bare lëvizëse në anën e djathtë dhe në fund kur përmbajtja e kutisë është më e madhe se dimensionet e kutisë. Me fjalë të tjera, nëse keni një kuti që mund të përshtatet rreth 50 fjalë dhe keni tekst prej 200 fjalësh, një kuti scroll scrolling HTML do të vendosë shiritë e rrotullimit për t'ju lejuar të shihni 150 fjalë shtesë. Në HTML standarde që thjesht do të shtyjë tekstin shtesë jashtë kutisë.
Duke lëvizur HTML është mjaft e lehtë. Ju vetëm duhet të vendosni gjerësinë dhe lartësinë e elementit që dëshironi të lëvizni dhe pastaj përdorni pronën e tejmbushjes CSS për të vendosur se si do që të ndodhë lëvizja.
Çfarë duhet të bësh me tekst shtesë?
Kur keni më shumë tekst se sa do të përshtateni në hapësirën në paraqitjen tuaj, ju keni disa opsione:
- Rishkruajeni tekstin në mënyrë që të jetë më e shkurtër dhe do të përshtatet.
- Lejo tekstin të rrjedhë përtej kufijve dhe shpresoj që faqosja mund të përkulet për ta mbështetur atë.
- Prerë tekstin ku ajo del nga shtrati.
- Shto bare rrotulluese (zakonisht vertikale për tekstin) në mënyrë që hapësira të lëvizë për të treguar tekstin shtesë.
Opsioni më i mirë është në mënyrë tipike opsioni i fundit: krijoni një kuti teksti të scrolling. Pastaj teksti shtesë mund të lexohet ende, por dizajni juaj nuk është komprometuar.
HTML dhe CSS për këtë do të jenë:
Përmbytje: auto; tregon shfletuesit për të shtuar shiritë e rrotullimit nëse ato janë të nevojshme për të mbajtur tekstin nga tejmbushur kufijtë e div. Por, në mënyrë që kjo të funksionojë, ju duhet gjithashtu gjerësia dhe lartësia e stilit të caktuar të vendosur në div, në mënyrë që të ketë kufij të tejshpimit.
Ju gjithashtu mund të prerë tekstin duke ndryshuar përmbytjen: auto; për të mbushur: fshehur ;. Nëse e lëshoni pronën e mbingarkesës, teksti do të përhapet mbi kufijtë e div.
Ju mund të shtoni baret e lëvizjes në më shumë se vetëm tekst
Nëse keni një imazh të madh që dëshironi të shfaqni në një hapësirë më të vogël, mund të shtoni bare lëvizëse rreth tij në të njëjtën mënyrë me tekstin.
Në këtë shembull, imazhi 400x509 është brenda një paragrafi 300x300.
Tabelat mund të përfitojnë nga baret e rrotullimit
Tabelat e gjata të informacionit mund të jenë shumë të vështira për t'u lexuar shumë shpejt, por duke i vendosur ato në një div të një madhësie të kufizuar dhe pastaj duke shtuar pasurinë e tejmbushjes, mund të gjeneroni tabela me shumë të dhëna që nuk marrin hapësirë ekstreme në faqen tuaj .
Mënyra më e lehtë është sikur me imazhe dhe tekst, thjesht shtoni një div përreth tavolinës, caktoni gjerësinë dhe lartësinë e asaj div dhe shtoni pronën e tejmbushjes:
Një gjë që ndodh kur ta bëni këtë është një bar horizontal i rrotullimit zakonisht shfaqet sepse shfletuesi supozon se kromi i shiritave të rrotullimeve është duke mbivendosur tabelën. Ka shumë mënyra për ta rregulluar këtë nga ndryshimi i gjerësisë së tryezës dhe të tjerave. Por e preferuar është thjesht të fikni horizontale scrolling me CSS 3 overflow-x. Just add overflow-x: fshehur; në div, dhe që do të heq bar horizontal scroll. Sigurohu ta provosh këtë, pasi mund të ketë përmbajtje që zhduket.
Firefox mbështet përdorimin e tagave TBODY për Overflow
Një veçori me të vërtetë e bukur e shfletuesit të Firefox është se ju mund të përdorni pronën e tejmbushjes në etiketat e tabelës së brendshme si tbody dhe thead ose tfoot. Kjo do të thotë që ju mund të vendosni bare lëvizëse në përmbajtjen e tabelës dhe qelizat e kokës qëndrojnë të ankoruara mbi to. Kjo funksionon vetëm në Firefox , gjë që është shumë e keqe, por është një veçori e mirë nëse lexuesit tuaj përdorin vetëm Firefox-in. Shfletoni këtë shembull në Firefox për të parë se çfarë dua të them.