В Рунете идёт постоянный спор, какой лучше макет для сайта: фиксированный или тянущийся. Media queries позволяют сверстать макет, приспосабливающийся к устройствам или к ширине экрана. Но зачем все это, если можно общему контейнеру задать ширину в 1240 пикселей, и не думать, что у кого-то экран может быть и уже=) (хотя бы по этой статистике). Зато можно вставить в шапку мегакартинку.
Не касаюсь содержания, но статья, на которую я перешел из твиттера, была по делу, неважно (smashingmagazin похвалил… хотя скорее smashingmagazin’у понравилась форма обратной связи — прокрутить почти до дна, а там, кроме красивой формы, еще одна мегакартинка, да еще разрезанная на несколько частей). Не знаю, что вдруг так меня задело, дизайнерский сайт, и ладно. Стало просто интересно, как сверстано=) (так себе, в общем-то (не сравнивайте с версткой стархака=))
Хотя, конечно, надо смотреть на статистику по посетителям сайта. Может быть на указанный сайт не заходят посетители, у которых мониторы с меньшим разрешением. Но для меня такой поход — хорошая иллюстрация к заголовку этой моей реплики, когда дизайн превыше всего.
Несильно информативная статья, но может быть это растолкает меня на продолжение написательства.
�?спользовал на корпоративном сайте краткую запись правила для шрифта:
body {
font: 81.25%/1.5 Arial, Helvetica, sans-serif;
}
На работе LINUX (не умею готовить, и потому дико не люблю), потому работаю в Хроме (быстрее) и Файрфоксе (полезнее). VMWare умерла, а восстанавливать лень, потому проверяю в IЕ (благо основные посетители нашего сайта не IЕ-пользователи, хотя 25% немало, но можно смотреть иногда сквозь пальцы на мелкие баги в IЕ) от случая к случаю. �? вот тут смотрю и вижу в IЕ7 дефолтные шрифты. Это был IЕ8 в режиме IЕ7. Причем встроенный тулбар показывает, что шрифт применяется какой-надо. Но на странице ни фига не Arial. Оказалось все просто. В Eclipse есть возможность отформатировать код (хоть и не совсем удачная реализация). �? в какой-то момент случайно я отформатировал CSS. �? это форматирование добавило кучу пробелов и переносов строк, в том числе и перед значением LINE-HEIGHT. Получилось вот так:
body {
font: 81.25%/ 1.5 Arial, Helvetica, sans-serif;
}
�? IЕ7 перестал понимать это правило. А мне уже стали проедать мозг из других отделов: «Что за жуткий шрифт на сайте стал?» Так что вот. Мораль обычная: аккуратность, аккуратность и еще раз аккуратность. Как обычно, диавол прятался в мелочах.
Случайно столкнулся со странной багой в опере 9.64 и 10. Есть простой всем известный способ растянуть сайт на всю высоту окна браузера:
CSS
html, body {
background:#fff;
border:0;
height:100%; /*trick*/
margin:0;
padding:0;
}
.wrap {
background:red;/* для контраста*/
min-height:100%;
_height:100%;/* ie6 underscore hack*/
margin:0 auto;/* расположим блок посередине экрана */
width:90%;/*необязательно*/
}
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Странная бага оперы</title>
<link href="minheightbug.css" media="screen" type="text/css" rel="stylesheet">
</head>
<body>
<div class="wrap">немного текста для теста.
Странная бага оперы с определением высоты блока</div>
</body>
</html>
�? вариант со стилями в самом .HTML файле, прописанными в HEAD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Странная бага оперы</title>
<style type="text/css">
html, body {
background:#fff;
height:100%;
margin:0;
padding:0;
}
.wrap {
background:red;
min-height:100%;
margin:0 auto;
width:90%;
}
</style type="text/css">
</head>
<body>
<div class="wrap">немного текста для теста.
Странная бага оперы с определением высоты блока</div>
</body>
</html>
(DOCTYPE не важно какой)
Простой общеизвестный способ. Но...
�?грался как-то с разметкой (чуть позже распишу с какой). Создал html-файл и начал писать стили в HEAD, для скорости и чтоб не делать лишних телодвижений (еще один файл, переключаться из HTML в CSS). Начал тестить: ФФ — гут, Хром — гут, Сафари (вин) — гут, �?Е (о чудо) — гут. �? тут черед дошёл до оперы…
�? я увидел, что блок WRAP не растягивается на всю высоту окна. Отресайзишь окно — растягивает. Обновишь — опять WRAP по высоте на свой контент.
Странная бага оперы то же самое после ресайза окна в опере
Решил посмотреть предыдущую работу, в которой использован этот же способ. Опера все показывает правильно. Одна разница: там стили подключены внешним файлом через LINK. Я в недоумении. Опера правильно применила все стили, прописанные в HEAD, кроме определения минимальной высоты. �? только, повторюсь, ресайз позволяет опере правильно вычислить это значение.
Выводов два.
Нефиг лениться. Трудно видите ли не переключиться на отдельный файл стилей.
Да и неверно это в принципе писать стили в HEAD: растет размер страницы, стили не кешируются, если у вас больше, чем один шаблон, то править стили придется в нескольких местах
В общем, если бы делал все, как положено, сэкономил бы себе пару часов времени: ни видел разницы в стилях, и это ставило в тупик.
P.S. При том, что опера замечательный браузер, вот такие вот простые ляпы сильно портят впечатление.
Проект еще в разработке, и по указанному адресу еще старая версия сайта. Я же представляю свою работу по верстке. �?з особенностей, мне кажется, стоит упомянуть красиво оформленные заголовки. Поначалу я думал, что придется использовать абсолютное позиционирование для вложенного в заголовок дополнительного элемента. Как ни крути, а это дополнительные сложности при дальнейшей разработке. Но удалось за счет комбинирования отрицательных margin и соответствующих padding обойтись простым фоном. За деталями — файрбаг вам в помощь.
Параллельно верстаются макеты для каналов HDTV-1 и HDTV-2. Там почти та же самая верстка, за исключением закругленных уголков (для них потребовалась дополнительная разметка), но выглядят они совсем иначе. В общем CSS в действии: одна разметка — три разных сайта.
�?юнь 2009
Обновление: какой же жуткий редизайн провели на сайте. То, что я верстал, конечно, небезупречно, но насколько интереснее и красочнее. Сейчас же что-то сильно унылое. Печально!
Фиксированная по ширине верстка (главная, типовая). Любопытна тем, что первый раз опробовал новый способ растянуть фон на всю высоту страницы. Это способ можно использовать для верстки макетов с колонками одинаковой высоты. Надо бы его поподробнее описать как-нибудь.
Май 2009
Приятно было работать с этим проектом: из-за дизайна. В общем и целом ничего сложного: прозрачная тень под выпадающим меню да повсюду закругленные уголки. Немного поюзал jQuery. Единственная особенность: разметка одна — вариантов дизайна два (летний и зимний). А так верстка фиксированная по ширине и растянутая по высоте. Выполнено в декабре 2008.
P.S. Макеты потеряны, ссылки убраны.
Warning: Illegal string offset 'caption' in /home/k/kashinanru/public_html/wp-includes/media.php on line 2108
Warning: Cannot assign an empty string to a string offset in /home/k/kashinanru/public_html/wp-includes/media.php on line 2108
Небольшое предисловие. Так случилось, что я подписался на сайте WSG на мейл-лист для обсуждения различных вопросов, связанных с применением веб-стандартов в ежедневной практике. Да, в этой подписке случаются интересные обсуждения, но зачастую там появляются вопросы настолько простые, что даже становится как-то неловко за авторитет уважаемой WSG. Вот и в этот раз вопрос был просто потрясающим: можно ли использовать картинку-бекграунд для кнопки с нефиксированной шириной. Но не это меня побудило меня черкануть пару строк. В одном из ответов, как лучше все сделать проскользнул совет:
Something like this (как-то так):
button {padding:2px 5px;background: #FAF9F5 url(../images/bgimg.png) repeat;line-height: 1.5;
}
then use smaller padding left/right value for IE, e.g. (и потом уменьшите отступы для �?Е)
button {padding: 2px 1px !important}
Вот последняя строчка и вызвала мое изумление. Уважаемый подписчик WSG не знает как можно избавиться от лишних отступов по бокам в кнопках в �?нтернет Експлорере.
Поясню в чем дело. �?нтернет Експлорер в версиях до 7 включительно добавлял в кнопках (будь то input, илиbutton) справа и слева непонятные отступы, причем, чем длиннее была надпись на кнопке, тем больше отступы. Вот как-то так:
Тогда как в остальных браузерах (для меня это Файрфокс, Опера и Хром) все выглядит так:
отступы в кнопках в файрфоксе
Никаких непонятных отступов, все одинаково, независимо от количества знаков в надписи.
�? что же делать? Как привести в чувство этот загадочный �?Е? Читать далее
Состоит из двух частей: непосредственно сайт и картографический модуль. (http://www.investinfo.spb.ru/ru/about/info/ и http://map.investinfo.spb.ru/mapview/ соответственно)
На сайте я немного необычно, как мне кажется, сделал меню (первый его уровень). Как обычно, я старался уменьшить количество картинок, используемых для создания меню. �? делая это меню, я еще не использовал CSS-свойство clip. Думается мне, что это свойство мне могло пригодится. Но обошелся и без него, сделав все кроссбраузерно, использовав минимум картинок, причем PNG с альфа-каналом. Вот из-за альфа-канала весь сыр-бор, как обычно. Как известно �?Е6 не поддерживает альфа-прозрачность в PNG напрямую, а только через проприетарные майкрософтовские фильтры. �? поэтому не получилось просто сдвигать фон пунктов меню, как обычно это делается для меню, реализованных фоновыми картинками. Ну раз нельзя двигать фон, будем двигать целиком элемент, в котором фоном будет необходимая нам картинка.
�?так, делаем картинку, состоящую из двух частей: одна с белой надписью, вторая с красной (синий фон добавлен, чтобы читалась белая надпись, но синий в данном случае означает прозрачный).
Высота картинки равна двойной высоте меню (в данном случае 51 пиксель). Создаем в таблице стилей описание для элемента, фоном которого будет наша картинка. Размеры элемента равны размеру картинки. Это необходимо для, чтобы пнг-фильтр для �?Е6 отобразил картинку полностью. �? теперь нам только остается сдвигать этот элемент с фоном при наведении на соответсвующий пункт меню.
иллюстрация к идее
Чтобы показать как все это ведет себя в браузере воспользуюсь возможностями FireBug.
исходное состояние. элемент с необходимым фоном подсвечен голубым цветом
Красным обведены стили, отвечающие за исходное состояние.
наведенное стояние пункта меню
Как видите (обведено красным), я поспользовался отрицательным <code>margin</code>, чтобы сдвинуть элемент с фоном и показать красную надпись.
Вот такой вариант мне пришел в голову, когда я верстал этот макет.
макет главной страницыЧто касается карты, то в ней единственной сложностью было, что приходилось работать через удаленный рабочий стол, имея не очень хорошо сгенерированный картографическим модулем HTML. Пришлось много перелопачивать уже готовых шаблонов вывода результатов. Но общий каркас мне удался) Аж самому понравилось. К тому же было принято несколько моих предложений по, как мне кажется, улучшению интрефейса. �? верстка получилась в общем компактная, вполне себе семантичная. �? почти без Expressions для �?Е6) В общем смотрите, любуйтесь, что понравилось — используйте. К сожалению в статичном варианте раздела карты у меня нет, по причине укзанной выше. Все делалось наживую на удаленном сервере. Но будет время, соберу воедино все стили и всю верстку карты и выложу на общее обозрение.
карта Геоинформационной Системы инвестора Санкт-Петербурга
При верстке карты обнаружил забавную мелочь: из всех браузеров, которые у меня установлены (�?Е6-8, ФФ 2-3,5. Опера 9.2-10, Хром 3.0.183.1 и Сафари 4 бета (кстати, надо скачать уже не бету)), только Сафари и �?Е8 понимают свойство background-image для selecta‘а. background-color понимают все, даже �?Е6, а вот background-image отнюдь нет.
