Особенности табличной верстки

Создание страниц с использованием em для указания размеров элементов страницы

Способы и особенности создания страниц с изменяемым размером шрифта

В IE, при изменении состояния пункта меню «Вид → Размер шрифта» или вращении колеса мыши с зажатым Ctrl, наблюдается изменение размера текста.

Под изменяемым размером шрифта понимается указание относительного значения в параметре font-size. Относительными единицами измерения являются % и em. При этом, по сути, 1em = 100%. При принятии решения каких именно единицах измерения делать верстку надо учитывать, что при указании в em разница между размерами при разных состояниях пункта меню будет больше, чем при использовании %. По-умолчанию в IE font-size имеетзначение middle, что соответствует 16px.

Расчет производится относительно унаследованного значения:

HTML:

<p><a href=”#”>Link</a></p>

Важно! Значение 100,01% у html указывается для решения проблемы неверного вычисления размера шрифта в Opera.

CSS:

html{

`font-size:100.01%; /* см. ниже */

}

body{

font-size:middle;

}

p{

font-size:70%; /* 11px */

}

p a{

font-size:100%;

}

В данном случае размер шрифта у тэга < a> будет примерно равен 11px (на самом деле 11,24px, такое значение необходимо для Opera, в ней не корректно организовано вычисление дробных величин).

Порядок работы может быть разный:

· можно сначала рассчитать соответствие % или em к px, используя как базовый 16px и использовать полученные значения при дальнейшей верстке;

· можно сначала сделать верстку с использованием px, а потом пройтись по всему CSS и заменить все значения font-size с px на % или em;

· можно использовать и такой вариант:

CSS:

html{

font-size:100.01%

}

body{

font-size:64%;

}

Важно! Во всех руководствах указывается значение 62.5% для body, но опытным путем выявлено, что вернее ставить именно 64% (большое спасибо Opera).

Важно! Следует помнить, что при использовании относительных величин свойство line-height вычисляется от величины font-size этого же блока, если не было унаследовано от родительского блока. Т.е. при font:10px/1.2em или font:10px/120% line-height будет равняться 12px.

Теперь 10% = 1px или 1em = 10px. Далее можно указывать размеры шрифтов, вычисляя делением указанных в дизайне на 10. Также теперь можно использовать em (но только em) для указания линейных размеров блоков, при изменении размера шрифта размер сайта будет меняться. (см. 6.8)

Как привести размер базового шрифта к удобному размеру описано в 6.7. Все тексты следует заключать в логические блоки отдельные от визуальных, чтобы не намешать кашу из наследования свойств. Далее надо заменить абсолютные значения на соответствующие относительные.

При табличной верстке надо обнулить padding и margin, как у самой таблицы так и у вложенных td. Также надо избавиться от граничных отступов: border-collapse:collapse.

HTML:

<table class=”table”>

<tr>

<td>Cell1</td>

<td>Cell1</td>

</tr>

</table>

CSS:

table.table{

padding:0;

margin:0;

border-collapse:collapse;

}

table.table td{

padding:0;

margin:0;

}

Таким образом, мы избавляемся от записи параметров тэга <table>.

Следует избегать использования rowspan: в некоторых браузерах rowspan не всегда корректно обрабатывается.

Элементам tr и td не следует присваисать свойства position:absolute и float, так как это может привести к совершенно разным результатам в разных браузерах (рекомендуется с этим поэкспериментировать, чтобы иметь представление о предмете). Так же надо учитывать, что на блоки имеющие свойства display:table, display:table-row, display:table-cell накладываются те же ограничения.

Дата добавления: 2014-12-16