Овај чланак објашњава како се прави распоред са 3 колоне у ЦСС-у. Упутства се односе на ЦСС3 и старије верзије.

Нацртајте свој распоред

Изглед можете нацртати на папиру или у а графички програм. Ако већ имате на уму жичани оквир или још обимнији дизајн, поједноставите га на основне оквире који чине локацију. Овај дизајн који прати овај чланак има три колоне у главном делу садржаја, као и заглавље и подножје. Ако пажљиво погледате, можете видети да три колоне нису једнаке ширине.

Након што нацртате изглед, можете почети да размишљате о димензијама. Овај пример дизајна имаће следеће основне димензије:

• Не више од 900 пиксела
• Лево од 20 олука
• 10 пиксела између колона и редова
• Колоне ширине 250 пиксела, 300 пиксела и 300 пиксела
• Горњи ред је висок 150 пиксела
• Доњи ред је висок 100 пиксела

Напишите основни ХТМЛ / ЦСС и направите елемент контејнера

Пошто ће ова страница бити важећа ХТМЛ документ, започните празним ХТМЛ контејнером.

Додајте основне ЦСС стилове у избришите маргине странице, обрубе и додатке странице. Док их има и других стандардни ЦСС стилови за нове документе ови стилови су минимум који вам је потребан да бисте добили чист изглед. Додајте их у главу вашег документа.

Да бисте започели изградњу изгледа, ставите елемент контејнера. Понекад се догоди да се контејнера можете ослободити касније, али за већину распореда фиксне ширине ако елемент контејнера олакшава управљање преко различитих Веба претраживачи.

Обликујте контејнер

Контејнер дефинише колико ће бити широк садржај веб странице, као и све маргине око споља и облоге изнутра. За овај документ, контејнер је широк 870пк са олуком од 20 пиксела на левој страни. Олук је постављен са маргин стилом, али је облога на контејнеру поништена како би се спречило да било који елементи буду широки као контејнер.

Ако сада сачувате документ, биће тешко видети контејнер јер у њему нема ништа. Ако додате текст чувара места, моћи ћете јасније да видите елемент контејнера.

Користите ознаку наслова за заглавље

Начин на који ћете одлучити за стил заглавља у великој мери зависи од тога шта је у њему. Ако ће ред заглавља само имати графику логотипа и наслов, онда помоћу ознаке наслова (

) има више смисла него користити а

. Наслов можете обликовати на исти начин на који обликујете див и избегавате стране ознаке.

ХТМЛ за ред заглавља иде на врх контејнера и изгледа овако:

Затим, да бисте поставили стилове на њему, на дну је додата црвена ивица како бисте могли да видите где се завршава, маргине и додаци су поништени, ширина постављена на 100%, а висина на 150 пиксела.

Не заборавите да плутате овај елемент флоат-ом: лефт; имовина. Кључ писања ЦСС распореда је плутање свега, чак и ствари исте ширине као и контејнер. На тај начин увек знате где ће елементи лежати на страници.

А. ЦСС селектор потомака примењени стилови само на елементе Х1 који се налазе унутар елемента #цонтаинер.

Да бисте добили три колоне, почните тако што ћете направити две колоне

Када градите распоред са три колоне помоћу ЦСС-а, свој распоред треба да поделите у групе од по две. Дакле, за овај распоред са три колоне, средња и десна колона и груписани и постављени поред леве колоне у распореду са две колоне где је лева колона широка 250 пиксела, а десна 610 пиксела (по 300 за две колоне, плус 10 пиксела за олук између њих).

Лева колона плута лево, док друга лево. Будући да укупна ширина оба ступца износи 860пк, између њих постоји олук од 10пк.

Додајте две колоне унутар широке друге колоне

Да бисте креирали три колоне, додајте два див-а унутар ширег другог ступца, баш као што сте додали 2 див-а унутар колоне контејнера у последњем кораку.

Пошто су ове две кутије ширине 300 пиксела унутар кутије ширине 610 пиксела, између њих ће опет бити олук од 10 пиксела.

Додајте у подножје

Сада када је остатак странице стилизован, можете га додати у подножје. Користите последњи див са ИД-ом „подножја“ и додајте садржај тако да га можете видети. Можете и да додате обруб на врху, тако да ћете знати одакле почиње.

Додајте своје личне стилове и садржај

Сад кад сте завршили распоред, можете да почнете да додајете своје личне стилове и садржај. Имајте на уму да су границе на заглављу и подножју додане како би се приказали делови распореда, а не посебно за дизајн.