CSS stupci
Sadržaj HTML stranice (ili njenog dela) moguće je organizovati i u formi stubaca (columns). Pomoću posebnih CSS atributa, podešavamo najpre broj ili širinu stubaca, zatim razmak i liniju između stubaca, kao i način popunjavanja stubaca. Ponekad će se unutar stubaca javiti neki elemenat koji je toliko važan da ćemo želeti da se prikaže preko više stubaca (npr. neki naslov), što je takođe moguće podesiti.
Ovde ćemo obraditi sledeće CSS atribute:
| column-count | Broj stubaca |
| column-width | Širina stubaca |
| columns | Kompleksan atribut za podešavanje broja i širine stubaca |
| column-gap | Širina razmaka između stubaca |
| column-rule-width | Debljina linije između stubaca |
| column-rule-style | Vrsta linije između stubaca |
| column-rule-color | Boja linije između stubaca |
| column-rule | Kompleksan atribut za podešavanje izgleda linije izmneđu stubaca |
| column-fill | Način popunjavanja stubaca |
| column-span | Da li se elemenat može prostirati preko više stubaca |
Atributi za stupce se prosto zadaju za elemenat za koji želimo da se sadržaj prikaže u obliku stubaca. Stupci se "aktiviraju" ako zadamo bar jedan od atributa: column-count, column-width ili columns. Taj element nije ništa posebno (trebao da bude neki blok element), a inače može biti pozicioniran, imati širinu i visinu i sl. Dakle jedan sasvim običan blok.
.blok {
width: 80%;
height: 500px;
column-count: 3;
column-rule: 2px solid red;
}
Vrlo je važno doneti pravu odluku - kada koristiti stupce?
Ok, ovo je malo preterano, ali pre nego što jedva dočekate da poređate tekst vašeg sajta kao u novinama, zapitajte se zašto jako retko viđate stupce na internetu? Istina je da stupci dobro funkcionišu u časopisima. To omogućava da se redovi relativno sitnog teksta skrate i time olakša čitanje. Međutim, na web stranicama se postiže suprotan efekat - korisnika zamara stalno skrolovanje gore-dole dok prelazi na početak sledećeg stupca. U suštini to bi bio ekvivalent stupcu u časopisu koji bi se protezao na nekoliko stranica, pa bi tada čitalac morao da se vraća kako bi nastavio sa čitanjam.
Stupci ipak imaju svoju svrhu. Ako imamo deo teksta koji je sam po sebi "uzan" a dosta dugačak (kao npr. dugačka lista termina), stranica bi najvećim delom bila nepopunjena, a korisnik bi morao dosta da skroluje dok čita - preglednost je smanjena. U ovom slučaju bi stupci mogli da predstavljaju spas. Isto tako, možemo ih koristiti na kratkim delovima teksta koji neće zahtevati vertikalno skrolovanje.
Stupci su veoma fleksibilni, ali ako malo razmislite, shvatićete da ih upravo zato nikada ne možete potpuno kontrolisati. Uglavnom će web čitač, da bi zadovoljio zahteve broja stubaca, razmaka i linije među njima, sam odrediti širinu stubaca.
Sada ćemo se pozabaviti CSS atributima koji su nam od značaja za kreiranje stubaca. Za svaki se mogu zadati poznate globalne vrednosti (rezervisane reči)
- inherit - nasleđena vrednost
- initial - osnovna vrednost
- unset - anuliranje vrednosti
...pa ih u atributima nećemo posebno navoditi.
column-count
Atribut column-count služi da odredimo broj stubaca. Moguće vrednosti su:
- [numerik] - broj stubaca
- auto - web čitač će sam odrediti broj stubaca, koliko može da stane, zavisno od širine
Obično želimo da eksplicitno zadamo broj stubaca. Tada se vrednost zadaje kao numerik i to obavezno kao ceo pozitivan broj.
column-count: [broj stubaca];
column-width
Ovaj atribut definiše širinu stubaca. Zadata širina se odnosi na sve stupce, što znači da su uvek svi jednake širine. Nemoguće je zadati stupce različitih širina. Moguće vrednosti su:
- [metrika] - zadajemo konkretnu širinu stubaca, kao pozitivnu vrednost
- auto - web čitač će sam odrediti širine stubaca, zavisno od njihovog broja
Dakle, kada želimo da zadamo konkretnu širinu stubaca, zadajemo vrednost kao metriku (sa jedinicom mere). I ova vrednost mora biti pozitivna.
column-width: [širina];
Kada zadamo vrednost kao metriku, imajte u vidu da je to samo preporuka - prava širina stubaca će zavisiti od njihovog broja i raspoloživog prostora.
Eventualno bismo mogli da podesimo širinu stubaca baš po našoj želji, ali samo ako podesimo sve i ostale atribute vezane za stupce - column-gap (širina između stubaca), column-rule-width (širina linije između stubaca), kao i širinu samog elementa - width.
columns
Ovo je kompleksan atribut kojim se istovremeno mogu zadati broj i širina stubaca.
- [numerik] [metrika] - broj stubaca (numerik) i širina stubaca (metrika)
- auto - web čitač sam podešava vrednost - može se zadati umesto jedne ili obe vrednosti
columns: [broj] [širina];
columns: auto [širina];
columns: [širina];
columns: [broj] auto;
columns: [broj];
columns: auto auto;
Primer: Osnovno podešavanje stubaca
U primeru imamo tri div bloka kojima zadajemo stupce. Svi blokovi imaju poravnat tekst i marginu. Svaki od njih ima posebnu boju teksta, kako bismo ih lakđe razlikovali.
<style>
.plavo {
color: blue;
column-count: 3;
}
.zeleno {
color: green;
column-width: 150px;
}
.crveno {
color: red;
columns: 2 200px;
}
</style>
<div class="plavo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem nisi, fermentum luctus nisi quis, consectetur egestas velit. Duis elit tortor, feugiat vitae vestibulum sit amet, finibus gravida risus. Quisque id enim magna. Praesent cursus mauris ac eros dignissim, a gravida quam hendrerit. In hac habitasse platea dictumst. Aliquam vulputate eros id finibus euismod. Aenean nisl eros, viverra vel eros ut, mollis faucibus erat. In ac ante efficitur, mattis lacus at, ullamcorper lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent pellentesque mauris velit. Phasellus ac nibh nisl. Nunc purus diam, pulvinar in velit non, facilisis tincidunt ex. Nulla tincidunt leo ac elit hendrerit ornare. Maecenas felis diam, tempus a sapien quis, mollis vestibulum ipsum.
</div>
<div class="zeleno">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem nisi, fermentum luctus nisi quis, consectetur egestas velit. Duis elit tortor, feugiat vitae vestibulum sit amet, finibus gravida risus. Quisque id enim magna. Praesent cursus mauris ac eros dignissim, a gravida quam hendrerit. In hac habitasse platea dictumst. Aliquam vulputate eros id finibus euismod. Aenean nisl eros, viverra vel eros ut, mollis faucibus erat. In ac ante efficitur, mattis lacus at, ullamcorper lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent pellentesque mauris velit. Phasellus ac nibh nisl. Nunc purus diam, pulvinar in velit non, facilisis tincidunt ex. Nulla tincidunt leo ac elit hendrerit ornare. Maecenas felis diam, tempus a sapien quis, mollis vestibulum ipsum.
</div>
<div class="crveno">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem nisi, fermentum luctus nisi quis, consectetur egestas velit. Duis elit tortor, feugiat vitae vestibulum sit amet, finibus gravida risus. Quisque id enim magna. Praesent cursus mauris ac eros dignissim, a gravida quam hendrerit. In hac habitasse platea dictumst. Aliquam vulputate eros id finibus euismod. Aenean nisl eros, viverra vel eros ut, mollis faucibus erat. In ac ante efficitur, mattis lacus at, ullamcorper lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent pellentesque mauris velit. Phasellus ac nibh nisl. Nunc purus diam, pulvinar in velit non, facilisis tincidunt ex. Nulla tincidunt leo ac elit hendrerit ornare. Maecenas felis diam, tempus a sapien quis, mollis vestibulum ipsum.
</div>
U plavom bloku smo samo podesili broj stubaca. Web čitač je sam odredio širinu i napravio razmak među njima.
U zelenom bloku smo samo podesili samo širinu stubaca a broj stubaca je automatski izračunat da se stupci uklope u širinu div bloka.
Konačno, u crvenom bloku smo iskoristili atribut columns kako bismo odredili broj i širinu stubaca. Vidimo kako ne uspevamo zaista da kontrolišemo stupce. Primarno za web čitač je da zadati broj stubaca smesti u ukupnu širinu bloka. Sami stupci možda neće dobiti širinu koju smo zadali.
column-gap
CSS atribut kojim se zadaje širina razmaka između stubaca. Moguće vrednosti su:
- [metrika] - zadajemo konkretnu širinu razmaka između stubaca
- auto - web čitač će sam odrediti širine razmaka, zavisno od broja i širine stubaca
Ako zadamo širinu kao metriku, ona mora biti data kao pozitivna vrednost.
column-gap: [širina];
column-rule-width
column-rule-style
column-rule-color
column-rule
Atributi grupe column-rule služe za definisanje izgleda linije između stubaca. Najjednostavnije je koristiti kompleksan atribut column-rule, pomoću koga istovremeno možemo podesiti i debljinu i boju i vrstu linije.
column-rule: [debljina] [boja] [vrsta linije];
Ako mislite da ovo liči na podešavanje okvirne linije (border), u pravu ste. Čak postoje i posebni atributi za podešavanje svake vrednosti posebno. Tako imamo atribut column-rule-width za podešavanje debljine linije, zatim column-rule-color za podešavanje boje linije, i konačno column-rule-style za podešavanje vrste linije.
column-rule-width: [debljina]; (metrika)
column-rule-color: [boja]; (kolorna vrednost)
column-rule-style: [vrsta linije]; (rezervisana reč)
Isto kao kod podešavanja linije bordera, i za CSS atribut column-rule-style, je moguće navesti sledeće vrednosti:
- solid - puna linija
- dotted - tačkasta linija
- dashed - isprekidana linija
- double - dupla linija
- groove - linija koja izgleda kao da je utisnuta
- ridge - linija koja izgleda kao da je ispupčena
- inset - linija koja daje efekat da je elemenat utisnut
- outset - linija koja daje efekat da je elemenat ispupčen
- none - nepostojeća linija
- hidden - skrivena linija (za stupce je isto kao none)
Primer: Linija i razmak između stubaca
Ovaj primer prilično lići na prethodni, s tim što smo sada eksperimentisali i sa razmakom i linijom između stubaca.
<style>
.plavo {
color: blue;
column-count: 3;
column-gap: 4em; /* razmak među stupcima */
}
.zeleno {
color: green;
column-width: 150px;
column-rule: 2pt solid black; /* linija među stupcima */
}
.crveno {
color: red;
columns: 2 200px;
column-gap: 5em;
column-rule: 6pt double #936;
}
</style>
<div class="plavo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem nisi, fermentum luctus nisi quis, consectetur egestas velit. Duis elit tortor, feugiat vitae vestibulum sit amet, finibus gravida risus. Quisque id enim magna. Praesent cursus mauris ac eros dignissim, a gravida quam hendrerit. In hac habitasse platea dictumst. Aliquam vulputate eros id finibus euismod. Aenean nisl eros, viverra vel eros ut, mollis faucibus erat. In ac ante efficitur, mattis lacus at, ullamcorper lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent pellentesque mauris velit. Phasellus ac nibh nisl. Nunc purus diam, pulvinar in velit non, facilisis tincidunt ex. Nulla tincidunt leo ac elit hendrerit ornare. Maecenas felis diam, tempus a sapien quis, mollis vestibulum ipsum.
</div>
<div class="zeleno">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem nisi, fermentum luctus nisi quis, consectetur egestas velit. Duis elit tortor, feugiat vitae vestibulum sit amet, finibus gravida risus. Quisque id enim magna. Praesent cursus mauris ac eros dignissim, a gravida quam hendrerit. In hac habitasse platea dictumst. Aliquam vulputate eros id finibus euismod. Aenean nisl eros, viverra vel eros ut, mollis faucibus erat. In ac ante efficitur, mattis lacus at, ullamcorper lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent pellentesque mauris velit. Phasellus ac nibh nisl. Nunc purus diam, pulvinar in velit non, facilisis tincidunt ex. Nulla tincidunt leo ac elit hendrerit ornare. Maecenas felis diam, tempus a sapien quis, mollis vestibulum ipsum.
</div>
<div class="crveno">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem nisi, fermentum luctus nisi quis, consectetur egestas velit. Duis elit tortor, feugiat vitae vestibulum sit amet, finibus gravida risus. Quisque id enim magna. Praesent cursus mauris ac eros dignissim, a gravida quam hendrerit. In hac habitasse platea dictumst. Aliquam vulputate eros id finibus euismod. Aenean nisl eros, viverra vel eros ut, mollis faucibus erat. In ac ante efficitur, mattis lacus at, ullamcorper lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent pellentesque mauris velit. Phasellus ac nibh nisl. Nunc purus diam, pulvinar in velit non, facilisis tincidunt ex. Nulla tincidunt leo ac elit hendrerit ornare. Maecenas felis diam, tempus a sapien quis, mollis vestibulum ipsum.
</div>
U plavom tekstu smo zadali tri stupca, ali smo podesili i razmak među njima od 4em.
U zelenom tekstu smo se malo poigrali sa dodavanjem linije između stubaca, i to da bude puna linija, crne boje, debljine 2pt.
U poslednjem, crvenom bloku smo čisto šarenolikosti radi, dodali i razmak i liniju među stupcima.
column-fill
Ovaj CSS atribut se koristi kako bi se podesio način popunjavanja stubaca. Suštinski, moguće su dve vrednosti:
- balanced - web čitač će pokušati da stupce popuni podjednako (default)
- auto - web čitač će prvo popuniti prvi stubac do maksimuma (zavisi od visine elmenta sa stupcima), onda sledeći i tako redom
column-fill: [popunjavanje];
column-span
Ovaj atribut nije direktno vezan za podešavanje stubaca, već za neki elemenat koji se nalazi unutar teksta koji je u formi stubaca. Konkretno, pomoću ovog atributa definišemo da li se elemenat širi preko stubaca. Moguće vrednosti su:
- none - element je ograničen na samo jedan stubac (default)
- all - element se će se raširiti preko svih stubaca
column-span: [mogućnost];
Primer: Popunjavanje i rasprostiranje preko stubaca
U poslednjem primeru ćemo isprobati kako se ponašaju atributi column-fill i column-span. Svakom div bloku smo zadali formatiranje teksta u 3 stupca sa razmakom od 2em i tačkastom linijom.
<style>
div {
column-count: 3;
column-gap: 2em;
column-rule: 2pt dotted;
}
.plavo {
height: 250px;
color: blue;
column-fill: auto; /* nebalansirano popunjavanje */
}
h2 {
column-span: all; /* naslov H2 se širi preko stubaca */
}
.zeleno {
color: green;
}
</style>
<div class="plavo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem nisi, fermentum luctus nisi quis, consectetur egestas velit. Duis elit tortor, feugiat vitae vestibulum sit amet, finibus gravida risus. Quisque id enim magna. Praesent cursus mauris ac eros dignissim, a gravida quam hendrerit. In hac habitasse platea dictumst. Aliquam vulputate eros id finibus euismod. Aenean nisl eros, viverra vel eros ut, mollis faucibus erat. In ac ante efficitur, mattis lacus at, ullamcorper lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent pellentesque mauris velit. Phasellus ac nibh nisl. Nunc purus diam, pulvinar in velit non, facilisis tincidunt ex. Nulla tincidunt leo ac elit hendrerit ornare. Maecenas felis diam, tempus a sapien quis, mollis vestibulum ipsum.
</div>
<div class="zeleno">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem nisi, fermentum luctus nisi quis, consectetur egestas velit. Duis elit tortor, feugiat vitae vestibulum sit amet, finibus gravida risus.
<h2>Važan naslov</h2>
Quisque id enim magna. Praesent cursus mauris ac eros dignissim, a gravida quam hendrerit. In hac habitasse platea dictumst. Aliquam vulputate eros id finibus euismod. Aenean nisl eros, viverra vel eros ut, mollis faucibus erat.
<h3>Manje važan naslov</h3>
In ac ante efficitur, mattis lacus at, ullamcorper lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent pellentesque mauris velit. Phasellus ac nibh nisl. Nunc purus diam, pulvinar in velit non, facilisis tincidunt ex. Nulla tincidunt leo ac elit hendrerit ornare. Maecenas felis diam, tempus a sapien quis, mollis vestibulum ipsum.
</div>
U plavom bloku smo zadali nebalansirano popunjavanje. Tačnije, web šitaš će prvo da popuni prvi stubac (do zadate visine bloka), zatim popunjava drugi stubac, itd. Da blok nije imao zadatu visinu, praktično bi sav tekst stao u prvi stubac.
U zelenom bloku smo dodali par naslova (H2 i H3), kako bismo isprobali mogućnost širenja elementa preko stubaca. Možete videti da smo za naslov h2 zadali da treba da se raširi preko stubaca. Proverite da li je vaš web čitač uspeo da se izbori sa ovim podešavanjem. Naslov h3 pripada samo jednom stupcu i on neće "prekinuti" stupce u prikazu.
- Mozilla Developer Network, Using CSS multi-column layouts