Оформление на div с три колони в различни браузъри
В предишния пример разгледахме двуколонно seo оформление на оформлението на страницата. Нека си припомним малко какво беше обсъдено: при такова "оформление" основната информация се сервира като "горещо ястие", а колоните са "зад" съдържанието, но в браузъра на потребителя дясната или лявата колона "става" на мястото си с помощта на css. Освен това „заглавката“ на сайта следва „основното съдържание“ и се „издига“ до върха, използвайки стойността на свойството css (css: position: absolute).
В тази статия ще разширим този пример и ще разгледаме опциите за оформление с три колони, динамично и с фиксирана ширина, с лява и дясна колони, две колони от лявата страна и две колони от дясната страна спрямо основната информация и „настройка“ на заглавката с помощта на абсолютно позициониране.
Обмислете опциите, когато нашите колони също са с фиксирана или динамична (като процент) ширина.
Коя опция за оформление да изберете?
- Оформлението с местоположението на колоните "лява" и "дясна" от двете страни на основното съдържание обикновено се използва, когато е необходимо да се разпредели равномерно информация, която не е логически свързана една с друга. Например: в лявата колона имаме меню за навигация, а в дясната колона имаме блок за контакти и партньорски банери.
- Оформление с двете колони от дясната или от лявата страна на съдържанието една до друга може да се използва за представяне на този вид информация. Например: за показване на различни нива на вертикалното меню, за показване на връзки и заглавия на най-интересните статии на същото ниво като вертикалното меню и т.н.).
Ние излагаме оформление с три колони с динамична ширина с колони отляво и отдясно на основното съдържание на страницата.
- #wrapper - съдържа всички децаконтейнери;
- #left_column -лява колона- 200 пиксела ширина;
- #right_column -дясна колона- 200 пиксела ширина;
- #main_content -основно съдържание- автоматична ширина;
- #header -заглавка на сайта- 300 пиксела височина. Идва след основното съдържание преди #footer в html, поставено на място със свойствотоposition:css, зададено наabsolute;иcsstop: 0; ляво: 0;
- #footer - долен колонтитул на сайта.
#wrapper block - съдържа всички дъщерни контейнери,cssзадайте свойствотоpositionна относително
След това поставяме дясната (#right _column) и лявата колона (#right _left) извън "основното съдържание" #main_content, след което ги "поставяме на място" с отрицателни полета (css: #left-column < margin-left: -100%; float: left; >#right-column и задаваме обвиването на текста наляво.
За блока #footer отменяме обвиването на текста (css: float: none), изчистваме потока (overflow: hidden; clear: both) и задаваме ширината на 100% (css: width: 100%);
Блокът #header се поставя на място чрез абсолютно позициониране (css: position: absolute; left: 0; top: 0;).