Kolone iste visine u CSS-u. Fluidni raspored sa tri kolone

Dobrvy day! Danas ćemo govoriti o izgledu stranice u tri kolone. Mreža ima vrlo zanimljiv vodič za i, koji će nesumnjivo biti od koristi svakom webmasteru koji poštuje sebe. Ovaj resurs je htmlbook.ru. Tamo ima puno korisnih informacija. U ovom postu ćemo pogledati raspored u tri stupca koji je ponuđen na ovom resursu.

Nema ništa komplikovano u tome. Ako ste ranije učili, onda je lakše razumjeti! Dakle, hajde da počnemo. Raspored u tri kolone se često koristi kada dve kolone više nisu dovoljne ili morate na poseban način razdvojiti materijal. Na primjer, jedna kolona je data za sadržaj, druga za navigacijske veze, a treća kolona sadrži vijesti o web lokaciji ili druge informacije (slika 1).

Cjelokupni žičani okvir definiran je slojem pod nazivom kontejner, koji postavlja širinu i poravnanje izgleda. Kolone se nalaze unutra, a njihov redosled u kodu je sledeći: levo (nazovimo ga nav), desno (sa strane), centralno (sadržaj). Konstrukcija slojeva prikazana je u primjeru 1.

Primjer 1. Kolone u kodu

Položaj slojeva se formira kroz stilove: za lijevi stupac širina (širina) i premotavanje duž lijeve ivice (float: lijevo), za desni stupac - širina i premotavanje duž desne ivice (float: desno) , za centralni stupac - uvuci lijevo i desno širinom lijevog i desnog stupca (primjer 2).

Primjer 2. Stil za kreiranje stupaca

#kontejner ( širina: 900px; /* Širina rasporeda */ margina: 0 auto; /* Poravnanje po sredini */ ) #nav ( širina: 200px; /* Širina lijevog stupca */ float: lijevo; ) #aside ( širina: 300px ; /* Širina desnog stupca */ float: desno; ) #content ( margina: 0 300px 0 200px; /* margina lijeve i desne kolone */ )

Kompletan kod stranice, uzimajući u obzir ovaj stil, prikazan je u primjeru 3.

Primjer 3: Raspored u tri stupca

Ova implementacija ima nekoliko karakteristika:

• stupovi imaju različite visine, ali primjenom pozadine stvara se iluzija iste visine za sva tri stupca;
• lijevi i desni stupac imaju istu boju pozadine, postavljena je svojstvom pozadine za sloj kontejnera;
• izgled stubova je sačuvan samo kada je visina centralnog stuba veća od ostalih. Ako se ovaj uslov prekrši, efekat kolona će nestati (slika 2), u suprotnom se raspored prikazuje ispravno.

Rice. 2. Desna kolona je viša od ostalih

U ovom članku ćemo korak po korak razmotriti pravila za izgled stranice s dvije kolone. Kod koji smo dali omogućit će vam da dodate zaglavlje i podnožje koje proteže te dvije kolone.

Uvod

Da biste dovršili zadatke u ovom članku, trebali biste biti u mogućnosti da kodirate i u HTML-u iu CSS-u. Ako nije, onda je bolje da koristite vizuelni uređivač.

Imajte na umu da uopće ne morate biti stručnjak za HTML ili CSS. Samo trebate imati osnovno znanje o ovim tehnologijama, inače će vam ovaj članak biti nerazumljiv.

Korištenje svojstva float za kreiranje dva stupca

Postoji mnogo načina za korištenje CSS-a za kreiranje web stranice s dvije kolone. U ovom vodiču ćemo koristiti svojstvo float da postavimo jedan stupac na stranu drugog. Na mnogo načina, ova metoda je jednostavnija i fleksibilnija od metode pozicioniranja apsolutnog elementa. Takođe vam omogućava da opciono dodate zaglavlje i podnožje koje obuhvata te dve kolone.

Sam nisam koristio ovu metodu, jer je izgled mog resursa kreiran kada sam tek pravio prve korake u razvoju CSS-a i nisam znao ništa o osnovnim pravilima izgleda. Ali ne brini. Napravio sam neke demo stranice koristeći ovaj format, možete ih vidjeti kasnije.

Osnovni HTML kod za web stranicu sa dvije kolone

HTML dio koda je prilično jednostavan. Potrebna su nam samo dva div bloka, po jedan za svaku kolonu:

Riječi "Navigacijski meni" i "Sadržaj" samo su pokazivači na bočnu traku za navigaciju i glavni sadržaj. Kasnije ćete ukloniti ove riječi kada pravi sadržaj postavite u blokove. Div "kontejner" je blok koji sadrži dvije kolone. Može se koristiti ako želite primijeniti određene stilove na oba stupca.

CSS kod za sajt sa dve kolone

CSS kod u nastavku koristi procente ("%") za određivanje širine oba stupca. Pošto se mjere u relativnim jedinicama, proširit će se ili skupiti da popune cijeli prozor pretraživača, bez obzira koliko je širok. Na primjer, ako promijenite veličinu prozora pretraživača, predložak će preurediti kolonu tako da stane što bliže ivicama prozora.

CSS kod je vrlo jednostavan:

#content ( float: desno ; širina: 80% ; ) #navbar ( float: desno; širina: 20%; )

Prema pravilima izgleda sajta, CSS kod mora biti postavljen u odeljak sa stilovima veb stranice ili u eksternom fajlu.

Kako gornji kod radi u praksi možete vidjeti ovdje.

Kako to radi: objašnjenje CSS koda

Pravilo "float: right" određuje kako se DIV blok izvlači iz opšteg toka dokumenta, a takođe se postavlja desno od svih ostalih elemenata koji se kreću oko njega sa leve strane. Prvi DIV blok koji se pojavi na HTML stranici je prvi uvučen.

U gornjem primjeru, “#content” je prvo pomaknut udesno i postavljen na širinu od 80% širine prozora pretraživača. Naše sljedeće pravilo također izvlači "#navbar" iz toka dokumenta i pomiče ga udesno.

Pošto već imamo plutajući element na ovoj poziciji. Prema datim pravilima responzivnog izgleda, drugi blok se postavlja lijevo od postojećeg elementa ako za njega ima dovoljno prostora. U suprotnom će biti postavljen ispod prvog elementa. Imajući to na umu, zbir strana oba bloka mora biti jednak 100% ili manje, inače nećemo imati dovoljno prostora da ih postavimo jedan pored drugog.

Kako postaviti kolonu za navigaciju na desnoj strani

Kod iznad postavlja navigacijski meni u lijevu kolonu. Ako želite da navigacijski meni bude na desnoj strani, promijenite kod na sljedeći način:

#content ( float: lijevo ; širina: 80% ; ) #navbar ( float: lijevo ; širina: 20% ; )

Ovdje možete vidjeti ovaj kod u akciji klikom na dugme za prebacivanje u desnoj koloni navigacijskog menija.

Kako pravilno promijeniti širinu

Prema utvrđenim pravilima tehničkog izgleda, gornji stilovi postavljaju širinu bočne kolone na 20% širine prozora pretraživača, a kolone sadržaja - 80%, što ukupno daje 100%.

Ako planirate da promenite ove vrednosti, uverite se da je njihov ukupni zbir jednak ili manji od 100%, inače će pretraživač staviti jednu kolonu ispod druge.

Ako je jedan od stupaca pomaknut ispod drugog: kako to popraviti

Ako ustanovite da se jedan od stupaca uklapa ispod drugog umjesto jedan pored drugog, to znači da je kombinirana širina obje kolone više od 100% širine prozora pretraživača.

Ovo se može dogoditi čak i ako koristite moje "20%" i "80%" vrijednosti. Na primjer, ako dodate margine, ivice i padding za jednu ili obje kolone. Širina ovih kolona će se takođe povećati, uzrokujući da ukupan broj premaši 100%.

Kompatibilnost među pretraživačima i pravila izgleda podrazumijevaju dva načina rješavanja ovog problema:

• Smanjujte širinu kolona dok ih pretraživač ne prikaže onako kako želite. Ali zapamtite da su procenti relativna jedinica mjere. Vezana je za širinu prozora pretraživača korisnika. Dakle, ako ste testirali izgled na svom sistemu i otkrili da dodavanje 10 px jednoj od vaših kolona na padding-left i smanjenje širine za 1% radi dobro, ne možete zaključiti da je 1% = 10px. Drugim riječima, 1% od 1024 piksela se razlikuje od 1% od 1920 piksela, i tako dalje. Vodite računa o razlikama u širini prozora u drugim pretraživačima i veličinama ekrana;
• Moje preferirano rješenje je da kreiram ugniježđeni DIV unutar blokova "#navbar" i "#content", i stavim sve dodatke, margine, ivice i stvarni sadržaj u njega. Dakle, za vanjske blokove možete ostaviti starih 20% i 80% bez brige o prilagođavanju margina, uvlaka itd.

Na primjer, u demo stranica sa dvije kolone koristeći sljedeći HTML kod za kreiranje ugniježđenog DIV bloka:

Dodajte sljedeća svojstva za "#innercontent" i "#innernavbar" CSS stilovima koje ste ranije napisali:

#innercontent ( padding-left: 10px ; padding-right: 10px ; ) #innernavbar ( padding-left: 5px ; padding-right: 5px ;)

CSS za "#content" i "#navbar" ostaje isti kao što je opisano u prvoj polovini ovog članka.

Pošto je padding primenjen na unutrašnji DIV, dimenzije spoljnih kutija ostaju iste, a mi imamo raspored sa dve kolone.

Kako dodati zaglavlje i podnožje stranice koje se proteže na oba stupca

Neke web lokacije uključuju zaglavlje koje se proteže širinom obje kolone. Prema postojećim pravilima izgleda sajta, u njega možete postaviti logo, naslov sajta ili čak reklamne banere. Neki resursi također uključuju podnožje koje se proteže na oba stupca. Osim toga, podnožje se može koristiti za stavke kao što su obavijesti o autorskim pravima.

U današnjem članku želim govoriti o novom načinu kreiranja kolona jednake visine koristeći CSS. Više nema potrebe da koristite Javascript da bi visine kolona bile iste za sve. Suština ove metode je korištenje novog svojstva CSS3, koje nam daje puno više opcija od pukog kreiranja stupaca iste visine. Ali u ovoj lekciji ćemo pogledati koliko je lako riješiti ovaj bolni problem.

Izgled stranice

HTML dio

Definirajmo dvije kolone, koje ćemo kasnije napraviti istu visinu koristeći CSS:

Odnosno, moramo biti sigurni da je blok