Фиксирани оформления с три колони

Когато излагате своите оформления, винаги помнете, че добавянето на CSS полета, CSS подложка или CSS граници към някои HTML елементи ще увеличи техния размер. Тоест те ще станат по-големи от ширината и височината, посочени в свойствата на CSS за ширина и височина. Ако този момент не се вземе предвид, тогава цялото оформление може да „отиде“ или някои елементи да се припокриват помежду си. За да избегнете това, трябва да регулирате ширината и височината, като вземете предвид стойностите на всички CSS свойства.

Три колони фиксирани

Пример за HTML и CSS: Оформление на оформлението с три фиксирани колони

Описание на оформлението

  1. За да се запази оформлението на определена ширина, всички негови елементи бяха увити в id = "wrapper" с ширина 1000px. Взема се тази стойност, а не 1024px, тъй като не трябва да забравяте за лентата за превъртане, която ще се появи, когато височината на страницата надвиши височината на прозореца на браузъра. Някои дизайнери на оформление предпочитат да посочат още по-ниска стойност, например 990px.
  2. За да позиционира оформлението в центъра на страницата, обвиващият блок има свойство margin: 0 auto.
  3. Свойството на CSS float е приложено към колоните от менюто и страничната лента със стойностите отляво и отдясно, така че тези блокове се носят до краищата на страницата, а колоната за съдържание се издига до нивото им.
  4. Добавени са странични полета към колоната за съдържание, като се използва свойството CSS margin, така че да не минава под плаващите странични колони.
  5. За да се предотврати плаването на долния колонтитул, ако се окаже, че една от колоните е по-къса от останалите, към нея е приложено свойството clear, което прекъсва плувката.

Три фиксирани колони със съдържание отпред

Пример за HTML и CSS: Оформление на оформление с три фиксирани колони и съдържание отпред