Сдам Сам

ПОЛЕЗНОЕ


КАТЕГОРИИ







Исправление IE с помощью условных стилей





Существует способ обхода указанных выше проблем браузера IE. Он требует некоторой хитрости и дополнительной таблицы стилей, но он работает. Можно использовать expression для создания более широкого пробела, а затем загрузить это выражение с помощью условных комментариев. Синтаксис выражения имеет следующий вид:

table { border-collapse: expression("separate", cellSpacing = "5px");}

Этот код CSS будет полезен только для IE, поэтому мы хотим, чтобы он применялся только в IE. Это выражение будет также делать недействительной таблицу стилей, поэтому многие разработчики предпочитают изолировать вставку для IE в отдельной таблице стилей, загружаемой только в IE.

Для этого создаем новую таблицу стилей с именем ie-only.css и присоединяем ее в условном комментарии:

<!--[if lte IE 7]><link rel="stylesheet" media="screen" href="ie-only.css"/><![endif]-->

Отметим, что [if lte IE 7] означает "если меньше или равно IE версии 7". Это условие открывает код для браузера IE7 и более ранних версий IE, в то время как окружающий комментарий HTML скрывает код от всех остальных браузеров. Можно настроить это выражение в соответствии с требуемой версией IE, например, для версии IE6 и более ранних используйте [if lte IE 6] .В основной таблице стилей задайте нормальный стиль:

table { border: 1px solid #000; border-collapse: separate; border-spacing: 5px; background: #000 url("gradient.gif") bottom left repeat-x;}

И затем установите стиль для IE в ie-only.css:

table { border-collapse: expression("separate", cellSpacing = "5px");}

Это заставит IE создать таблицу с более широким интервалом между ячейками. Необходимо только не забывать поддерживать дополнительные настройки ширины - если изменяется основная таблица стилей, нужно будет изменить также ie-only.css. Очевидно, что условные комментарии позволяют делать значительно больше, чем только оформлять таблицы, так как дополнительная таблица стилей может содержать весь код CSS, который нужен для исправления ошибок IE.



Простой дизайн

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

table { width: 100%; border: 1px solid #000;} th, td { width: 25%; text-align: left; vertical-align: top; border: 1px solid #000; border-collapse: collapse; padding: 0.3em; caption-side: bottom; } caption { padding: 0.3em; color: #fff; background: #000;} th { background: #eee;}

Полученный результат выглядит как на рис. 33.12:

Рис. 33.12. Таблица с негативным белым на черном заголовком таблицы и светло-серым фоном для ячеек заголовков столбцов таблицы

Распространенные варианты использования

В этом разделе мы рассмотрим несколько распространенных дизайнерских решений, которые постоянно встречаются в таблицах Web.

Разметка зебра

Широко используемым вариантом дизайна для таблиц является создание строк с альтернативными цветами. Это обычно называют "разметкой зебры". Хотя и существуют какие-то сомнения в отношении того, насколько разметка зебры действительно помогает читателю (http://www.alistapart.com/articles/zebrastripingdoesithelp), она является популярным стилем оформления. рис. 33.13 показывает пример:

Рис. 33.13. Таблица с "разметкой зебры", поочередно задающая строки с белым и светло-серым фоном

Проще всего реализация разметки зебры делается добавлением класса для чередования строк таблицы, а затем использованиемконтекстного селектора CSS для оформления ячеек в этих строках. Прежде всего, в строки таблицы добавляются следующим образом классы "odd" и "even":

... <tr class="odd"> ... <tr class="even"> ...

Можно пропустить строку заголовков столбцов, так как она имеет свой собственный стиль оформления. Затем добавляется контекстныйкласс для задания фона всех ячеек в строках класса odd:

.odd th, .odd td { background: #eee; }

Это простейший способ добавить разметку зебры в таблицу HTML, который будет работать для всех браузеров, но он имеет недостатки - что если вы добавите в таблицу строку? Тогда потребуется перемещать все имена классов odd и even, чтобы все снова выглядело правильно.

Существует два других варианта:

· Можно добавлять классы с помощью небольшого сценария JavaScript, как показано в публикации "A List Apart: Zebra Tables" (http://www.alistapart.com/articles/zebratables/). Большинство средств разработки JavaScript также имеют подходящий метод: публикация Zebra Table Showdown (http://jquery.com/blog/2006/10/18/zebra-table-showdown/) сравнивает ряд реализаций.

· Можно использовать селектор CSS3 :nthchild, однако он пока еще поддерживается не во всех основных браузерах. Однако поддержка со временем улучшится.

Дополнительно о разметке зебры с помощью селектора nth-child смотрите в специальной статье на сайте dev.opera.com(http://dev.opera.com/articles/view/zebra-striping-tables-with-css3/).

Неполные сетки

Для некоторых решений хорошо подходят менее структурированные, более открытые сетки. Простым вариантом является удаление вертикальных границ и удаление заливки фона заголовка таблицы, как показано на рис. 33.14:

Рис. 33.14. Таблица со светло-серыми границами только на внешних краях и по нижнему краю каждой ячейки

Код CSS для этого представления имеет вид:

table { width: 100%; border: 1px solid #999; text-align: left; border-collapse: collapse; margin: 0 0 1em 0; caption-side: top;} caption, td, th { padding: 0.3em;} th, td { border-bottom: 1px solid #999; width: 25%;} caption { font-weight: bold; font-style: italic;}

Можно сделать еще один шаг и удалить все границы, за исключением верхней и нижней границы, чтобы определить тело таблицы - см. рис. 33.15:

Рис. 33.15. Таблица с границами только по верху и низу тела таблицы

Код CSS для такой таблицы будет следующим:

table { width: 100%; text-align: left; border-collapse: collapse; margin: 0 0 1em 0; caption-side: top;} caption, td, th { padding: 0.3em;} tbody { border-top: 1px solid #000; border-bottom: 1px solid #000;} tbody th, tfoot th { border: 0;} th.name { width: 25%;} th.location { width: 20%;} th.lasteruption { width: 30%;} th.eruptiontype { width: 25%;} tfoot { text-align: center; color: #555; font-size: 0.8em;}

Внутренние границы

Иногда желательно удалить внешнюю границу, но сохранить внутреннюю сетку границ, как на рис. 33.16:

Рис. 33.16. Таблица с внутренней сеткой

Чтобы реализовать это для всех современных браузеров, необходимо добавить класс в ячейки th и td, которые появляются последними в каждой строке, следующим образом:

...<tr> <th scope="col">Volcano Name</th> <th scope="col">Location</th> <th scope="col">Last Major Eruption</th> <th scope="col" class="last">Type of Eruption</th></tr> ...

Затем мы используем этот класс для удаления правой границы из этих ячеек. Полный код CSS будет иметь вид:









Что вызывает тренды на фондовых и товарных рынках Объяснение теории грузового поезда Первые 17 лет моих рыночных исследований сводились к попыткам вычис­лить, когда этот...

Конфликты в семейной жизни. Как это изменить? Редкий брак и взаимоотношения существуют без конфликтов и напряженности. Через это проходят все...

Что делать, если нет взаимности? А теперь спустимся с небес на землю. Приземлились? Продолжаем разговор...

ЧТО ПРОИСХОДИТ, КОГДА МЫ ССОРИМСЯ Не понимая различий, существующих между мужчинами и женщинами, очень легко довести дело до ссоры...





Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте:


©2015- 2021 zdamsam.ru Размещенные материалы защищены законодательством РФ.