Шаблон без таблици КАК

Български превод на "Tableless layout HOWTO"

Настоящият документ е превод на статията "Tableless layout HOWTO".

Оригиналната версия на документа се намира само на уебсайта на W3C http://www.w3.org/2002/03/csslayout-howto.html.
Това НЕ е официален документ на W3C. Всички авторски права принадлежат на W3C.

Автор: Александър Дичев (всички преводи на автора). Новини в блога.
Преводът е направен на 27.02.2009. Последна актуализация на 02.03.2009.

Настоящият документ може да съдържа грешки или неточности в превода.
Ако желаете да предложите корекция или да сигнализирате за грешка, свържете се с автора.

Документът е преведен със съдействието на Current Moon phase и Лунен календар.

---

Резюме и статут

Често пъти се препоръчва да не се използват таблици за оформление в HTML. Тази страница показва един от начините да се създаде шаблон от 3 колони само с използването на CSS.

Моля, изпращайте коменари и предложения на Dominique Hazaël-Massieux. Има преводи на тази статия.

Въведение

HTML е структуриран език, чийто цел е, или би трябвало да бъде, използването му за сруктуриране на текст чрез тагове. Тагът table следва да се използва само за да се форматират данни във вид на таблица и да се обвържат в колони и редове.

От появяването на таблиците в HTML, много често те се използват за оформление на шаблона, обикновено за разделяне на страницата на колони. Освен факта, че противоречат на смисъла на HTML, те дори го възпрепятстват в определени случай, които могат да се обобщят с труден разбор и рендирането на таблица в някакъв контекст (при увреждания, ограничения в зрението, ...).

Този документ обяснява един от начините да се създаде шаблон с 3 колони и съдържа връзки към други техники за оформление.

Описание на шаблона

Описаната по-долу техника е същата, използвана в страницата за нови W3C потребители и позволява да се създаде шаблон с 3 колони и следните особености:

• текстът в средата на страницата е този, който е първи по ред в кода, което означава, че най-напред той ще бъде прочетен в браузъри без CSS и не-визуални браузъри
• следват лявата и дясната колона

Идеален е за начални страници, защото позволява разполагането на пълен текст в средата и списъци с връзки от двете страни.

Едно от ограниченията е, че няма да работи под твърде лошите CSS имплементации, но ще деградира нелошо при традиционното вертикално разположение.

Този шаблон е приложен и на настоящата страница, така че може да добиете представа, какво оформление създава.

Приложение

Този шаблон използва CSS абсолютно позициониране. Ако дефинираме 3 разделения на HTML страница <div id="main">, <div id="list1" class="link-list">, <div id="list2" class="link-list">, може да приложим върху тях следните CSS правила:

/* Свойства, отнасящи се и до двата списъка в страничните колони */
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;
}
/* оставяме малко място отстрани чрез използване на margin-* свойството */
#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).

За да попречим на лоши CSS имплементации да четат стила, просто го извикваме чрез <style type="text/css">@import url('your-stylesheet-url');</style>.