Статьи из рубрики «css» RSS


Кросс-браузерное одноуровневое вертикальное меню без JavaScript

Так случилось, что срочно понадобилось сделать горизонтальное , причем для проекта, который нужно было сдавать вчера :-) Естественно, самому писать не было времени, нужно было взять что-то готовое. Я недавно прочитал статью «Всплывающее гибридное меню на CSS», поэтому взял код именно оттуда. Но не в этом дело. У подавляющего большинства меню камнем преткновения становится  — а всё из-за того, что он понимает :hover только для тэга <a></a>. Когда-то у меня был заказчик, требовавший, чтобы всё одинаково работало с выключенным JavaScript'ом; вспомнив его, я решил попробовать сделать меню, работающее безо всякого JavaScript. Так получилось, что попутно я нашел еще один очень интересный глюк в IE6 (о нём далее), в борьбе с которым у меня получилось вертикальное меню. Далее »

Автор: , опубликовано в: CSS, HTML, комментариев: 32
23
Мар
2008

Резиновый трехколоночный макет с правосторонними сайдбарами

Очередной раз попав не туда, куда надо из Google, я натолкнулся на статью "Трехколоночный макет на CSS с одинаковой высотой колонок". Да, трехколоночные макеты (да еще и резиновые!) очень популярны, я смотрю :-) Но, несмотря на популярность таких макетов, многие верстальщики почему-то не хотят учиться и городят целый огород на div'ах. Далее »

Автор: , опубликовано в: CSS, HTML, комментариев: 17
22
Мар
2008

Легко изменяемый макет фиксированной ширины

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

Автор: , опубликовано в: CSS, HTML, комментариев: 3
18
Мар
2008

IE6/7: слишком широкие кнопки

Читая один замечательный блог, я наткнулся на заметку о том, что в /7 кнопки c "длинным текстом" становятся очень длинными. Далее »

Автор: , опубликовано в: CSS, HTML, JavaScript, комментариев: 5
16
Мар
2008

IE7/8 и общий случай двухколоночной резиновой вёрстки

В последнее время так называемая "резиновая вёрстка" (aka liquid layouts) становится всё более популярной, и далеко не последнюю роль в этом играет постоянное увеличение разрешения мониторов. Одним из часто применяемых шаблонов является двухколоночный (одна колонка имеет фиксированную ширину, другая является "резиновой"). Существует несколько разных подходов к вёрстке многоколоночных шаблонов, некоторые подходы приведены на A List Apart: Creating Liquid Layouts with Negative Margins и Multi-Column Layouts Climb Out of the Box. Второе решение, на мой взгляд, более элегантное; но как бы там ни было, оба решения являются, по сути дела, лишь частными случаями шаблона, когда колонки могут иметь свои границы, отступы и т.п. Конечно, расчет всех параметров не является особо сложным, но почему-то многие разработчики предпочитают не утруждать себя лишними вычислениями, а использовать вложенные div, что не очень-то хорошо, ибо такие элементы не несут особой семантической нагрузки. А с появлением  beta (которая альфа) расчеты усложнились, ибо IE8 довольно-таки криво считает координаты элемента с отрицательными границами. Поэтому мы попытаемся найти Универсальное для двухколоночного резинового шаблона. Далее »

Автор: , опубликовано в: CSS, HTML, комментариев: 5
15
Мар
2008

Почему Microsoft называет альфы бетами, или, кому нужны ACID-тесты

Не так давно я боролся с вертикальным выравниванием в Internet Explorer, и вот опять оказалось, что с выходом Beta это было всё напрасно. Как и многие, я не рискнул устанавливать на основную машину, поэтому поставил на виртуальную. Затем зашёл на парочку сайтов, которые отображаются нормально во всех остальных браузерах… Я был потрясён и разочарован…

Возникает чувство, что Micro$oft называет свои alpha-релизы бетами. Они делали акцент на том, что MS IE8 проходит тест ACID2, так гордились этим… А оказалось, что всё как обычно: убрали один старый баг, внесли десяток новых. Далее »

Автор: , опубликовано в: CSS, комментариев: 3
14
Мар
2008

Вертикальное выравнивание без таблиц

Идея: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Постановка задачи:

  • имеется область (например, <div>), высота которой известна;
  • имеется некий объект внутри этой области, высота данного объекта неизвестна;
  • требуется вертикально отцентрировать объект;
  • таблицы использовать нельзя.

Далее »

Автор: , опубликовано в: CSS, комментариев: 5
13
Мар
2008

Нижний колонтитул — в нижней части страницы

С каждым годом мониторы становятся всё больше и больше; как следствие, растёт и разрешение экрана. И страницы с небольшим количеством контента на таких мониторах смотрятся некрасиво — особенно, когда нижний колонтитул (aka подвал aka footer) плавает где-то в верхней части экрана :-)

Многие сайты решают эту проблему при помощи табличной верстки (<table height="100%"></table>) с теми или иными вариациями. Но это не наш метод, ибо это противоречит WCAG 1.0. Поэтому для решения задачи будем использовать семантически корректную разметку и . Далее »

Автор: , опубликовано в: CSS, комментариев: 24
12
Мар
2008

Центрирование нескольких блочных элементов

Работая над одним проектом, мне пришлось столкнуться с одной неприятной задачей: отцентрировать многострочный список (то есть один <ul>, много <li>) так, чтобы элементы списка (неизвестное количество, неизвестная ширина, одинаковая высота) были отцентрированы в каждой строчке:

menu.png

Далее »

Автор: , опубликовано в: CSS, HTML, комментариев: 2
10
Мар
2008