Ovaj članak objašnjava kako izraditi raspored s 3 stupca u CSS-u. Upute se primjenjuju na CSS3 i starije.

Nacrtajte svoj izgled

Izgled možete nacrtati na papiru ili u a grafički program. Ako već imate na umu žičani okvir ili još opsežniji dizajn, pojednostavite ga na osnovne okvire koji čine web mjesto. Ovaj dizajn koji prati ovaj članak ima tri stupca u glavnom području sadržaja, kao i zaglavlje i podnožje. Ako dobro pogledate, možete vidjeti da tri stupca nisu jednake širine.

Nakon što nacrtate izgled, možete početi razmišljati o dimenzijama. Ovaj primjer dizajna imat će sljedeće osnovne dimenzije:

• Ne više od 900 piksela
• Oluk od 20 piksela s lijeve strane
• 10 piksela između stupaca i redaka
• Stupci širine 250, 300 i 300 piksela
• Gornji red visok je 150 piksela
• Donji je red visok 100 piksela

Napišite osnovni HTML / CSS i stvorite element spremnika

Budući da će ova stranica biti valjana HTML dokument, započnite praznim HTML spremnikom.

Dodajte osnovne CSS stilove u izbrišite margine stranice, obrube i uloške. Dok postoje i drugi standardni CSS stilovi za nove dokumente ovi su stilovi minimum što vam treba za čisti izgled. Dodajte ih u glavu vašeg dokumenta.

Da biste započeli izgradnju izgleda, stavite element spremnika. Ponekad se dogodi da se spremnika možete riješiti kasnije, ali za većinu rasporeda fiksne širine ako element spremnika olakšava upravljanje na različitim web lokacijama preglednicima.

Oblikujte spremnik

Spremnik definira koliko će sadržaj web stranice biti širok, kao i sve margine oko vanjske strane i popunjavanje iznutra. Za ovaj dokument spremnik je širok 870px s olukom od 20 piksela na lijevoj strani. Oluk je postavljen s rubnim stilom, ali je podstava na spremniku poništena kako bi se spriječilo da bilo koji elementi budu široki kao spremnik.

Ako sada spremite dokument, bit će teško vidjeti spremnik jer u njemu nema ništa. Ako dodate tekst rezerviranog mjesta, moći ćete jasnije vidjeti element spremnika.

Upotrijebite oznaku naslova za zaglavlje

Način na koji ćete odlučiti stilizirati redak zaglavlja uvelike ovisi o tome što se u njemu nalazi. Ako će redak zaglavlja samo imati grafiku logotipa i naslov, tada se koristi oznaka naslova (

) ima više smisla nego koristiti a

. Naslov možete oblikovati na isti način na koji oblikujete div i izbjegavate strane oznake.

HTML za redak zaglavlja ide na vrh spremnika i izgleda ovako:

Zatim, za postavljanje stilova na njega, dodan je crveni obrub na dnu kako biste mogli vidjeti gdje završava, margine i dodaci su izničeni, širina postavljena na 100%, a visina na 150 piksela.

Ne zaboravite plutati ovaj element plutajući: lijevo; imovine. Ključ pisanja CSS izgleda je plutanje svega, čak i stvari iste širine kao spremnik. Na taj način uvijek znate gdje će elementi ležati na stranici.

A CSS selektor potomaka primijenjeni stilovi samo na elemente H1 koji su unutar elementa #container.

Da biste dobili tri stupca, počnite tako što ćete izgraditi dva stupca

Kada gradite raspored s tri stupca s CSS-om, svoj raspored morate podijeliti u skupine od po dva. Dakle, za ovaj raspored s tri stupca, srednji i desni stupac te su grupirani i smješteni pored lijevog stupca u rasporedu s dva stupca gdje je lijevi stupac širok 250 piksela, a desni 610 piksela (po 300 za dva stupca, plus 10 piksela za oluk između ih).

Kolona s lijeve strane pluta ulijevo, dok je druga plutajuća udesno. Budući da ukupna širina oba stupca iznosi 860px, između njih postoji žlijeb od 10px.

Dodajte dva stupca unutar širokog drugog stupca

Da biste stvorili tri stupca, dodajte dva div-a unutar šireg drugog stupca, baš kao što ste dodali 2 div-a unutar stupca spremnika u posljednjem koraku.

Budući da su ove dvije kutije širine 300 piksela unutar kutije širine 610 piksela, između njih će opet biti oluk od 10 piksela.

Dodaj u podnožje

Sad kad je ostatak stranice stiliziran, možete ga dodati u podnožje. Upotrijebite zadnji div s ID-om "podnožja" i dodajte sadržaj tako da ga možete vidjeti. Na vrh možete dodati i obrub, tako da ćete znati odakle počinje.

Dodajte svoje osobne stilove i sadržaj

Sad kad ste završili s rasporedom, možete početi dodavati vlastite osobne stilove i sadržaj. Ne zaboravite da su obrubi zaglavlja i podnožja dodani za prikaz odjeljaka izgleda, a ne posebno za dizajn.