Извод и Статус
Пуно пута се говорило о томе да се табеле не требају користити у ХТМЛ језику. Ова страница садржи информације о томе како креирати изглед са 3 колоне користећи само ЦСС.
Молимо вас да пошалјете коментаре и сугестије Dominique Hazaël-Massieux. Преводи овог чланка su dostupni.
Увод
ХТМЛ је структурални језик, што значи да се користи, или би требало да се користи, за додаванје структуре у текст путем тагова. Стога, table таг се треба користити само ѕа форматиранје података у табели приликом чега се колоне и редови доводе у везу
Међутим, од увођенја табела у ХТМЛ, често се користе у дизајнерске сврхе, обично да би се веб страна поделила у колоне. Поред тога што овај поступак руши саму логику и сврху ХТМЛ језика, он чак и не помаже у већем броју случаја због потешкоћа раставлјанја и рендерованја табела у одређеном контексту (ограничавајући фактори, рестрикције прегледаванја портова...).
Овај документ описује један начин креиранја изгледа са 3 колоне и позива се на друге технике
Опис Изгледа
Доле описана техника се користи на следећој страни ѕа нове W3C кориснике и омогућује креиранје изгледа са 3 колоне који има следеће карактеристике:
- текст у центру стране је онај који се налази на самом почетку кода, што значи да ће се прво он читати у невизуелним браузерима који не подржавају ЦСС
- Онда следе лева и десна колона у овом редоследу
Ова метода је идеална ѕа насловне стране јер омогућује да се комплетан текст налази у центру а листе линкова са стране
Међутим, једна од рестрикција је очигледна у ЦСС имплементацијама, али ће ипак лепо изгледати у традиционалном вертикалном окруженју
Ова метода је применјена на овој страни како би добили визуелну идеју како функционише
Имплементација
Овај изглед користи ЦСС апсолутно позициониранје . Ако дефинишемо 3 области на ХТМЛ страни
<div id="main">, <div
id="list1" class="link-list">, <div id="list2" class="link-list">, онда можемо применити следећа ЦСС правила:
/* Карактеристике заједничке за листе на левој и десној страни */
div.link-list {
width:10.2em;
position:absolute;
top:0;
font-size:80%;
padding-left:1%;
padding-right:1%;
margin-left:0;
margin-right:0;
}
/* Оставлјамо мали празан простор са стране употребом маргин-* правила */
#main {
margin-left:10.2em;
margin-right:10.2em;
padding-left:1em;
padding-right:1em;
}
/* и онда ставлјамо сваку листу на своје место */
#list1 {
left:0;
}
#list2 {
right:0;
}
Идеја је да се главна област исече по странама користећи margin-left и margin-right правила, и онда се лева и десна страна позиционирају користећи position:absolute, и на крају да се координате за леви и десни угао поставе на (0,0).
Да би се спречила лоша ЦСС имплементација користи се наредба <style type="text/css">@import
url('your-stylesheet-url');</style>